Named color · #2D2D24
Karaka
Karaka is #2D2D24: rgb(45 45 36), hsl(60 11% 16%), oklch(0.294 0.016 107.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Karaka color name →
#2D2D24
oklch(0.294 0.016 107.3)
Color conversions
- HEX
- #2d2d24
- RGB
- rgb(45 45 36)
- HSL
- hsl(60 11% 16%)
- HWB
- hwb(60 14% 82%)
- OKLCH
- oklch(0.294 0.016 107.3)
- OKLab
- oklab(0.294 -0.005 0.015)
- CIE Lab
- lab(18.24 -1.46 5.86)
- LCH
- lch(18.24 6.04 104)
- CMYK
- cmyk(0% 0% 20% 82%)
Tints · Shades · Tones
Tints
- 3F3F36
- 52524A
- 65655E
- 7A7A73
- 8F8F89
- A4A4A0
- BABAB7
- D1D1CE
- E8E8E6
Shades
- 26261E
- 1F1F18
- 181812
- 11110C
- 0B0B07
- 060604
- 020202
- 010100
- 000000
Tones
- 35352C
- 3C3C35
- 44443E
- 4C4D47
- 555550
- 5D5D59
- 666663
- 6E6E6C
- 777776
Color harmonies
Complementary +180°
- 2D2D24
Karaka
- 2C2B34
≈ Haiti
Analogous -30° +30°
Triadic +120° +240°
- 2D2D24
Karaka
- 242E33
≈ Freinacht Black
- 33292E
≈ Smoky Charcoal
Split-complementary +150° +210°
- 2D2D24
Karaka
- 272D34
≈ Deep Space Echo
- 302A32
≈ Black Safflower
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
AAAOn white
WCAG 13.88:1 · APCA Lc 101
Ag
FailOn black
WCAG 1.51:1 · APCA Lc 0
Best text color: #FFFFFF
WCAG 13.88:1 (AAA) · APCA Lc 101
Contrast pairs
Code snippets
CSS
:root {
--karaka: #2d2d24;
--karaka-rgb: 45 45 36;
--karaka-oklch: oklch(0.294 0.016 107.3);
}
.element {
color: var(--karaka);
background-color: hsl(60 11% 16%);
border-color: oklch(0.294 0.016 107.3);
}Tailwind CSS v4
@theme {
--color-karaka: #2d2d24;
--color-karaka-50: #f5f5f0;
--color-karaka-100: #e8e8e2;
--color-karaka-200: #d4d5cd;
--color-karaka-300: #b8b8af;
--color-karaka-400: #9f9f95;
--color-karaka-500: #87877b;
--color-karaka-600: #727268;
--color-karaka-700: #5b5b53;
--color-karaka-800: #43433d;
--color-karaka-900: #2e2e2a;
--color-karaka-950: #1b1b17;
}SCSS
$karaka: #2d2d24;
$karaka-rgb: 45, 45, 36;
$karaka-light: mix(#fff, $karaka, 20%);
$karaka-dark: mix(#000, $karaka, 20%);
.element {
color: $karaka;
box-shadow: 0 0 0 2px rgba($karaka, 0.35);
}