Social

#c08500

#e09600

#ffa800

#32ad47

#3cc14e

Actions

Explore the palette in different formats, and actions.

Colors overview

Yellow

Green

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#c08500	rgb(192, 133, 0)	hsl(42 100% 38%)	oklab(66% 0.03 0.13)	oklch(66% 0.14 77)	color(display-p3 0.72 0.53 0.18)
	#e09600	rgb(224, 150, 0)	hsl(40 100% 44%)	oklab(73% 0.04 0.15)	oklch(73% 0.15 74)	color(display-p3 0.84 0.6 0.21)
	#ffa800	rgb(255, 168, 0)	hsl(40 100% 50%)	oklab(80% 0.05 0.16)	oklch(80% 0.17 72)	color(display-p3 0.95 0.67 0.24)
	#32ad47	rgb(50, 173, 71)	hsl(130 55% 44%)	oklab(66% -0.15 0.1)	oklch(66% 0.18 150)	color(display-p3 0.35 0.67 0.33)
	#3cc14e	rgb(60, 193, 78)	hsl(130 53% 50%)	oklab(72% -0.16 0.11)	oklch(72% 0.19 150)	color(display-p3 0.4 0.75 0.36)

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

#c08500

AA - 3.18



#e09600

AA - 2.46



#ffa800

AA - 1.93



#32ad47

AA - 2.91



#3cc14e

AA - 2.35



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(65.9% 0.03 0.134), oklab(72.9% 0.043 0.149), oklab(79.8% 0.052 0.163), oklab(65.9% -0.147 0.1), oklab(71.5% -0.159 0.11))

Fallback colors



background: linear-gradient(45deg, #c08500, #e09600, #ffa800, #32ad47, #3cc14e)

Colors



<!-- Primary Colors -->
<color name="social_color_10">#c08500</color>
<color name="social_color_20">#e09600</color>
<color name="social_color_30">#ffa800</color>
<color name="social_color_40">#32ad47</color>
<color name="social_color_50">#3cc14e</color>

PWA prompt