Sad Vibe

#232b2b

#485460

#6b705c

#928e7f

#bdbdbd

Actions

Explore the palette in different formats, and actions.

Colors overview

Green

Grey

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#232b2b	rgb(35, 43, 43)	hsl(180 10% 15%)	oklab(28% -0.01 0)	oklch(28% 0.01 200)	color(display-p3 0.14 0.17 0.17)
	#485460	rgb(72, 84, 96)	hsl(210 14% 33%)	oklab(44% -0.01 -0.02)	oklch(44% 0.02 250)	color(display-p3 0.29 0.33 0.37)
	#6b705c	rgb(107, 112, 92)	hsl(75 9.8% 40%)	oklab(53% -0.01 0.03)	oklch(53% 0.03 120)	color(display-p3 0.42 0.44 0.37)
	#928e7f	rgb(146, 142, 127)	hsl(47 8% 54%)	oklab(65% 0 0.02)	oklch(65% 0.02 95)	color(display-p3 0.57 0.56 0.5)
	#bdbdbd	rgb(189, 189, 189)	hsl(none 0% 74%)	oklab(80% 0 0)	oklch(80% 0 none)	color(display-p3 0.74 0.74 0.74)

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

#232b2b

AAA - 14.46



#485460

AAA - 7.74



#6b705c

AA - 5.12



#928e7f

AA - 3.28



#bdbdbd

AA - 1.87



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(28.1% -0.011 -0.003), oklab(44% -0.009 -0.023), oklab(53.5% -0.015 0.027), oklab(64.6% -0.002 0.022), oklab(79.8% 0 0))

Fallback colors



background: linear-gradient(45deg, #232b2b, #485460, #6b705c, #928e7f, #bdbdbd)

Colors



<!-- Primary Colors -->
<color name="sad_vibe_color_10">#232b2b</color>
<color name="sad_vibe_color_20">#485460</color>
<color name="sad_vibe_color_30">#6b705c</color>
<color name="sad_vibe_color_40">#928e7f</color>
<color name="sad_vibe_color_50">#bdbdbd</color>

PWA prompt