#ff462e

#ff2e40

#ff2e6a

Crimson



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

Pink

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#ff462e	rgb(255, 70, 46)	hsl(6.9 100% 59%)	hwb(6.9 18% 0%)	lch(58.8 89.4 39.1)	lab(58.8 69.3 56.4)	cmyk 0%, 73%, 82%, 0%
	#ff2e40	rgb(255, 46, 64)	hsl(350 100% 59%)	hwb(350 18% 0%)	lch(56.6 88.3 30.6)	lab(56.6 76 45)	cmyk 0%, 82%, 75%, 0%
	#ff2e6a	rgb(255, 46, 106)	hsl(340 100% 59%)	hwb(340 18% 0%)	lch(57.2 80.2 15.3)	lab(57.2 77.4 21.1)	cmyk 0%, 82%, 58%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#ff462e

AA - 3.4



#ff2e40

AA - 3.67



#ff2e6a

AA - 3.58



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(66.3% 0.193 0.115), oklab(64.7% 0.219 0.095), oklab(65.4% 0.234 0.048))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #ff462e, #ff2e40, #ff2e6a)

Colors



<!-- Primary Colors -->
<color name="crimson_color_10">#ff462e</color>
<color name="crimson_color_20">#ff2e40</color>
<color name="crimson_color_30">#ff2e6a</color>

Gradient PRO

Pro feature only

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

PWA prompt