#1b0b0d

#2c1217

#3f161e

#531926

Wine



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



HDR gradient

Switch to HDR to enhance the gradient



Quick view

Inspect colors in multiple color spaces

Colors overview

Black

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#1b0b0d	rgb(27, 11, 13)	hsl(350 42% 7.5%)	hwb(350 4.3% 89%)	lch(4.59 7.22 12.7)	lab(4.59 7.04 1.59)	cmyk 0%, 59%, 52%, 89%
	#2c1217	rgb(44, 18, 23)	hsl(350 42% 12%)	hwb(350 7.1% 83%)	lch(9.37 14.5 11.3)	lab(9.37 14.2 2.83)	cmyk 0%, 59%, 48%, 83%
	#3f161e	rgb(63, 22, 30)	hsl(350 48% 17%)	hwb(350 8.6% 75%)	lch(14.2 21.6 13.3)	lab(14.2 21.1 4.97)	cmyk 0%, 65%, 52%, 75%
	#531926	rgb(83, 25, 38)	hsl(350 54% 21%)	hwb(350 9.8% 67%)	lch(19 29 13.1)	lab(19 28.3 6.57)	cmyk 0%, 70%, 54%, 67%

 Click a color format to copy to your clipboard.

Contrast ratios checker

Click one color card to view the complete contrast checker tests.

#1b0b0d

AAA - 19.08



#2c1217

AAA - 17.41



#3f161e

AAA - 15.61



#531926

AAA - 13.68



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.



32°

CPU



48°

GPU



100%

Usage



11°

Rain



70%

Storage

HDR color space

HDR oklab colors



--angle: 45deg; 
background: linear-gradient(var(--angle), oklab(17.5% 0.027 0.006), oklab(22.3% 0.043 0.007), oklab(26.7% 0.063 0.012), oklab(31% 0.085 0.015))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #1b0b0d, #2c1217, #3f161e, #531926)

Colors



<!-- Primary Colors -->
<color name="wine_color_10">#1b0b0d</color>
<color name="wine_color_20">#2c1217</color>
<color name="wine_color_30">#3f161e</color>
<color name="wine_color_40">#531926</color>

Gradient PRO

Pro feature only

Get access to all app tokens, export files, and more.

PWA prompt