#871e01

#fd7e00

#fff5cf

#86dfca

#006e7d

Trick

#871e01

#fd7e00

#fff5cf

#86dfca

#006e7d



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

Orange

Cyan

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#871e01	rgb(135, 30, 1)	hsl(13 99% 27%)	hwb(13 0.39% 47%)	lch(30.2 61.3 44.4)	lab(30.2 43.8 42.9)	cmyk 0%, 78%, 99%, 47%
	#fd7e00	rgb(253, 126, 0)	hsl(30 100% 50%)	hwb(30 0% 0.78%)	lch(67.1 87.2 58.4)	lab(67.1 45.7 74.3)	cmyk 0%, 50%, 100%, 1%
	#fff5cf	rgb(255, 245, 207)	hsl(48 100% 91%)	hwb(48 81% 0%)	lch(96.6 19.7 92.8)	lab(96.6 -0.959 19.6)	cmyk 0%, 4%, 19%, 0%
	#86dfca	rgb(134, 223, 202)	hsl(170 58% 70%)	hwb(170 53% 13%)	lch(82.8 31.7 177)	lab(82.8 -31.6 1.47)	cmyk 40%, 0%, 9%, 13%
	#006e7d	rgb(0, 110, 125)	hsl(190 100% 25%)	hwb(190 0% 51%)	lch(41.9 28.4 215)	lab(41.9 -23.2 -16.4)	cmyk 100%, 12%, 0%, 51%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#871e01

AAA - 9.47



#fd7e00

AA - 2.57



#fff5cf

AA - 1.09



#86dfca

AA - 1.56



#006e7d

AA - 5.95



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(41% 0.119 0.082), oklab(72.6% 0.113 0.147), oklab(96.8% -0.004 0.05), oklab(84.2% -0.091 0.005), oklab(49.4% -0.073 -0.044))

Fallback colors



background: linear-gradient(45deg, #871e01, #fd7e00, #fff5cf, #86dfca, #006e7d)

Colors



<!-- Primary Colors -->
<color name="trick_color_10">#871e01</color>
<color name="trick_color_20">#fd7e00</color>
<color name="trick_color_30">#fff5cf</color>
<color name="trick_color_40">#86dfca</color>
<color name="trick_color_50">#006e7d</color>

PWA prompt