Cor nomeada · #CDCACE
Clay Slate Wacke
Clay Slate Wacke é #CDCACE: rgb(205 202 206), hsl(285 4% 80%), oklch(0.843 0.006 317.8). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Gray mean? → · Clay Slate Wacke color name →
#CDCACE
oklch(0.843 0.006 317.8)
Conversões de cor
- 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%)
Tons claros · Sombras · Tons
Tons claros
- D2CFD3
- D7D4D8
- DCDADC
- E1DFE1
- E6E4E6
- EBEAEB
- F0EFF0
- F5F4F5
- FAFAFA
Sombras
- B2AFB3
- 989598
- 7E7C7F
- 666466
- 4E4D4E
- 383738
- 232223
- 0F0F0F
- 020202
Tons
- C5C2C6
- BDBBBE
- B5B3B6
- ADACAE
- A6A4A6
- 9E9D9E
- 969697
- 8F8E8F
- 878787
Harmonias de cor
Complementar +180°
- CDCACE
Clay Slate Wacke
- C9CCC8
≈ Morning Lake
Análoga -30° +30°
- CDCACE
Clay Slate Wacke
- CBCBCF
≈ Cerebellum Grey
- CFCACC
≈ El Niño
Tríade +120° +240°
- CDCACE
Clay Slate Wacke
- CECBC7
≈ Gravel Drive
- C7CDCD
≈ Where There Is Smoke
Complementar dividida +150° +210°
- CDCACE
Clay Slate Wacke
- CBCCC7
≈ Passive
- C8CDCA
≈ Morning Lake
Tétrade +90° +180° +270°
- CDCACE
Clay Slate Wacke
- CFCAC8
≈ Greyish
- C9CCC8
≈ Morning Lake
- C7CCCF
≈ Where There Is Smoke
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.62:1 · APCA Lc 28
Ag
AAASobre preto
WCAG 12.93:1 · APCA Lc 75
Melhor cor de texto: #000000
WCAG 12.93:1 (AAA) · APCA Lc 75
Contrast pairs
Trechos de código
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);
}