#478CF0

#34A550

#FCA617

#F1F8F3

#F23C38

Pixel

#478CF0

#34A550

#FCA617

#F1F8F3

#F23C38



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



Quick view

Inspect colors in multiple color spaces

Colors overview

Blue

Red

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#478cf0	rgb(71, 140, 240)	hsl(220 85% 61%)	hwb(220 28% 5.9%)	lch(57.5 57.9 273)	lab(57.5 3.15 -57.8)	cmyk 70%, 42%, 0%, 6%
	#34a550	rgb(52, 165, 80)	hsl(130 52% 43%)	hwb(130 20% 35%)	lch(60.1 58 144)	lab(60.1 -46.9 34.1)	cmyk 68%, 0%, 52%, 35%
	#fca617	rgb(252, 166, 23)	hsl(37 97% 54%)	hwb(37 9% 1.2%)	lch(75.5 80.1 71.1)	lab(75.5 25.9 75.8)	cmyk 0%, 34%, 91%, 1%
	#f1f8f3	rgb(241, 248, 243)	hsl(140 33% 96%)	hwb(140 95% 2.7%)	lch(96.9 3.43 153)	lab(96.9 -3.06 1.56)	cmyk 3%, 0%, 2%, 3%
	#f23c38	rgb(242, 60, 56)	hsl(1.3 88% 58%)	hwb(1.3 22% 5.1%)	lch(55.3 83.3 34.5)	lab(55.3 68.7 47.1)	cmyk 0%, 75%, 77%, 5%

 Click a color format to copy 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