Dragon Breath

Actions

Explore the gradient in different formats, and actions.

Colors overview

Red

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#800000	rgb(128, 0, 0)	hsl(0 100% 25%)	hwb(0 0% 50%)	lch(26.2 62.5 39.1)	lab(26.2 48.5 39.4)	cmyk 0%, 100%, 100%, 50%
	#dc143c	rgb(220, 20, 60)	hsl(350 83% 47%)	hwb(350 7.8% 14%)	lch(47.9 79.6 26.5)	lab(47.9 71.3 35.5)	cmyk 0%, 91%, 73%, 14%
	#eb4667	rgb(235, 70, 103)	hsl(350 80% 60%)	hwb(350 27% 7.8%)	lch(55.8 68.2 17.3)	lab(55.8 65.1 20.3)	cmyk 0%, 70%, 56%, 8%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#800000

AAA - 10.94



#dc143c

AA - 4.98



#eb4667

AA - 3.74



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(37.7% 0.135 0.075), oklab(57.1% 0.208 0.076), oklab(63.8% 0.195 0.047))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #800000, #dc143c, #eb4667)

Colors



<!-- Primary Colors -->
<color name="dragon_breath_color_10">#800000</color>
<color name="dragon_breath_color_20">#dc143c</color>
<color name="dragon_breath_color_30">#eb4667</color>

Gradient PRO

Pro feature only

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

PWA prompt