#FF5233

#D6402E

#B73527

#7F1F1B

Lava



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



HDR gradient

Switch to HDR to enhance the gradient



Quick view

Inspect colors in multiple color spaces

Colors overview

Red

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#ff5233	rgb(255, 82, 51)	hsl(9.1 100% 60%)	hwb(9.1 20% 0%)	lch(60.3 85.7 40.3)	lab(60.3 65.4 55.3)	cmyk 0%, 68%, 80%, 0%
	#d6402e	rgb(214, 64, 46)	hsl(6.4 67% 51%)	hwb(6.4 18% 16%)	lch(50.5 74.2 37.9)	lab(50.5 58.6 45.6)	cmyk 0%, 70%, 79%, 16%
	#b73527	rgb(183, 53, 39)	hsl(5.8 65% 44%)	hwb(5.8 15% 28%)	lch(43.1 65.8 37.3)	lab(43.1 52.3 39.9)	cmyk 0%, 71%, 79%, 28%
	#7f1f1b	rgb(127, 31, 27)	hsl(2.4 65% 30%)	hwb(2.4 11% 50%)	lch(28.8 50 34.5)	lab(28.8 41.2 28.3)	cmyk 0%, 76%, 79%, 50%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#FF5233

AA - 3.22



#D6402E

AA - 4.53



#B73527

AA - 5.91



#7F1F1B

AAA - 9.93



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.



32°

CPU



48°

GPU



100%

Usage



11°

Rain



70%

Storage

HDR color space

HDR oklab colors



--angle: 45deg; 
background: linear-gradient(var(--angle), oklab(67.5% 0.181 0.115), oklab(58.8% 0.164 0.096), oklab(52.3% 0.146 0.084), oklab(39.8% 0.117 0.06))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #FF5233, #D6402E, #B73527, #7F1F1B)

Colors



<!-- Primary Colors -->
<color name="lava_color_10">#FF5233</color>
<color name="lava_color_20">#D6402E</color>
<color name="lava_color_30">#B73527</color>
<color name="lava_color_40">#7F1F1B</color>

Gradient PRO

Pro feature only

Get access to all app tokens, export files, and more.

PWA prompt