Citric

#d4c00b

#faf3b4

#fa7f5a

#b03b17

#5e1701

Actions

Explore the palette in different formats, and actions.

Colors overview

Yellow

Orange

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#d4c00b	rgb(212, 192, 11)	hsl(54 90% 44%)	oklab(80% -0.03 0.16)	oklch(80% 0.17 100)	color(display-p3 0.82 0.76 0.25)
	#faf3b4	rgb(250, 243, 180)	hsl(54 87% 84%)	oklab(95% -0.02 0.08)	oklch(95% 0.08 100)	color(display-p3 0.98 0.95 0.73)
	#fa7f5a	rgb(250, 127, 90)	hsl(14 94% 67%)	oklab(73% 0.13 0.1)	oklch(73% 0.16 37)	color(display-p3 0.92 0.52 0.39)
	#b03b17	rgb(176, 59, 23)	hsl(14 77% 39%)	oklab(52% 0.13 0.09)	oklch(52% 0.16 37)	color(display-p3 0.64 0.26 0.14)
	#5e1701	rgb(94, 23, 1)	hsl(14 98% 19%)	oklab(32% 0.09 0.06)	oklch(32% 0.11 37)	color(display-p3 0.34 0.11 0.04)

 Click on a color value to copy it 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