October

Actions

Explore the gradient in different formats, and actions.

Colors overview

Red

Orange

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#a73d1b	rgb(167, 61, 27)	hsl(15 72% 38%)	hwb(15 11% 35%)	lch(41.2 61 44.9)	lab(41.2 43.3 43.1)	cmyk 0%, 63%, 84%, 35%
	#872d0f	rgb(135, 45, 15)	hsl(15 80% 29%)	hwb(15 5.9% 47%)	lch(32.5 54.3 45.4)	lab(32.5 38.2 38.7)	cmyk 0%, 67%, 89%, 47%
	#611c05	rgb(97, 28, 5)	hsl(15 90% 20%)	hwb(15 2% 62%)	lch(21.9 43.5 44.6)	lab(21.9 31 30.5)	cmyk 0%, 71%, 95%, 62%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#A73D1B

AA - 6.31



#872d0f

AAA - 8.7



#611c05

AAA - 12.52



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(50.4% 0.117 0.089), oklab(42.7% 0.103 0.079), oklab(33.5% 0.083 0.063))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #A73D1B, #872d0f, #611c05)

Colors



<!-- Primary Colors -->
<color name="october_color_10">#A73D1B</color>
<color name="october_color_20">#872d0f</color>
<color name="october_color_30">#611c05</color>

Gradient PRO

Pro feature only

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

PWA prompt