#383838

#7a7a7a

#cccccc

#ffff7f

#a6cf3e

Citron

#383838

#7a7a7a

#cccccc

#ffff7f

#a6cf3e



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

Green

Grey

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#383838	rgb(56, 56, 56)	hsl(none 0% 22%)	hwb(none 22% 78%)	lch(23.5 0 none)	lab(23.5 0 0)	cmyk 0%, 0%, 0%, 78%
	#7a7a7a	rgb(122, 122, 122)	hsl(none 0% 48%)	hwb(none 48% 52%)	lch(51.2 0 none)	lab(51.2 0 0)	cmyk 0%, 0%, 0%, 52%
	#cccccc	rgb(204, 204, 204)	hsl(none 0% 80%)	hwb(none 80% 20%)	lch(82 0 none)	lab(82 0 0)	cmyk 0%, 0%, 0%, 20%
	#ffff7f	rgb(255, 255, 127)	hsl(60 100% 75%)	hwb(60 50% 0%)	lch(98.1 61.4 101)	lab(98.1 -12.2 60.2)	cmyk 0%, 0%, 50%, 0%
	#a6cf3e	rgb(166, 207, 62)	hsl(77 60% 53%)	hwb(77 24% 19%)	lch(78.2 69.6 115)	lab(78.2 -28.9 63.3)	cmyk 20%, 0%, 70%, 19%

 Click a color format to copy 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