Play

#F39C19

#ffba52

#ffd494

#9effc6

#39dbad

Actions

Explore the palette in different formats, and actions.

Colors overview

Orange

Cyan

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#f39c19	rgb(243, 156, 25)	hsl(36 90% 53%)	oklab(76% 0.06 0.15)	oklch(76% 0.16 69)	color(display-p3 0.9 0.63 0.24)
	#ffba52	rgb(255, 186, 82)	hsl(36 100% 66%)	oklab(83% 0.04 0.14)	oklch(83% 0.14 75)	color(display-p3 0.96 0.74 0.4)
	#ffd494	rgb(255, 212, 148)	hsl(36 100% 79%)	oklab(89% 0.02 0.09)	oklch(89% 0.09 77)	color(display-p3 0.97 0.84 0.61)
	#9effc6	rgb(158, 255, 198)	hsl(140 100% 81%)	oklab(92% -0.11 0.05)	oklch(92% 0.12 160)	color(display-p3 0.71 0.99 0.79)
	#39dbad	rgb(57, 219, 173)	hsl(160 69% 54%)	oklab(80% -0.14 0.03)	oklch(80% 0.15 170)	color(display-p3 0.44 0.85 0.69)

 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.

#F39C19

AA - 2.19



#ffba52

AA - 1.69



#ffd494

AA - 1.39



#9effc6

AA - 1.19



#39dbad

AA - 1.76



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(76.3% 0.058 0.15), oklab(83.5% 0.038 0.137), oklab(89.3% 0.021 0.092), oklab(92.5% -0.112 0.047), oklab(79.9% -0.144 0.028))

Fallback colors



background: linear-gradient(45deg, #F39C19, #ffba52, #ffd494, #9effc6, #39dbad)

Colors



<!-- Primary Colors -->
<color name="play_color_10">#F39C19</color>
<color name="play_color_20">#ffba52</color>
<color name="play_color_30">#ffd494</color>
<color name="play_color_40">#9effc6</color>
<color name="play_color_50">#39dbad</color>

PWA prompt