Violin

#402D25

#674127

#8A4B08

#D0C0B7

#AB9289

Actions

Explore the palette in different formats, and actions.

Colors overview

Brown

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#402d25	rgb(64, 45, 37)	hsl(18 27% 20%)	oklab(32% 0.02 0.02)	oklch(32% 0.03 44)	color(display-p3 0.24 0.18 0.15)
	#674127	rgb(103, 65, 39)	hsl(24 45% 28%)	oklab(41% 0.04 0.05)	oklch(41% 0.07 54)	color(display-p3 0.38 0.26 0.17)
	#8a4b08	rgb(138, 75, 8)	hsl(31 89% 29%)	oklab(48% 0.06 0.09)	oklch(48% 0.11 59)	color(display-p3 0.51 0.31 0.11)
	#d0c0b7	rgb(208, 192, 183)	hsl(22 21% 77%)	oklab(82% 0.01 0.02)	oklch(82% 0.02 51)	color(display-p3 0.81 0.76 0.72)
	#ab9289	rgb(171, 146, 137)	hsl(16 17% 60%)	oklab(68% 0.02 0.02)	oklch(68% 0.03 41)	color(display-p3 0.65 0.58 0.54)

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

#402D25

AAA - 12.96



#674127

AAA - 8.89



#8A4B08

AA - 6.79



#D0C0B7

AA - 1.76



#AB9289

AA - 2.91



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(31.7% 0.023 0.022), oklab(41.3% 0.038 0.053), oklab(47.9% 0.058 0.094), oklab(81.9% 0.014 0.017), oklab(68% 0.025 0.022))

Fallback colors



background: linear-gradient(45deg, #402D25, #674127, #8A4B08, #D0C0B7, #AB9289)

Colors



<!-- Primary Colors -->
<color name="violin_color_10">#402D25</color>
<color name="violin_color_20">#674127</color>
<color name="violin_color_30">#8A4B08</color>
<color name="violin_color_40">#D0C0B7</color>
<color name="violin_color_50">#AB9289</color>

PWA prompt