#f8b30f

#d49400

#e68a00

#b86e00

Altar

Actions

Explore the gradient in different formats, and actions.

Colors overview

Orange

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#f8b30f	rgb(248, 179, 15)	hsl(42 94% 52%)	hwb(42 5.9% 2.7%)	lch(78 80.5 77.3)	lab(78 17.7 78.5)	cmyk 0%, 28%, 94%, 3%
	#d49400	rgb(212, 148, 0)	hsl(42 100% 42%)	hwb(42 0% 17%)	lch(66.4 72.7 75.7)	lab(66.4 18 70.5)	cmyk 0%, 30%, 100%, 17%
	#e68a00	rgb(230, 138, 0)	hsl(36 100% 45%)	hwb(36 0% 9.8%)	lch(66.4 78.1 66.9)	lab(66.4 30.7 71.8)	cmyk 0%, 40%, 100%, 10%
	#b86e00	rgb(184, 110, 0)	hsl(36 100% 36%)	hwb(36 0% 28%)	lch(53.9 66 67.2)	lab(53.9 25.6 60.9)	cmyk 0%, 40%, 100%, 28%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#f8b30f

AA - 1.83



#d49400

AA - 2.61



#e68a00

AA - 2.62



#b86e00

AA - 3.98



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(81% 0.028 0.163), oklab(71.1% 0.031 0.145), oklab(71.5% 0.068 0.145), oklab(60.6% 0.057 0.123))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #f8b30f, #d49400, #e68a00, #b86e00)

Colors



<!-- Primary Colors -->
<color name="altar_color_10">#f8b30f</color>
<color name="altar_color_20">#d49400</color>
<color name="altar_color_30">#e68a00</color>
<color name="altar_color_40">#b86e00</color>

Gradient PRO

Pro feature only

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

PWA prompt