Named color · #CDBACB
Antique Heather
Antique Heather is #CDBACB: rgb(205 186 203), hsl(306 16% 77%), oklch(0.81 0.032 329.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Antique Heather color name →
#CDBACB
oklch(0.81 0.032 329.2)
Color conversions
- HEX
- #cdbacb
- RGB
- rgb(205 186 203)
- HSL
- hsl(306 16% 77%)
- HWB
- hwb(306 73% 20%)
- OKLCH
- oklch(0.81 0.032 329.2)
- OKLab
- oklab(0.81 0.027 -0.016)
- CIE Lab
- lab(77.52 9.21 -6.02)
- LCH
- lch(77.52 11.01 326.9)
- CMYK
- cmyk(0% 9% 1% 20%)
Tints · Shades · Tones
Tints
- D2C1D0
- D7C8D5
- DCCEDA
- E1D5E0
- E6DCE5
- EBE3EA
- F0EAEF
- F5F1F4
- FAF8FA
Shades
- B2A1B0
- 988996
- 7E727D
- 665C65
- 4E464D
- 383237
- 231E22
- 0F0D0F
- 020202
Tones
- C5B4C3
- BDAEBC
- B5A8B4
- ADA2AC
- A69DA5
- 9E979D
- 969196
- 8F8B8F
- 878687
Color harmonies
Complementary +180°
- CDBACB
Antique Heather
- B3C7B6
≈ Pine Whisper
Analogous -30° +30°
- CDBACB
Antique Heather
- C3BDD3
≈ Orchid House
- D3B9C0
≈ Melting Violet
Triadic +120° +240°
- CDBACB
Antique Heather
- C9C0AA
≈ Hideaway
- AAC7CC
≈ Spring Storm
Split-complementary +150° +210°
- CDBACB
Antique Heather
- BEC4AE
≈ Sidekick
- ACC8C1
≈ Copenhagen
Tetradic +90° +180° +270°
- CDBACB
Antique Heather
- D1BDAD
≈ Desert Fortress
- B3C7B6
≈ Pine Whisper
- AFC4D3
≈ Faded Indigo
Contrast & accessibility
Ag
FailOn white
WCAG 1.82:1 · APCA Lc 34
Ag
AAAOn black
WCAG 11.48:1 · APCA Lc 68
Best text color: #000000
WCAG 11.48:1 (AAA) · APCA Lc 68
Contrast pairs
Code snippets
CSS
:root {
--antique-heather: #cdbacb;
--antique-heather-rgb: 205 186 203;
--antique-heather-oklch: oklch(0.81 0.032 329.2);
}
.element {
color: var(--antique-heather);
background-color: hsl(306 16% 77%);
border-color: oklch(0.81 0.032 329.2);
}Tailwind CSS v4
@theme {
--color-antique-heather: #cdbacb;
--color-antique-heather-50: #fbf2f9;
--color-antique-heather-100: #eee4ed;
--color-antique-heather-200: #ddd0da;
--color-antique-heather-300: #c1b2bf;
--color-antique-heather-400: #a998a8;
--color-antique-heather-500: #927f91;
--color-antique-heather-600: #7c6c7a;
--color-antique-heather-700: #635662;
--color-antique-heather-800: #483f48;
--color-antique-heather-900: #322b32;
--color-antique-heather-950: #1e181e;
}SCSS
$antique-heather: #cdbacb;
$antique-heather-rgb: 205, 186, 203;
$antique-heather-light: mix(#fff, $antique-heather, 20%);
$antique-heather-dark: mix(#000, $antique-heather, 20%);
.element {
color: $antique-heather;
box-shadow: 0 0 0 2px rgba($antique-heather, 0.35);
}