DuetColor
Color item displaying as a row, with color, name, description, var, and sass variables as well as the contrast ratio ad status. Design inspired by Duet.
| Example | Description | Token | Contrast | Status |
|---|---|---|---|---|
#de2362 rgb(222, 35, 98) | Status Danger Danger red that is accessible with white. Only used in special cases like form validation and messaging. | $color-dangervar(--color-danger) | 4.64:1 | |
#f7b228 rgb(247, 178, 40) | Status Warning Warning orange (non-accessible) is only used in special cases like form validation and messaging. | $color-warningvar(--color-warning) | 1.85:1 | |
#00875a rgb(0, 135, 90) | Status Success Success green that is accessible with white. Only used in special cases like form validation and messaging. | $color-successvar(--color-success) | 4.55:1 | |
#657787 rgb(101, 119, 135) | Gray Darker Darker gray that is accessible with white when used for text. Most commonly used as a text color for interface help texts. | $color-gray-darkervar(--color-gray-darker) | 4.62:1 | |
#909599 rgb(144, 149, 153) | Gray Dark Dark gray is used for form borders that need to pass WCAG Level AA non-text contrast requirements. Please note that this color isn’t accessible when used for text. | $color-gray-darkvar(--color-gray-dark) | 3.02:1 | |
#7a01c4 rgb(122, 1, 196) | Data 01 Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $color-data-01var(--color-data-01) | 7.99:1 | |
#c21565 rgb(194, 21, 101) | Data 06 Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $color-data-06var(--color-data-06) | 5.85:1 |
| Example | Description | Token | Contrast | Status |
|---|---|---|---|---|
#de2362 rgb(222, 35, 98) | Status Danger Danger red that is accessible with white. Only used in special cases like form validation and messaging. | $color-dangervar(--color-danger) | 4.64:1 | |
#f7b228 rgb(247, 178, 40) | Status Warning Warning orange (non-accessible) is only used in special cases like form validation and messaging. | $color-warningvar(--color-warning) | 1.85:1 | |
#00875a rgb(0, 135, 90) | Status Success Success green that is accessible with white. Only used in special cases like form validation and messaging. | $color-successvar(--color-success) | 4.55:1 | |
#657787 rgb(101, 119, 135) | Gray Darker Darker gray that is accessible with white when used for text. Most commonly used as a text color for interface help texts. | $color-gray-darkervar(--color-gray-darker) | 4.62:1 | |
#909599 rgb(144, 149, 153) | Gray Dark Dark gray is used for form borders that need to pass WCAG Level AA non-text contrast requirements. Please note that this color isn’t accessible when used for text. | $color-gray-darkvar(--color-gray-dark) | 3.02:1 | |
#7a01c4 rgb(122, 1, 196) | Data 01 Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $color-data-01var(--color-data-01) | 7.99:1 | |
#c21565 rgb(194, 21, 101) | Data 06 Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $color-data-06var(--color-data-06) | 5.85:1 |
| Example | Description | Token | Contrast | Status |
|---|---|---|---|---|
#de2362 rgb(222, 35, 98) | Status Danger Danger red that is accessible with white. Only used in special cases like form validation and messaging. | $color-dangervar(--color-danger) | 4.64:1 | |
#f7b228 rgb(247, 178, 40) | Status Warning Warning orange (non-accessible) is only used in special cases like form validation and messaging. | $color-warningvar(--color-warning) | 1.85:1 | |
#00875a rgb(0, 135, 90) | Status Success Success green that is accessible with white. Only used in special cases like form validation and messaging. | $color-successvar(--color-success) | 4.55:1 | |
#657787 rgb(101, 119, 135) | Gray Darker Darker gray that is accessible with white when used for text. Most commonly used as a text color for interface help texts. | $color-gray-darkervar(--color-gray-darker) | 4.62:1 | |
#909599 rgb(144, 149, 153) | Gray Dark Dark gray is used for form borders that need to pass WCAG Level AA non-text contrast requirements. Please note that this color isn’t accessible when used for text. | $color-gray-darkvar(--color-gray-dark) | 3.02:1 | |
#7a01c4 rgb(122, 1, 196) | Data 01 Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $color-data-01var(--color-data-01) | 7.99:1 | |
#c21565 rgb(194, 21, 101) | Data 06 Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $color-data-06var(--color-data-06) | 5.85:1 |
| Example | Description | Token | Contrast | Status |
|---|---|---|---|---|
#de2362 rgb(222, 35, 98) | Status Danger Danger red that is accessible with white. Only used in special cases like form validation and messaging. | $color-dangervar(--color-danger) | 4.64:1 | |
#f7b228 rgb(247, 178, 40) | Status Warning Warning orange (non-accessible) is only used in special cases like form validation and messaging. | $color-warningvar(--color-warning) | 1.85:1 | |
#00875a rgb(0, 135, 90) | Status Success Success green that is accessible with white. Only used in special cases like form validation and messaging. | $color-successvar(--color-success) | 4.55:1 | |
#657787 rgb(101, 119, 135) | Gray Darker Darker gray that is accessible with white when used for text. Most commonly used as a text color for interface help texts. | $color-gray-darkervar(--color-gray-darker) | 4.62:1 | |
#909599 rgb(144, 149, 153) | Gray Dark Dark gray is used for form borders that need to pass WCAG Level AA non-text contrast requirements. Please note that this color isn’t accessible when used for text. | $color-gray-darkvar(--color-gray-dark) | 3.02:1 | |
#7a01c4 rgb(122, 1, 196) | Data 01 Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $color-data-01var(--color-data-01) | 7.99:1 | |
#c21565 rgb(194, 21, 101) | Data 06 Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $color-data-06var(--color-data-06) | 5.85:1 |
| Example | Description | Token | Contrast | Status |
|---|---|---|---|---|
#de2362 rgb(222, 35, 98) | Status Danger Danger red that is accessible with white. Only used in special cases like form validation and messaging. | $color-dangervar(--color-danger) | 4.64:1 | |
#f7b228 rgb(247, 178, 40) | Status Warning Warning orange (non-accessible) is only used in special cases like form validation and messaging. | $color-warningvar(--color-warning) | 1.85:1 | |
#00875a rgb(0, 135, 90) | Status Success Success green that is accessible with white. Only used in special cases like form validation and messaging. | $color-successvar(--color-success) | 4.55:1 | |
#657787 rgb(101, 119, 135) | Gray Darker Darker gray that is accessible with white when used for text. Most commonly used as a text color for interface help texts. | $color-gray-darkervar(--color-gray-darker) | 4.62:1 | |
#909599 rgb(144, 149, 153) | Gray Dark Dark gray is used for form borders that need to pass WCAG Level AA non-text contrast requirements. Please note that this color isn’t accessible when used for text. | $color-gray-darkvar(--color-gray-dark) | 3.02:1 | |
#7a01c4 rgb(122, 1, 196) | Data 01 Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $color-data-01var(--color-data-01) | 7.99:1 | |
#c21565 rgb(194, 21, 101) | Data 06 Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $color-data-06var(--color-data-06) | 5.85:1 |