#fffdeb

#fffacf

#fff8b5

#fff48c

Primroses



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

Yellow

White

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#fffdeb	rgb(255, 253, 235)	hsl(54 100% 96%)	hwb(54 92% 0%)	lch(99.1 9.03 100)	lab(99.1 -1.56 8.89)	cmyk 0%, 1%, 8%, 0%
	#fffacf	rgb(255, 250, 207)	hsl(54 100% 91%)	hwb(54 81% 0%)	lch(97.9 21.6 98.8)	lab(97.9 -3.31 21.4)	cmyk 0%, 2%, 19%, 0%
	#fff8b5	rgb(255, 248, 181)	hsl(54 100% 85%)	hwb(54 71% 0%)	lch(97 33.6 98.4)	lab(97 -4.93 33.2)	cmyk 0%, 3%, 29%, 0%
	#fff48c	rgb(255, 244, 140)	hsl(54 100% 77%)	hwb(54 55% 0%)	lch(95.5 51.6 97)	lab(95.5 -6.31 51.2)	cmyk 0%, 4%, 45%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#fffdeb

AA - 1.02



#fffacf

AA - 1.05



#fff8b5

AA - 1.08



#fff48c

AA - 1.13



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(99.1% -0.005 0.023), oklab(97.8% -0.011 0.055), oklab(96.9% -0.019 0.083), oklab(95.4% -0.029 0.123))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #fffdeb, #fffacf, #fff8b5, #fff48c)

Colors



<!-- Primary Colors -->
<color name="primroses_color_10">#fffdeb</color>
<color name="primroses_color_20">#fffacf</color>
<color name="primroses_color_30">#fff8b5</color>
<color name="primroses_color_40">#fff48c</color>

Gradient PRO

Pro feature only

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

PWA prompt