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
ProfileAccent yellow#FDBB31253 187 49Accent yellow--color-accent-yellow
ProfileIndigo#23195A35 25 90Indigo--color-indigo
ProfileViolet#6E2382110 35 130Violet--color-violet
ProfileSky blue#4BBED275 190 210Sky blue--color-sky-blue
ProfileLavender#F2F2F5242 242 245Lavender--color-lavender
ProfileSand yellow#FBF6EC251 246 236Sand yellow--color-sand-yellow
ProfilePistachio#F2F4EC242 244 236Pistachio--color-pistachio
UXSea green 30%#B3D5D5179 213 213Sea green 30%--color-sea-green-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
UXAccent yellow 30%#FEEBC1254 235 193Accent yellow 30%--color-accent-yellow-30
UXSignal orange#FF5400255 84 0Signal orange--color-signal-orange
UXFire red#DC2A2A220 42 42Fire red--color-fire-red
UXFire red 8%#FDEEEE253 238 238Fire red 8%--color-fire-red-8
UXSuccess green#0080000 128 0Success green--color-success-green
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