Every color used in the Elemental Design library is defined in this component.
Usage Guidelines
Only core components such as Buttons or Typography should depend directly on the colors component. Higher level components should get their colors indirectly from the core set of components. This makes it easy to update the color usage across the library.
Features
- Single collection of all colors
- Multiple palettes for dark/light themes etc.
- Guaranteed compliance with Accessibility contrast requirements
Foreground
| Pitch |
#231f20 |
|
| Gray No. 1 |
#565656 |
|
| Royal Navy |
#094877 |
|
| Hyperdrive |
#0d65a6 |
|
| Firetruck |
#D0021B |
|
| Spruce |
#076826 |
|
Background
| Brightly Lit |
#E6E6E6 |
|
| Off White |
#F2F2F2 |
|
| Dirty Ice |
#F8F8F8 |
|
| White |
#FFFFFF |
|
| Blue Milk |
#D9EEFF |
|
| Highlighter |
#FDEC2E |
|
Accents
| Boring |
#A6A8AB |
|
| Sidewalk |
#B3B3B3 |
|
| Hairline Gray |
#D0D0D0 |
|
Foreground
| White |
#FFFFFF |
|
| Gray Wash |
#AEAEAE |
|
Background
| Black |
#000000 |
|
| Gutenberg Black |
#333333 |
|
| Full Moon |
#424242 |
|
Accents
| Asphalt |
#3f3f3f |
|
| Smoke Gray |
#545454 |
|
Background
| Basic Blue |
#107ACA |
|
| Sea |
#0C5D99 |
|
Accents
| Deep Sea |
#0A4D80 |
|
| Sky Blue |
#9DC0DB |
|
| Available Styles |
Reference As (How do I use this?) |
| Pitch (#231f20) |
[](/design/c/colors/v1.0.1/#rd-pitch-231f20) |
| Gray No. 1 (#565656) |
[](/design/c/colors/v1.0.1/#rd-gray-no-1-565656) |
| Royal Navy (#094877) |
[](/design/c/colors/v1.0.1/#rd-royal-navy-094877) |
| Hyperdrive (#0d65a6) |
[](/design/c/colors/v1.0.1/#rd-hyperdrive-0d65a6) |
| Firetruck (#D0021B) |
[](/design/c/colors/v1.0.1/#rd-firetruck-d0021b) |
| Spruce (#076826) |
[](/design/c/colors/v1.0.1/#rd-spruce-076826) |
| Brightly Lit (#E6E6E6) |
[](/design/c/colors/v1.0.1/#rd-brightly-lit-e6e6e6) |
| Off White (#F2F2F2) |
[](/design/c/colors/v1.0.1/#rd-off-white-f2f2f2) |
| Dirty Ice (#F8F8F8) |
[](/design/c/colors/v1.0.1/#rd-dirty-ice-f8f8f8) |
| White (#FFFFFF) |
[](/design/c/colors/v1.0.1/#rd-white-ffffff) |
| Blue Milk (#D9EEFF) |
[](/design/c/colors/v1.0.1/#rd-blue-milk-d9eeff) |
| Highlighter (#FDEC2E) |
[](/design/c/colors/v1.0.1/#rd-highlighter-fdec2e) |
| Boring (#A6A8AB) |
[](/design/c/colors/v1.0.1/#rd-boring-a6a8ab) |
| Sidewalk (#B3B3B3) |
[](/design/c/colors/v1.0.1/#rd-sidewalk-b3b3b3) |
| Hairline Gray (#D0D0D0) |
[](/design/c/colors/v1.0.1/#rd-hairline-gray-d0d0d0) |
| Available Styles |
Reference As (How do I use this?) |
| White (#FFFFFF) |
[](/design/c/colors/v1.0.1/#rd-white-ffffff) |
| Gray Wash (#AEAEAE) |
[](/design/c/colors/v1.0.1/#rd-gray-wash-aeaeae) |
| Black (#000000) |
[](/design/c/colors/v1.0.1/#rd-black-000000) |
| Gutenberg Black (#333333) |
[](/design/c/colors/v1.0.1/#rd-gutenberg-black-333333) |
| Full Moon (#424242) |
[](/design/c/colors/v1.0.1/#rd-full-moon-424242) |
| Asphalt (#3f3f3f) |
[](/design/c/colors/v1.0.1/#rd-asphalt-3f3f3f) |
| Smoke Gray (#545454) |
[](/design/c/colors/v1.0.1/#rd-smoke-gray-545454) |
| Available Styles |
Reference As (How do I use this?) |
| White (#FFFFFF) |
[](/design/c/colors/v1.0.1/#rd-white-ffffff) |
| Basic Blue (#107ACA) |
[](/design/c/colors/v1.0.1/#rd-basic-blue-107aca) |
| Sea (#0C5D99) |
[](/design/c/colors/v1.0.1/#rd-sea-0c5d99) |
| Deep Sea (#0A4D80) |
[](/design/c/colors/v1.0.1/#rd-deep-sea-0a4d80) |
| Sky Blue (#9DC0DB) |
[](/design/c/colors/v1.0.1/#rd-sky-blue-9dc0db) |
| Available Styles |
Reference As (How do I use this?) |
| Sandy Gray (#6d6d6d) |
[](/design/c/colors/v1.0.1/#rd-sandy-gray-6d6d6d) |
| White (#ffffff) |
[](/design/c/colors/v1.0.1/#rd-white-ffffff) |
Changelog
1.0.1
Initial version
Colors