Skip to content

Colors

All Colors are provided by CSS Custom Properties.

You may have a look at the QuickStart for Designers About Colors.

Polyfill

Read more about why and how to use a polyfill.

Example usage

I'm Sky blue.

Colors Table

SampleTypeNameHexRGBFigma Library nameCSS Custom Properties name
ProfileOcean green#00343E0 52 62Ocean green--color-ocean-green
ProfileEmerald green#14555A20 85 90Emerald green--color-emerald-green
ProfileSea green#0072720 114 114Sea green--color-sea-green
ProfileMint green#A5E1D2165 225 210Mint green--color-mint-green
ProfileSummer green#28B48240 180 130Summer green--color-summer-green
ProfileSignal orange#FF5400255 84 0Signal orange--color-signal-orange
ProfileSignal yellow#FFFF7A255 255 122Signal yellow--color-signal-yellow
ProfileIndigo#23195A35 25 90Indigo--color-indigo
ProfileViolet#6E2382110 35 130Violet--color-violet
ProfileSky blue#4BBED275 190 210Sky blue--color-sky-blue
UXSea green alt#0084840 132 132Sea green alt--color-sea-green-alt
UXSea green alt 30%#B3DADA179 218 218Sea green alt 30%--color-sea-green-alt-30
UXMint green 50%#D2F0E9210 240 233Mint green 50%--color-mint-green-50
UXMint green 25%#E9F8F4233 248 244Mint green 25%--color-mint-green-25
UXMint green 12%#F4FBF9244 251 249Mint green 12%--color-mint-green-12
UXSignal yellow 30%#FFFFD7255 255 215Signal yellow 30%--color-signal-yellow-30
UXFire red#DC2A2A220 42 42Fire red--color-fire-red
UXFire red 8%#FDEEEE253 238 238Fire red 8%--color-fire-red-8
UXBlack#0000000 0 0Black--color-black
UXBlack 80%#33333351 51 51Black 80%--color-black-80
UXBlack 30%#B3B3B3179 179 179Black 30%--color-black-30
UXWhite#ffffff255 255 255White--color-white