Random

#f2f2f2

#00e05d

#ffdb4d

#bb68df

#db2f1f

Actions

Explore the palette in different formats, and actions.

Colors overview

Red

Green

Yellow

Purple

Grey

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#f2f2f2	rgb(242, 242, 242)	hsl(none 0% 95%)	oklab(96% 0 0)	oklch(96% 0 none)	color(display-p3 0.95 0.95 0.95)
	#00e05d	rgb(0, 224, 93)	hsl(140 100% 44%)	oklab(79% -0.19 0.12)	oklch(79% 0.23 150)	color(display-p3 0.4 0.87 0.43)
	#ffdb4d	rgb(255, 219, 77)	hsl(48 100% 65%)	oklab(90% -0.01 0.16)	oklch(90% 0.16 95)	color(display-p3 0.98 0.86 0.4)
	#bb68df	rgb(187, 104, 223)	hsl(280 65% 64%)	oklab(66% 0.13 -0.13)	oklch(66% 0.19 310)	color(display-p3 0.69 0.42 0.85)
	#db2f1f	rgb(219, 47, 31)	hsl(5.1 75% 49%)	oklab(58% 0.18 0.1)	oklch(58% 0.21 30)	color(display-p3 0.79 0.25 0.18)

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

#f2f2f2

AA - 1.11



#00e05d

AA - 1.77



#ffdb4d

AA - 1.35



#bb68df

AA - 3.4



#db2f1f

AA - 4.73



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(96.1% 0 0), oklab(79.1% -0.194 0.12), oklab(89.8% -0.013 0.158), oklab(65.9% 0.131 -0.133), oklab(58.1% 0.181 0.105))

Fallback colors



background: linear-gradient(45deg, #f2f2f2, #00e05d, #ffdb4d, #bb68df, #db2f1f)

Colors



<!-- Primary Colors -->
<color name="random_color_10">#f2f2f2</color>
<color name="random_color_20">#00e05d</color>
<color name="random_color_30">#ffdb4d</color>
<color name="random_color_40">#bb68df</color>
<color name="random_color_50">#db2f1f</color>

PWA prompt