Nearest named color · #4B1F1B
#4B1F1B
Nearest named color: Torrefacto Roast
#4B1F1B (rgb(75 31 27), hsl(5 47% 20%), oklch(0.302 0.068 27.1)) is closest to the named color Torrefacto Roast. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#4B1F1B
oklch(0.302 0.068 27.1)
Color conversions
- HEX
- #4b1f1b
- RGB
- rgb(75 31 27)
- HSL
- hsl(5 47% 20%)
- HWB
- hwb(5 11% 71%)
- OKLCH
- oklch(0.302 0.068 27.1)
- OKLab
- oklab(0.302 0.06 0.031)
- CIE Lab
- lab(18.43 21.05 13.21)
- LCH
- lch(18.43 24.85 32.1)
- CMYK
- cmyk(0% 59% 64% 71%)
Tints · Shades · Tones
Tints
- 5D332E
- 6E4743
- 805C58
- 92726E
- A38884
- B59F9C
- C8B6B4
- DACECC
- ECE6E5
Shades
- 401916
- 351411
- 2B0F0C
- 210A08
- 170605
- 0E0302
- 060101
- 020000
- 000000
Tones
- 512924
- 57322E
- 5C3C38
- 624541
- 674F4B
- 6D5856
- 726260
- 776C6A
- 7B7675
Color harmonies
Complementary +180°
- 4B1F1B
Torrefacto Roast
- 00353C
≈ Artist Blue
Analogous -30° +30°
- 4B1F1B
Torrefacto Roast
- 481E2F
≈ Dark Mahogany
- 472405
≈ Ibex Brown
Triadic +120° +240°
- 4B1F1B
Torrefacto Roast
- 133719
≈ Gameboy Contrast
- 1F2C50
≈ Pico Void
Split-complementary +150° +210°
- 4B1F1B
Torrefacto Roast
- 00372E
≈ Night Turquoise
- 00324B
≈ Cosmos Blue
Tetradic +90° +180° +270°
- 4B1F1B
Torrefacto Roast
- 2C3202
≈ Wasabi Nori
- 00353C
≈ Artist Blue
- 32264C
≈ Cardinal Mauve
Contrast & accessibility
Ag
AAAOn white
WCAG 13.89:1 · APCA Lc 100
Ag
FailOn black
WCAG 1.51:1 · APCA Lc 0
Best text color: #FFFFFF
WCAG 13.89:1 (AAA) · APCA Lc 100
Contrast pairs
Code snippets
CSS
:root {
--torrefacto-roast: #4b1f1b;
--torrefacto-roast-rgb: 75 31 27;
--torrefacto-roast-oklch: oklch(0.302 0.068 27.1);
}
.element {
color: var(--torrefacto-roast);
background-color: hsl(5 47% 20%);
border-color: oklch(0.302 0.068 27.1);
}Tailwind CSS v4
@theme {
--color-torrefacto-roast: #4b1f1b;
--color-torrefacto-roast-50: #ffeeea;
--color-torrefacto-roast-100: #fee0db;
--color-torrefacto-roast-200: #f0cac4;
--color-torrefacto-roast-300: #d8aba4;
--color-torrefacto-roast-400: #c48f89;
--color-torrefacto-roast-500: #af756e;
--color-torrefacto-roast-600: #94635d;
--color-torrefacto-roast-700: #764f4a;
--color-torrefacto-roast-800: #583936;
--color-torrefacto-roast-900: #3d2725;
--color-torrefacto-roast-950: #271514;
}SCSS
$torrefacto-roast: #4b1f1b;
$torrefacto-roast-rgb: 75, 31, 27;
$torrefacto-roast-light: mix(#fff, $torrefacto-roast, 20%);
$torrefacto-roast-dark: mix(#000, $torrefacto-roast, 20%);
.element {
color: $torrefacto-roast;
box-shadow: 0 0 0 2px rgba($torrefacto-roast, 0.35);
}