Cor nomeada · #CCBEB6
Blanched Driftwood
Blanched Driftwood é #CCBEB6: rgb(204 190 182), hsl(22 18% 76%), oklch(0.811 0.019 51.9). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Gray mean? → · Blanched Driftwood color name →
#CCBEB6
oklch(0.811 0.019 51.9)
Conversões de cor
- HEX
- #ccbeb6
- RGB
- rgb(204 190 182)
- HSL
- hsl(22 18% 76%)
- HWB
- hwb(22 71% 20%)
- OKLCH
- oklch(0.811 0.019 51.9)
- OKLab
- oklab(0.811 0.012 0.015)
- CIE Lab
- lab(77.98 4.09 5.92)
- LCH
- lch(77.98 7.2 55.3)
- CMYK
- cmyk(0% 7% 11% 20%)
Tons claros · Sombras · Tons
Tons claros
- D1C4BD
- D6CBC4
- DBD1CB
- E0D8D3
- E5DEDA
- EAE5E1
- F0EBE9
- F5F2F0
- FAF8F8
Sombras
- B1A59E
- 978C86
- 7E756F
- 655E59
- 4E4844
- 373330
- 221F1D
- 0F0D0C
- 020202
Tons
- C4B8B0
- BCB1AB
- B5ABA5
- ADA5A0
- A59E9B
- 9E9895
- 969290
- 8F8C8B
- 878685
Harmonias de cor
Complementar +180°
- CCBEB6
Blanched Driftwood
- B5C4CC
≈ Lighthouse Shadows
Análoga -30° +30°
- CCBEB6
Blanched Driftwood
- CEBDBB
≈ Moth Pink
- C7C0B3
≈ Ashen
Tríade +120° +240°
- CCBEB6
Blanched Driftwood
- B5C5C0
≈ Blustery Wind
- C1BFCD
≈ Gentleman’s Suit
Complementar dividida +150° +210°
- CCBEB6
Blanched Driftwood
- B3C5C6
≈ Blue Agave
- BAC2CE
≈ Misty Morning Dew
Tétrade +90° +180° +270°
- CCBEB6
Blanched Driftwood
- BAC5B9
≈ Antique Patina
- B5C4CC
≈ Lighthouse Shadows
- C7BDC9
≈ Stately Frills
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.80:1 · APCA Lc 34
Ag
AAASobre preto
WCAG 11.60:1 · APCA Lc 69
Melhor cor de texto: #000000
WCAG 11.60:1 (AAA) · APCA Lc 69
Contrast pairs
Trechos de código
CSS
:root {
--blanched-driftwood: #ccbeb6;
--blanched-driftwood-rgb: 204 190 182;
--blanched-driftwood-oklch: oklch(0.811 0.019 51.9);
}
.element {
color: var(--blanched-driftwood);
background-color: hsl(22 18% 76%);
border-color: oklch(0.811 0.019 51.9);
}Tailwind CSS v4
@theme {
--color-blanched-driftwood: #ccbeb6;
--color-blanched-driftwood-50: #faf4f0;
--color-blanched-driftwood-100: #ede6e2;
--color-blanched-driftwood-200: #dbd2cd;
--color-blanched-driftwood-300: #c0b5ae;
--color-blanched-driftwood-400: #a89b94;
--color-blanched-driftwood-500: #91837b;
--color-blanched-driftwood-600: #7b6f68;
--color-blanched-driftwood-700: #625953;
--color-blanched-driftwood-800: #48413c;
--color-blanched-driftwood-900: #322c2a;
--color-blanched-driftwood-950: #1e1a17;
}SCSS
$blanched-driftwood: #ccbeb6;
$blanched-driftwood-rgb: 204, 190, 182;
$blanched-driftwood-light: mix(#fff, $blanched-driftwood, 20%);
$blanched-driftwood-dark: mix(#000, $blanched-driftwood, 20%);
.element {
color: $blanched-driftwood;
box-shadow: 0 0 0 2px rgba($blanched-driftwood, 0.35);
}