Velvet

#B0224C

#C72C48

#E25855

#F28482

#F9C2C0

Actions

Explore the palette in different formats, and actions.

Colors overview

Red

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#b0224c	rgb(176, 34, 76)	hsl(340 68% 41%)	oklab(50% 0.17 0.03)	oklch(50% 0.18 9.9)	color(display-p3 0.63 0.19 0.3)
	#c72c48	rgb(199, 44, 72)	hsl(350 64% 48%)	oklab(55% 0.18 0.05)	oklch(55% 0.19 17)	color(display-p3 0.72 0.23 0.29)
	#e25855	rgb(226, 88, 85)	hsl(1.3 71% 61%)	oklab(64% 0.16 0.07)	oklch(64% 0.17 25)	color(display-p3 0.82 0.38 0.35)
	#f28482	rgb(242, 132, 130)	hsl(1.1 81% 73%)	oklab(73% 0.13 0.05)	oklch(73% 0.14 22)	color(display-p3 0.89 0.54 0.52)
	#f9c2c0	rgb(249, 194, 192)	hsl(2.1 83% 86%)	oklab(86% 0.06 0.02)	oklch(86% 0.06 21)	color(display-p3 0.94 0.77 0.76)

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

#B0224C

AA - 6.6



#C72C48

AA - 5.4



#E25855

AA - 3.64



#F28482

AA - 2.5



#F9C2C0

AA - 1.55



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(50% 0.174 0.031), oklab(54.8% 0.182 0.054), oklab(64% 0.157 0.072), oklab(73.4% 0.125 0.051), oklab(86.2% 0.059 0.023))

Fallback colors



background: linear-gradient(45deg, #B0224C, #C72C48, #E25855, #F28482, #F9C2C0)

Colors



<!-- Primary Colors -->
<color name="velvet_color_10">#B0224C</color>
<color name="velvet_color_20">#C72C48</color>
<color name="velvet_color_30">#E25855</color>
<color name="velvet_color_40">#F28482</color>
<color name="velvet_color_50">#F9C2C0</color>

PWA prompt