Citron

#383838

#7a7a7a

#cccccc

#ffff7f

#a6cf3e

Actions

Explore the palette in different formats, and actions.

Colors overview

Green

Grey

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#383838	rgb(56, 56, 56)	hsl(none 0% 22%)	oklab(34% 0 0)	oklch(34% 0 none)	color(display-p3 0.22 0.22 0.22)
	#7a7a7a	rgb(122, 122, 122)	hsl(none 0% 48%)	oklab(58% 0 0)	oklch(58% 0 none)	color(display-p3 0.48 0.48 0.48)
	#cccccc	rgb(204, 204, 204)	hsl(none 0% 80%)	oklab(85% 0 0)	oklch(85% 0 none)	color(display-p3 0.8 0.8 0.8)
	#ffff7f	rgb(255, 255, 127)	hsl(60 100% 75%)	oklab(97% -0.05 0.14)	oklch(97% 0.15 110)	color(display-p3 1 1 0.57)
	#a6cf3e	rgb(166, 207, 62)	hsl(77 60% 53%)	oklab(80% -0.1 0.14)	oklch(80% 0.17 120)	color(display-p3 0.68 0.81 0.34)

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

#383838

AAA - 11.72



#7a7a7a

AA - 4.29



#cccccc

AA - 1.6



#ffff7f

AA - 1.05



#a6cf3e

AA - 1.8



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(34.1% 0 0), oklab(58% 0 0), oklab(84.5% 0 0), oklab(97.5% -0.049 0.142), oklab(79.8% -0.097 0.144))

Fallback colors



background: linear-gradient(45deg, #383838, #7a7a7a, #cccccc, #ffff7f, #a6cf3e)

Colors



<!-- Primary Colors -->
<color name="citron_color_10">#383838</color>
<color name="citron_color_20">#7a7a7a</color>
<color name="citron_color_30">#cccccc</color>
<color name="citron_color_40">#ffff7f</color>
<color name="citron_color_50">#a6cf3e</color>

PWA prompt