Vivid

#EF476F

#FFD166

#06D6A0

#118AB2

#073B4C

Actions

Explore the palette in different formats, and actions.

Colors overview

Red

Yellow

Green

Blue

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#ef476f	rgb(239, 71, 111)	hsl(350 84% 61%)	oklab(65% 0.2 0.04)	oklch(65% 0.2 11)	color(display-p3 0.87 0.33 0.44)
	#ffd166	rgb(255, 209, 102)	hsl(42 100% 70%)	oklab(88% 0.01 0.13)	oklch(88% 0.13 86)	color(display-p3 0.97 0.83 0.47)
	#06d6a0	rgb(6, 214, 160)	hsl(160 95% 43%)	oklab(78% -0.16 0.04)	oklch(78% 0.16 170)	color(display-p3 0.38 0.83 0.64)
	#118ab2	rgb(17, 138, 178)	hsl(190 83% 38%)	oklab(59% -0.07 -0.08)	oklch(59% 0.11 230)	color(display-p3 0.25 0.53 0.68)
	#073b4c	rgb(7, 59, 76)	hsl(190 83% 16%)	oklab(33% -0.04 -0.04)	oklch(33% 0.06 230)	color(display-p3 0.1 0.23 0.29)

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

#EF476F

AA - 3.62



#FFD166

AA - 1.44



#06D6A0

AA - 1.88



#118AB2

AA - 3.96



#073B4C

AAA - 12.07



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.8% 0.2 0.039), oklab(88% 0.009 0.134), oklab(77.7% -0.155 0.037), oklab(59.2% -0.075 -0.083), oklab(32.9% -0.041 -0.042))

Fallback colors



background: linear-gradient(45deg, #EF476F, #FFD166, #06D6A0, #118AB2, #073B4C)

Colors



<!-- Primary Colors -->
<color name="vivid_color_10">#EF476F</color>
<color name="vivid_color_20">#FFD166</color>
<color name="vivid_color_30">#06D6A0</color>
<color name="vivid_color_40">#118AB2</color>
<color name="vivid_color_50">#073B4C</color>

PWA prompt