Bird

#454545

#4b89db

#96caf5

#c4c4c4

#e8db2c

Actions

Explore the palette in different formats, and actions.

Colors overview

Blue

Yellow

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#454545	rgb(69, 69, 69)	hsl(none 0% 27%)	oklab(39% 0 0)	oklch(39% 0 none)	color(display-p3 0.27 0.27 0.27)
	#4b89db	rgb(75, 137, 219)	hsl(210 67% 58%)	oklab(63% -0.03 -0.14)	oklch(63% 0.14 260)	color(display-p3 0.35 0.53 0.83)
	#96caf5	rgb(150, 202, 245)	hsl(210 83% 77%)	oklab(82% -0.04 -0.07)	oklch(82% 0.08 240)	color(display-p3 0.63 0.79 0.94)
	#c4c4c4	rgb(196, 196, 196)	hsl(none 0% 77%)	oklab(82% 0 0)	oklch(82% 0 none)	color(display-p3 0.77 0.77 0.77)
	#e8db2c	rgb(232, 219, 44)	hsl(56 80% 54%)	oklab(87% -0.05 0.17)	oklch(87% 0.18 100)	color(display-p3 0.9 0.86 0.33)

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

#454545

AAA - 9.58



#4b89db

AA - 3.55



#96caf5

AA - 1.74



#c4c4c4

AA - 1.74



#e8db2c

AA - 1.43



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(39% 0 0), oklab(62.7% -0.034 -0.136), oklab(81.8% -0.036 -0.073), oklab(82% 0 0), oklab(87.5% -0.045 0.17))

Fallback colors



background: linear-gradient(45deg, #454545, #4b89db, #96caf5, #c4c4c4, #e8db2c)

Colors



<!-- Primary Colors -->
<color name="bird_color_10">#454545</color>
<color name="bird_color_20">#4b89db</color>
<color name="bird_color_30">#96caf5</color>
<color name="bird_color_40">#c4c4c4</color>
<color name="bird_color_50">#e8db2c</color>

PWA prompt