Cor nomeada · #CFC1B8
Crystal Grey
Crystal Grey é #CFC1B8: rgb(207 193 184), hsl(23 19% 77%), oklch(0.82 0.02 55.1). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Gray mean? → · Crystal Grey color name →
#CFC1B8
oklch(0.82 0.02 55.1)
Conversões de cor
- HEX
- #cfc1b8
- RGB
- rgb(207 193 184)
- HSL
- hsl(23 19% 77%)
- HWB
- hwb(23 72% 19%)
- OKLCH
- oklch(0.82 0.02 55.1)
- OKLab
- oklab(0.82 0.012 0.017)
- CIE Lab
- lab(79.05 3.96 6.41)
- LCH
- lch(79.05 7.53 58.3)
- CMYK
- cmyk(0% 7% 11% 19%)
Tons claros · Sombras · Tons
Tons claros
- D4C7BF
- D9CDC6
- DDD3CD
- E2D9D4
- E7E0DB
- ECE6E2
- F0ECE9
- F5F2F0
- FAF9F8
Sombras
- B4A7A0
- 998F88
- 7F7771
- 675F5B
- 4F4945
- 383431
- 23201E
- 100E0C
- 020202
Tons
- C7BAB2
- BFB4AD
- B7ADA7
- AFA6A1
- A7A09C
- 9F9996
- 979390
- 8F8D8B
- 888685
Harmonias de cor
Complementar +180°
- CFC1B8
Crystal Grey
- B8C7D0
≈ Silver Strand
Análoga -30° +30°
- CFC1B8
Crystal Grey
- D1BFBD
≈ Dusky Violet
- CAC3B6
≈ Whisper Ridge
Tríade +120° +240°
- CFC1B8
Crystal Grey
- B7C9C3
≈ Surf Spray
- C5C2D0
≈ Lavender Bouquet
Complementar dividida +150° +210°
- CFC1B8
Crystal Grey
- B6C8CA
≈ Misty Surf
- BEC4D2
≈ Blue Bayou
Tétrade +90° +180° +270°
- CFC1B8
Crystal Grey
- BCC8BC
≈ Resting Place
- B8C7D0
≈ Silver Strand
- CBC0CB
≈ Puffball
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.75:1 · APCA Lc 32
Ag
AAASobre preto
WCAG 11.97:1 · APCA Lc 71
Melhor cor de texto: #000000
WCAG 11.97:1 (AAA) · APCA Lc 71
Contrast pairs
Trechos de código
CSS
:root {
--crystal-grey: #cfc1b8;
--crystal-grey-rgb: 207 193 184;
--crystal-grey-oklch: oklch(0.82 0.02 55.1);
}
.element {
color: var(--crystal-grey);
background-color: hsl(23 19% 77%);
border-color: oklch(0.82 0.02 55.1);
}Tailwind CSS v4
@theme {
--color-crystal-grey: #cfc1b8;
--color-crystal-grey-50: #faf4f0;
--color-crystal-grey-100: #ede6e1;
--color-crystal-grey-200: #dbd2cc;
--color-crystal-grey-300: #c0b5ae;
--color-crystal-grey-400: #a89c93;
--color-crystal-grey-500: #91837a;
--color-crystal-grey-600: #7b6f67;
--color-crystal-grey-700: #625952;
--color-crystal-grey-800: #48413c;
--color-crystal-grey-900: #322d29;
--color-crystal-grey-950: #1e1a17;
}SCSS
$crystal-grey: #cfc1b8;
$crystal-grey-rgb: 207, 193, 184;
$crystal-grey-light: mix(#fff, $crystal-grey, 20%);
$crystal-grey-dark: mix(#000, $crystal-grey, 20%);
.element {
color: $crystal-grey;
box-shadow: 0 0 0 2px rgba($crystal-grey, 0.35);
}