Named color · #CDCACE
Clay Slate Wacke
Clay Slate Wacke is #CDCACE: rgb(205 202 206), hsl(285 4% 80%), oklch(0.843 0.006 317.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Clay Slate Wacke color name →
#CDCACE
oklch(0.843 0.006 317.8)
Color conversions
- HEX
- #cdcace
- RGB
- rgb(205 202 206)
- HSL
- hsl(285 4% 80%)
- HWB
- hwb(285 79% 19%)
- OKLCH
- oklch(0.843 0.006 317.8)
- OKLab
- oklab(0.843 0.005 -0.004)
- CIE Lab
- lab(81.66 1.62 -1.61)
- LCH
- lch(81.66 2.28 315.1)
- CMYK
- cmyk(0% 2% 0% 19%)
Tints · Shades · Tones
Tints
- D2CFD3
- D7D4D8
- DCDADC
- E1DFE1
- E6E4E6
- EBEAEB
- F0EFF0
- F5F4F5
- FAFAFA
Shades
- B2AFB3
- 989598
- 7E7C7F
- 666466
- 4E4D4E
- 383738
- 232223
- 0F0F0F
- 020202
Tones
- C5C2C6
- BDBBBE
- B5B3B6
- ADACAE
- A6A4A6
- 9E9D9E
- 969697
- 8F8E8F
- 878787
Color harmonies
Complementary +180°
- CDCACE
Clay Slate Wacke
- C9CCC8
≈ Morning Lake
Analogous -30° +30°
- CDCACE
Clay Slate Wacke
- CBCBCF
≈ Cerebellum Grey
- CFCACC
≈ El Niño
Triadic +120° +240°
- CDCACE
Clay Slate Wacke
- CECBC7
≈ Gravel Drive
- C7CDCD
≈ Where There Is Smoke
Split-complementary +150° +210°
- CDCACE
Clay Slate Wacke
- CBCCC7
≈ Passive
- C8CDCA
≈ Morning Lake
Tetradic +90° +180° +270°
- CDCACE
Clay Slate Wacke
- CFCAC8
≈ Greyish
- C9CCC8
≈ Morning Lake
- C7CCCF
≈ Where There Is Smoke
Contrast & accessibility
Ag
FailOn white
WCAG 1.62:1 · APCA Lc 28
Ag
AAAOn black
WCAG 12.93:1 · APCA Lc 75
Best text color: #000000
WCAG 12.93:1 (AAA) · APCA Lc 75
Contrast pairs
Code snippets
CSS
:root {
--clay-slate-wacke: #cdcace;
--clay-slate-wacke-rgb: 205 202 206;
--clay-slate-wacke-oklch: oklch(0.843 0.006 317.8);
}
.element {
color: var(--clay-slate-wacke);
background-color: hsl(285 4% 80%);
border-color: oklch(0.843 0.006 317.8);
}Tailwind CSS v4
@theme {
--color-clay-slate-wacke: #cdcace;
--color-clay-slate-wacke-50: #f6f4f6;
--color-clay-slate-wacke-100: #e9e7e9;
--color-clay-slate-wacke-200: #d5d3d6;
--color-clay-slate-wacke-300: #b9b6b9;
--color-clay-slate-wacke-400: #a09da1;
--color-clay-slate-wacke-500: #888589;
--color-clay-slate-wacke-600: #737074;
--color-clay-slate-wacke-700: #5c5a5d;
--color-clay-slate-wacke-800: #434244;
--color-clay-slate-wacke-900: #2e2d2f;
--color-clay-slate-wacke-950: #1b1a1b;
}SCSS
$clay-slate-wacke: #cdcace;
$clay-slate-wacke-rgb: 205, 202, 206;
$clay-slate-wacke-light: mix(#fff, $clay-slate-wacke, 20%);
$clay-slate-wacke-dark: mix(#000, $clay-slate-wacke, 20%);
.element {
color: $clay-slate-wacke;
box-shadow: 0 0 0 2px rgba($clay-slate-wacke, 0.35);
}