Skip to content

Colors

All Colors are provided by CSS Custom Properties.

You may have a look at the Quick Guide 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#007B5E0 128 0Success green--color-success-green
UXBlack#0000000 0 0Black--color-black
UXBlack 80%#33333351 51 51Black 80%--color-black-80
UXBlack 55%#737373115 115 115Black 55%--color-black-55
UXBlack 20%#CCCCCC204 204 204Black 20%--color-black-20
UXBlack 8%#EBEBEB235 235 235Black 8%--color-black-8
UXBlack 3%#F8F8F8248 248 248Black 3%--color-black-3
UXWhite#FFFFFF255 255 255White--color-white

Theme Colors

SampleTypeNameHexRGBFigma Library nameCSS Custom Properties name
UX Theme EiendomEmerald green 50%#00343E137 170 172Emerald green 50%--color-emerald-green-50
UX Theme EiendomEmerald green 25%#c4d4d6196 212 214Emerald green 25%--color-emerald-green-25
UX Theme EiendomEmerald green 10%#e8eeef232 238 239Emerald green 10%--color-emerald-green-10
UX Theme EiendomMint green 12%#f4fbf9244 251 249Mint green 12%--color-mint-green-12