#e05a8b

#e06c5a

#e0af5a

Orange



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

Orange

Red

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#e05a8b	rgb(224, 90, 139)	hsl(340 68% 62%)	hwb(340 35% 12%)	lch(57.5 56.3 1.15)	lab(57.5 56.3 1.13)	cmyk 0%, 60%, 38%, 12%
	#e06c5a	rgb(224, 108, 90)	hsl(8.1 68% 62%)	hwb(8.1 35% 12%)	lch(59.8 55.6 35.7)	lab(59.8 45.2 32.5)	cmyk 0%, 52%, 60%, 12%
	#e0af5a	rgb(224, 175, 90)	hsl(38 68% 62%)	hwb(38 35% 12%)	lch(74.8 51.2 76.9)	lab(74.8 11.7 49.9)	cmyk 0%, 22%, 60%, 12%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#e05a8b

AA - 3.49



#e06c5a

AA - 3.24



#e0af5a

AA - 2



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(65.3% 0.173 0.001), oklab(66.5% 0.128 0.075), oklab(78.2% 0.022 0.116))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #e05a8b, #e06c5a, #e0af5a)

Colors



<!-- Primary Colors -->
<color name="orange_color_10">#e05a8b</color>
<color name="orange_color_20">#e06c5a</color>
<color name="orange_color_30">#e0af5a</color>

Gradient PRO

Pro feature only

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

PWA prompt