Colors
Colors v2.3.0 #
Neutral Colors #
Light Mode
| Color Name | Hex Code | Color |
|---|---|---|
| SurfaceNeutralDefault | #FFFFFF |
|
| SurfaceNeutralAlternative | #EDEAF1 |
|
| SurfaceNeutralTertiary | #F7F3F8 |
|
| SurfaceNeutralOverlay | #1B1B1B |
|
Dark Mode
| Color Name | Hex Code | Color |
|---|---|---|
| SurfaceNeutralDefault | #08031A |
|
| SurfaceNeutralAlternative | #3D394F |
|
| SurfaceNeutralTertiary | #1B172D |
|
| SurfaceNeutralOverlay | #1B1B1B |
|
NeutralLabelColors #
Light Mode
| Color Name | Hex Code | Color |
|---|---|---|
| LabelNeutralDefault | #1A0244 |
|
| LabelNeutralAlternative | #524977 |
|
| LabelNeutralDisabled | #837C9F |
|
| LabelNeutralPlaceholder | #AFAAC2 |
|
| LabelNeutralInvertedAlternative | #EDEAF1 |
|
| LabelNeutralInverted | #FFFFFF |
|
| LabelOrange | #FF6F0C |
|
| LabelOrangeAlternative | #854521 |
|
Dark Mode
| Color Name | Hex Code | Color |
|---|---|---|
| LabelNeutralDefault | #F6F3F6 |
|
| LabelNeutralAlternative | #D5D2D9 |
|
| LabelNeutralDisabled | #8F8B9C |
|
| LabelNeutralPlaceholder | #5B576B |
|
| LabelNeutralInvertedAlternative | #1B172D |
|
| LabelNeutralInverted | #08031A |
|
| LabelOrange | #FF8F47 |
|
| LabelOrangeAlternative | #FEEBDD |
|
SurfaceColors #
Light Mode
| Color Name | Hex Code | Color |
|---|---|---|
| SurfacePrimaryDefault | #6316DB |
|
| SurfacePrimaryAlternative | #4C0FAD |
|
| SurfaceSecondaryDefault | #FB2576 |
|
| SurfaceSecondaryAlternative | #C71B5C |
|
| SurfaceNegativeDefault | #FA3434 |
|
| SurfaceNegativeAlternative | #BE352F |
|
| SurfacePositiveDefault | #3FEF6B |
|
| SurfacePositiveAlternative | #4CB95F |
|
| SurfaceWarningDefault | #FECC00 |
|
| SurfaceWarningAlternative | #C5A22A |
|
| SurfaceInfoDefault | #1FCEF9 |
|
| SurfaceInfoAlternative | #40A0BC |
|
| SurfaceOrangeDefault | #FF6F0C |
|
| SurfaceOrangeAlternative | #C35C1E |
|
Dark Mode
| Color Name | Hex Code | Color |
|---|---|---|
| SurfacePrimaryDefault | #6316DB |
|
| SurfacePrimaryAlternative | #7B59E6 |
|
| SurfaceSecondaryDefault | #FB2576 |
|
| SurfaceSecondaryAlternative | #FF8EA9 |
|
| SurfaceNegativeDefault | #FF695D |
|
| SurfaceNegativeAlternative | #FF9082 |
|
| SurfacePositiveDefault | #72F384 |
|
| SurfacePositiveAlternative | #97F69E |
|
| SurfaceWarningDefault | #FED54B |
|
| SurfaceWarningAlternative | #FFDE73 |
|
| SurfaceInfoDefault | #69D6F8 |
|
| SurfaceInfoAlternative | #92DEF8 |
|
| SurfaceOrangeDefault | #FF8F47 |
|
| SurfaceOrangeAlternative | #FFAA71 |
|
StaticLabelColors #
Light Mode
| Color Name | Hex Code | Color |
|---|---|---|
| LabelStaticHigh | #1A0244 |
|
Dark Mode
| Color Name | Hex Code | Color |
|---|---|---|
| LabelStaticHigh | #1A0244 |
|
ColoredLabelColors #
Light Mode
| Color Name | Hex Code | Color |
|---|---|---|
| LabelPrimary | #6316DB |
|
| LabelSecondary | #FB2576 |
|
| LabelSecondaryAlternative | #4F0520 |
|
| LabelNegative | #BE352F |
|
| LabelNegativeAlternative | #401B18 |
|
| LabelPositive | #4CB95F |
|
| LabelPositiveAlternative | #2D442E |
|
| LabelInfo | #40A0BC |
|
| LabelInfoAlternative | #293A41 |
|
| LabelWarning | #C5A22A |
|
| LabelWarningAlternative | #494023 |
|
| LabelOrange | #FF6F0C |
|
| LabelOrangeAlternative | #854521 |
|
Dark Mode
| Color Name | Hex Code | Color |
|---|---|---|
| LabelPrimary | #9582EF |
|
| LabelSecondary | #FF6490 |
|
| LabelSecondaryAlternative | #FFE6EB |
|
| LabelNegative | #FF695D |
|
| LabelNegativeAlternative | #FFE6E1 |
|
| LabelPositive | #72F384 |
|
| LabelPositiveAlternative | #EAFCE6 |
|
| LabelInfo | #69D6F8 |
|
| LabelInfoAlternative | #E9F6FC |
|
| LabelWarning | #FED54B |
|
| LabelWarningAlternative | #FEF7DC |
|
| LabelOrange | #FF8F47 |
|
| LabelOrangeAlternative | #FEEBDD |
|
OutlineColors #
Light Mode
| Color Name | Hex Code | Color |
|---|---|---|
| OutlineDefault | #C4C0D3 |
|
| OutlineActive | #1A0244 |
|
| OutlineLow | #FFFFFF |
|
| OutlineLowAlternative | #EDEAF1 |
|
| OutlinePrimary | #6316DB |
|
| OutlineSecondary | #FB2576 |
|
| OutlineNegative | #FA3434 |
|
| OutlinePositive | #3FEF6B |
|
| OutlineInfo | #1FCEF9 |
|
| OutlineWarning | #FECC00 |
|
| OutlineOrange | #FF6F0C |
|
Dark Mode
| Color Name | Hex Code | Color |
|---|---|---|
| OutlineDefault | #5B576B |
|
| OutlineActive | #ECE8ED |
|
| OutlineLow | #08031A |
|
| OutlineLowAlternative | #1B172D |
|
| OutlinePrimary | #4C0FAD |
|
| OutlineSecondary | #C71B5C |
|
| OutlineNegative | #FF695D |
|
| OutlinePositive | #4CB95F |
|
| OutlineInfo | #40A0BC |
|
| OutlineWarning | #C5A22A |
|
| OutlineOrange | #C35C1E |
|
ElevationColors #
Light Mode
| Color Name | Hex Code | Color |
|---|---|---|
| ElevationFocus | #E9F6FC |
|
Dark Mode
| Color Name | Hex Code | Color |
|---|---|---|
| ElevationFocus | #293A41 |
|
ChartColors #
ChartsBrand #
Light Mode
| Color Name | Hex Code | Color |
|---|---|---|
| ChartsBrandDefault | #7B59E6 |
|
| ChartsBrandDisabled | #E4E2FD |
|
| ChartsBrandLow | #9582EF |
|
| ChartsBrandLowAlternative | #B0A4F5 |
|
| ChartsBrandHigh | #4C0FAD |
|
| ChartsBrandHighAlternative | #35087C |
|
Dark Mode
| Color Name | Hex Code | Color |
|---|---|---|
| ChartsBrandDefault | #7B59E6 |
|
| ChartsBrandDisabled | #1A0244 |
|
| ChartsBrandLow | #4C0FAD |
|
| ChartsBrandLowAlternative | #35087C |
|
| ChartsBrandHigh | #9582EF |
|
| ChartsBrandHighAlternative | #B0A4F5 |
|
ChartsSecondary #
Light Mode
| Color Name | Hex Code | Color |
|---|---|---|
| ChartsSecondaryDefault | #FF6490 |
|
| ChartsSecondaryDisabled | #FFE6EB |
|
| ChartsSecondaryLow | #FF8EA9 |
|
| ChartsSecondaryLowAlternative | #FFAEC1 |
|
| ChartsSecondaryHigh | #C71B5C |
|
| ChartsSecondaryHighAlternative | #8F1140 |
|
Dark Mode
| Color Name | Hex Code | Color |
|---|---|---|
| ChartsSecondaryDefault | #FF6490 |
|
| ChartsSecondaryDisabled | #4F0520 |
|
| ChartsSecondaryLow | #C71B5C |
|
| ChartsSecondaryLowAlternative | #8F1140 |
|
| ChartsSecondaryHigh | #FF8EA9 |
|
| ChartsSecondaryHighAlternative | #FFAEC1 |
|
ChartsRed #
Light Mode
| Color Name | Hex Code | Color |
|---|---|---|
| ChartsRedDefault | #F0665E |
|
| ChartsRedDisabled | #FFDDD8 |
|
| ChartsRedLow | #FF8E85 |
|
| ChartsRedLowAlternative | #FFB9B1 |
|
| ChartsRedHigh | #B7554E |
|
| ChartsRedHighAlternative | #7C413B |
|
Dark Mode
| Color Name | Hex Code | Color |
|---|---|---|
| ChartsRedDefault | #F0665E |
|
| ChartsRedDisabled | #3E2422 |
|
| ChartsRedLow | #B7554E |
|
| ChartsRedLowAlternative | #7C413B |
|
| ChartsRedHigh | #FF8E85 |
|
| ChartsRedHighAlternative | #FFB9B1 |
|
ChartsYellow #
Light Mode
| Color Name | Hex Code | Color |
|---|---|---|
| ChartsYellowDefault | #FFB410 |
|
| ChartsYellowDisabled | #FEEECD |
|
| ChartsYellowLow | #FFC961 |
|
| ChartsYellowLowAlternative | #FFDD96 |
|
| ChartsYellowHigh | #FFC49029 |
|
| ChartsYellowHighAlternative | #FF88682C |
|
Dark Mode
| Color Name | Hex Code | Color |
|---|---|---|
| ChartsYellowDefault | #FFB410 |
|
| ChartsYellowDisabled | #473920 |
|
| ChartsYellowLow | #C49029 |
|
| ChartsYellowLowAlternative | #88682C |
|
| ChartsYellowHigh | #FFC961 |
|
| ChartsYellowHighAlternative | #FFDD96 |
|
ChartsGreen #
Light Mode
| Color Name | Hex Code | Color |
|---|---|---|
| ChartsGreenDefault | #57CC99 |
|
| ChartsGreenDisabled | #E8F7EC |
|
| ChartsGreenLow | #7BD5AA |
|
| ChartsGreenLowAlternative | #9CDEBB |
|
| ChartsGreenHigh | #508E6F |
|
| ChartsGreenHighAlternative | #446E59 |
|
Dark Mode
| Color Name | Hex Code | Color |
|---|---|---|
| ChartsGreenDefault | #57CC99 |
|
| ChartsGreenDisabled | #354C3F |
|
| ChartsGreenLow | #508E6F |
|
| ChartsGreenLowAlternative | #446E59 |
|
| ChartsGreenHigh | #7BD5AA |
|
| ChartsGreenHighAlternative | #9CDEBB |
|
ChartsBlue #
Light Mode
| Color Name | Hex Code | Color |
|---|---|---|
| ChartsBlueDefault | #0195E3 |
|
| ChartsBlueDisabled | #D4E6F7 |
|
| ChartsBlueDisabled | #6CB2E9 |
|
| ChartsBlueLowAlternative | #A6CDF0 |
|
| ChartsBlueHigh | #2A73A8 |
|
| ChartsBlueHighAlternative | #2B506D |
|
Dark Mode
| Color Name | Hex Code | Color |
|---|---|---|
| ChartsBlueDefault | #0195E3 |
|
| ChartsBlueDisabled | #1B2934 |
|
| ChartsBlueDisabled | #2A73A8 |
|
| ChartsBlueLowAlternative | #2B506D |
|
| ChartsBlueHigh | #6CB2E9 |
|
| ChartsBlueHighAlternative | #A6CDF0 |
|
ChartsOrange #
Light Mode
| Color Name | Hex Code | Color |
|---|---|---|
| ChartsOrangeDefault | #FF8738 |
|
| ChartsOrangeDisabled | #FFE5D2 |
|
| ChartsOrangeLow | #FFAB70 |
|
| ChartsOrangeLowAlternative | #FFCAA2 |
|
| ChartsOrangeHigh | #C46E37 |
|
| ChartsOrangeHighAlternative | #865130 |
|
Dark Mode
| Color Name | Hex Code | Color |
|---|---|---|
| ChartsOrangeDefault | #FF8738 |
|
| ChartsOrangeDisabled | #442D1F |
|
| ChartsOrangeLow | #C46E37 |
|
| ChartsOrangeLowAlternative | #865130 |
|
| ChartsOrangeHigh | #FFAB70 |
|
| ChartsOrangeHighAlternative | #FFCAA2 |
|
ChartsNeutral #
Light Mode
| Color Name | Hex Code | Color |
|---|---|---|
| ChartsNeutralDefault | #9994B1 |
|
| ChartsNeutralDisabled | #EDEAF1 |
|
| ChartsNeutralLow | #AFAAC2 |
|
| ChartsNeutralLowAlternative | #D9D5E2 |
|
| ChartsNeutralHigh | #6B648C |
|
| ChartsNeutralHighAlternative | #524977 |
|
Dark Mode
| Color Name | Hex Code | Color |
|---|---|---|
| ChartsNeutralDefault | #9994B1 |
|
| ChartsNeutralDisabled | #362C5E |
|
| ChartsNeutralLow | #6B648C |
|
| ChartsNeutralLowAlternative | #524977 |
|
| ChartsNeutralHigh | #AFAAC2 |
|
| ChartsNeutralHighAlternative | #D9D5E2 |
|