Trick

#871e01

#fd7e00

#fff5cf

#86dfca

#006e7d

Actions

Explore the palette in different formats, and actions.

Colors overview

Orange

Cyan

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#871e01	rgb(135, 30, 1)	hsl(13 99% 27%)	oklab(41% 0.12 0.08)	oklch(41% 0.14 35)	color(display-p3 0.49 0.15 0.06)
	#fd7e00	rgb(253, 126, 0)	hsl(30 100% 50%)	oklab(73% 0.11 0.15)	oklch(73% 0.19 53)	color(display-p3 0.93 0.52 0.2)
	#fff5cf	rgb(255, 245, 207)	hsl(48 100% 91%)	oklab(97% 0 0.05)	oklch(97% 0.05 95)	color(display-p3 0.99 0.96 0.83)
	#86dfca	rgb(134, 223, 202)	hsl(170 58% 70%)	oklab(84% -0.09 0)	oklch(84% 0.09 180)	color(display-p3 0.61 0.87 0.79)
	#006e7d	rgb(0, 110, 125)	hsl(190 100% 25%)	oklab(49% -0.07 -0.04)	oklch(49% 0.09 210)	color(display-p3 0.18 0.42 0.48)

 Click on a color value to copy it 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