#d4c00b

#faf3b4

#fa7f5a

#b03b17

#5e1701

Citric

#d4c00b

#faf3b4

#fa7f5a

#b03b17

#5e1701



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



Quick view

Inspect colors in multiple color spaces

Colors overview

Yellow

Orange

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#d4c00b	rgb(212, 192, 11)	hsl(54 90% 44%)	hwb(54 4.3% 17%)	lch(77.6 76.7 93.1)	lab(77.6 -4.09 76.6)	cmyk 0%, 9%, 95%, 17%
	#faf3b4	rgb(250, 243, 180)	hsl(54 87% 84%)	hwb(54 71% 2%)	lch(95.3 31.7 98.2)	lab(95.3 -4.55 31.4)	cmyk 0%, 3%, 28%, 2%
	#fa7f5a	rgb(250, 127, 90)	hsl(14 94% 67%)	hwb(14 35% 2%)	lch(67.4 62.6 42.8)	lab(67.4 45.9 42.5)	cmyk 0%, 49%, 64%, 2%
	#b03b17	rgb(176, 59, 23)	hsl(14 77% 39%)	hwb(14 9% 31%)	lch(42.5 66.5 44.7)	lab(42.5 47.3 46.7)	cmyk 0%, 66%, 87%, 31%
	#5e1701	rgb(94, 23, 1)	hsl(14 98% 19%)	hwb(14 0.39% 63%)	lch(20.5 44 43.6)	lab(20.5 31.9 30.4)	cmyk 0%, 76%, 99%, 63%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#d4c00b

AA - 1.85



#faf3b4

AA - 1.13



#fa7f5a

AA - 2.54



#b03b17

AA - 6.02



#5e1701

AAA - 13.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.

HDR color space

HDR oklab colors



background: linear-gradient(45deg, oklab(80% -0.034 0.162), oklab(95.5% -0.017 0.079), oklab(73% 0.126 0.097), oklab(51.6% 0.128 0.095), oklab(32.2% 0.086 0.064))

Fallback colors



background: linear-gradient(45deg, #d4c00b, #faf3b4, #fa7f5a, #b03b17, #5e1701)

Colors



<!-- Primary Colors -->
<color name="citric_color_10">#d4c00b</color>
<color name="citric_color_20">#faf3b4</color>
<color name="citric_color_30">#fa7f5a</color>
<color name="citric_color_40">#b03b17</color>
<color name="citric_color_50">#5e1701</color>

PWA prompt