#fea9a9

#ffefcc

#c2d9ff

Genesis



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



HDR gradient

Switch to HDR to enhance the gradient



Quick view

Inspect colors in multiple color spaces

Colors overview

Red

Yellow

Blue

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#fea9a9	rgb(254, 169, 169)	hsl(0 98% 83%)	hwb(0 66% 0.39%)	lch(77.8 34.9 22.9)	lab(77.8 32.2 13.6)	cmyk 0%, 33%, 33%, 0%
	#ffefcc	rgb(255, 239, 204)	hsl(41 100% 90%)	hwb(41 80% 0%)	lch(95.1 19.1 85.3)	lab(95.1 1.57 19.1)	cmyk 0%, 6%, 20%, 0%
	#c2d9ff	rgb(194, 217, 255)	hsl(220 100% 88%)	hwb(220 76% 0%)	lch(85.9 21.4 265)	lab(85.9 -1.87 -21.3)	cmyk 24%, 15%, 0%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

Click one color card to view the complete contrast checker tests.

#fea9a9

AA - 1.83



#ffefcc

AA - 1.13



#c2d9ff

AA - 1.43



Color blindness

The simulation of color blindness may not be 100% accurate sometimes.

Colors preview as gradient with protanopia

Colors preview as palette with protanopia

UI components preview

Preview the gradient in different UI components.



32°

CPU



48°

GPU



100%

Usage



11°

Rain



70%

Storage

HDR color space

HDR oklab colors



--angle: 45deg; 
background: linear-gradient(var(--angle), oklab(81.8% 0.095 0.034), oklab(95.6% 0.003 0.049), oklab(88.1% -0.01 -0.057))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #fea9a9, #ffefcc, #c2d9ff)

Colors



<!-- Primary Colors -->
<color name="genesis_color_10">#fea9a9</color>
<color name="genesis_color_20">#ffefcc</color>
<color name="genesis_color_30">#c2d9ff</color>

Gradient PRO

Pro feature only

Get access to all app tokens, export files, and more.

PWA prompt