Pixel

#478CF0

#34A550

#FCA617

#F1F8F3

#F23C38

Actions

Explore the palette in different formats, and actions.

Colors overview

Blue

Red

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#478cf0	rgb(71, 140, 240)	hsl(220 85% 61%)	oklab(64% -0.03 -0.16)	oklch(64% 0.17 260)	color(display-p3 0.35 0.54 0.91)
	#34a550	rgb(52, 165, 80)	hsl(130 52% 43%)	oklab(64% -0.13 0.08)	oklch(64% 0.16 150)	color(display-p3 0.34 0.64 0.35)
	#fca617	rgb(252, 166, 23)	hsl(37 97% 54%)	oklab(79% 0.05 0.16)	oklch(79% 0.17 71)	color(display-p3 0.94 0.67 0.25)
	#f1f8f3	rgb(241, 248, 243)	hsl(140 33% 96%)	oklab(97% -0.01 0)	oklch(97% 0.01 160)	color(display-p3 0.95 0.97 0.95)
	#f23c38	rgb(242, 60, 56)	hsl(1.3 88% 58%)	oklab(63% 0.19 0.1)	oklch(63% 0.22 27)	color(display-p3 0.87 0.3 0.26)

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

#478CF0

AA - 3.34



#34A550

AA - 3.16



#FCA617

AA - 1.98



#F1F8F3

AA - 1.07



#F23C38

AA - 3.83



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(64.4% -0.035 -0.162), oklab(63.9% -0.135 0.084), oklab(79.1% 0.053 0.157), oklab(97.2% -0.009 0.004), oklab(63.3% 0.195 0.099))

Fallback colors



background: linear-gradient(45deg, #478CF0, #34A550, #FCA617, #F1F8F3, #F23C38)

Colors



<!-- Primary Colors -->
<color name="pixel_color_10">#478CF0</color>
<color name="pixel_color_20">#34A550</color>
<color name="pixel_color_30">#FCA617</color>
<color name="pixel_color_40">#F1F8F3</color>
<color name="pixel_color_50">#F23C38</color>

PWA prompt