Citrus Bloom

#A2D19A

#C6E8BE

#F9F6E7

#F7C583

#E8944C

Actions

Explore the palette in different formats, and actions.

Colors overview

Green

White

Orange

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#a2d19a	rgb(162, 209, 154)	hsl(110 37% 71%)	oklab(81% -0.07 0.06)	oklch(81% 0.09 140)	color(display-p3 0.67 0.81 0.62)
	#c6e8be	rgb(198, 232, 190)	hsl(110 48% 83%)	oklab(90% -0.05 0.04)	oklch(90% 0.07 140)	color(display-p3 0.8 0.91 0.76)
	#f9f6e7	rgb(249, 246, 231)	hsl(50 60% 94%)	oklab(97% 0 0.02)	oklch(97% 0.02 98)	color(display-p3 0.97 0.97 0.91)
	#f7c583	rgb(247, 197, 131)	hsl(34 88% 74%)	oklab(85% 0.03 0.1)	oklch(85% 0.1 73)	color(display-p3 0.94 0.78 0.55)
	#e8944c	rgb(232, 148, 76)	hsl(28 77% 60%)	oklab(74% 0.07 0.11)	oklch(74% 0.13 59)	color(display-p3 0.86 0.6 0.35)

 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.

#A2D19A

AA - 1.73



#C6E8BE

AA - 1.33



#F9F6E7

AA - 1.08



#F7C583

AA - 1.58



#E8944C

AA - 2.39



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(81.3% -0.07 0.057), oklab(89.5% -0.051 0.043), oklab(97.1% -0.003 0.02), oklab(85.3% 0.029 0.097), oklab(73.9% 0.069 0.115))

Fallback colors



background: linear-gradient(45deg, #A2D19A, #C6E8BE, #F9F6E7, #F7C583, #E8944C)

Colors



<!-- Primary Colors -->
<color name="citrus_bloom_color_10">#A2D19A</color>
<color name="citrus_bloom_color_20">#C6E8BE</color>
<color name="citrus_bloom_color_30">#F9F6E7</color>
<color name="citrus_bloom_color_40">#F7C583</color>
<color name="citrus_bloom_color_50">#E8944C</color>

PWA prompt