Energetic

#E6344A

#FF6D00

#FFAB00

#fae3b6



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

Red

Orange

Yellow

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#e6344a	rgb(230, 52, 74)	hsl(350 78% 55%)	hwb(350 20% 9.8%)	lch(52.4 75.5 25.9)	lab(52.4 68 32.9)	cmyk 0%, 77%, 68%, 10%
	#ff6d00	rgb(255, 109, 0)	hsl(26 100% 50%)	hwb(26 0% 0%)	lch(64.3 91 53.5)	lab(64.3 54.1 73.2)	cmyk 0%, 57%, 100%, 0%
	#ffab00	rgb(255, 171, 0)	hsl(40 100% 50%)	hwb(40 0% 0%)	lch(76.9 83.6 72.9)	lab(76.9 24.5 79.9)	cmyk 0%, 33%, 100%, 0%
	#fae3b6	rgb(250, 227, 182)	hsl(40 87% 85%)	hwb(40 71% 2%)	lch(91.3 25.3 82.6)	lab(91.3 3.25 25.1)	cmyk 0%, 9%, 27%, 2%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#E6344A

AA - 4.23



#FF6D00

AA - 2.82



#FFAB00

AA - 1.89



#fae3b6

AA - 1.25



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(60.9% 0.199 0.073), oklab(70.5% 0.139 0.143), oklab(80.3% 0.048 0.164), oklab(92.4% 0.007 0.063))

Fallback colors



background: linear-gradient(45deg, #E6344A, #FF6D00, #FFAB00, #fae3b6)

Colors



<!-- Primary Colors -->
<color name="energetic_color_10">#E6344A</color>
<color name="energetic_color_20">#FF6D00</color>
<color name="energetic_color_30">#FFAB00</color>
<color name="energetic_color_40">#fae3b6</color>

PWA prompt