Named color · #CDD2BC
Garlic Suede
Garlic Suede is #CDD2BC: rgb(205 210 188), hsl(74 20% 78%), oklch(0.854 0.03 117.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Garlic Suede color name →
#CDD2BC
oklch(0.854 0.03 117.4)
Color conversions
- HEX
- #cdd2bc
- RGB
- rgb(205 210 188)
- HSL
- hsl(74 20% 78%)
- HWB
- hwb(74 74% 18%)
- OKLCH
- oklch(0.854 0.03 117.4)
- OKLab
- oklab(0.854 -0.014 0.027)
- CIE Lab
- lab(83.35 -4.65 10.33)
- LCH
- lch(83.35 11.33 114.2)
- CMYK
- cmyk(2% 0% 10% 18%)
Tints · Shades · Tones
Tints
- D2D6C3
- D7DBC9
- DCDFD0
- E1E4D6
- E6E8DD
- EBEDE4
- F0F1EB
- F5F6F1
- FAFAF8
Shades
- B2B6A3
- 989B8B
- 7E8173
- 66685D
- 4E5047
- 383932
- 23241F
- 0F100D
- 020202
Tones
- C5C9B6
- BDC1B0
- B5B9AA
- ADB0A4
- A6A89E
- 9EA098
- 969892
- 8F908C
- 878886
Color harmonies
Complementary +180°
- CDD2BC
Garlic Suede
- D1CBE1
≈ Light Mulberry
Analogous -30° +30°
- CDD2BC
Garlic Suede
- D7CEB9
≈ Atlantic Fig Snail
- C3D5C4
≈ Misty Lake
Triadic +120° +240°
- CDD2BC
Garlic Suede
- BDD2E1
≈ Sleep Baby Sleep
- E1C7CF
≈ Tinted Rosewood
Split-complementary +150° +210°
- CDD2BC
Garlic Suede
- C6CFE4
≈ Paper Elephant
- DAC8D9
≈ Euphoric Lilac
Tetradic +90° +180° +270°
- CDD2BC
Garlic Suede
- B9D5D9
≈ Rhythmic Blue
- D1CBE1
≈ Light Mulberry
- E2C8C4
≈ Pink Water
Contrast & accessibility
Ag
FailOn white
WCAG 1.55:1 · APCA Lc 25
Ag
AAAOn black
WCAG 13.54:1 · APCA Lc 78
Best text color: #000000
WCAG 13.54:1 (AAA) · APCA Lc 78
Contrast pairs
Code snippets
CSS
:root {
--garlic-suede: #cdd2bc;
--garlic-suede-rgb: 205 210 188;
--garlic-suede-oklch: oklch(0.854 0.03 117.4);
}
.element {
color: var(--garlic-suede);
background-color: hsl(74 20% 78%);
border-color: oklch(0.854 0.03 117.4);
}Tailwind CSS v4
@theme {
--color-garlic-suede: #cdd2bc;
--color-garlic-suede-50: #f4f7ed;
--color-garlic-suede-100: #e6e9de;
--color-garlic-suede-200: #d2d6c8;
--color-garlic-suede-300: #b5baa9;
--color-garlic-suede-400: #9da18d;
--color-garlic-suede-500: #848973;
--color-garlic-suede-600: #707461;
--color-garlic-suede-700: #595d4e;
--color-garlic-suede-800: #424438;
--color-garlic-suede-900: #2d2f26;
--color-garlic-suede-950: #1a1b15;
}SCSS
$garlic-suede: #cdd2bc;
$garlic-suede-rgb: 205, 210, 188;
$garlic-suede-light: mix(#fff, $garlic-suede, 20%);
$garlic-suede-dark: mix(#000, $garlic-suede, 20%);
.element {
color: $garlic-suede;
box-shadow: 0 0 0 2px rgba($garlic-suede, 0.35);
}