Named color · #CDCCD0
Dusty Grey
Dusty Grey is #CDCCD0: rgb(205 204 208), hsl(255 4% 81%), oklch(0.847 0.006 297.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Dusty Grey color name →
#CDCCD0
oklch(0.847 0.006 297.7)
Color conversions
- HEX
- #cdccd0
- RGB
- rgb(205 204 208)
- HSL
- hsl(255 4% 81%)
- HWB
- hwb(255 80% 18%)
- OKLCH
- oklch(0.847 0.006 297.7)
- OKLab
- oklab(0.847 0.003 -0.005)
- CIE Lab
- lab(82.21 0.9 -1.87)
- LCH
- lch(82.21 2.07 295.8)
- CMYK
- cmyk(1% 2% 0% 18%)
Tints · Shades · Tones
Tints
- D2D1D5
- D7D6D9
- DCDBDE
- E1E0E3
- E6E5E7
- EBEAEC
- F0EFF1
- F5F5F5
- FAFAFA
Shades
- B2B1B5
- 98979A
- 7E7E80
- 666567
- 4E4E4F
- 383739
- 232223
- 0F0F10
- 020202
Tones
- C5C4C8
- BDBCBF
- B5B5B7
- ADADAF
- A6A5A7
- 9E9E9F
- 969697
- 8F8F8F
- 878788
Color harmonies
Complementary +180°
- CDCCD0
Dusty Grey
- CCCDC9
≈ Silver Strand Beach
Analogous -30° +30°
- CDCCD0
Dusty Grey
- CBCDD1
≈ Lunar Rays
- CFCBCF
≈ Columbo’s Coat
Triadic +120° +240°
- CDCCD0
Dusty Grey
- D0CCC9
≈ Orca White
- C9CECD
≈ Aerodynamic
Split-complementary +150° +210°
- CDCCD0
Dusty Grey
- CECDC9
≈ Pewter Vase
- CACECB
≈ Silver Strand Beach
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 1.59:1 · APCA Lc 27
Ag
AAAOn black
WCAG 13.14:1 · APCA Lc 76
Best text color: #000000
WCAG 13.14:1 (AAA) · APCA Lc 76
Contrast pairs
Code snippets
CSS
:root {
--dusty-grey: #cdccd0;
--dusty-grey-rgb: 205 204 208;
--dusty-grey-oklch: oklch(0.847 0.006 297.7);
}
.element {
color: var(--dusty-grey);
background-color: hsl(255 4% 81%);
border-color: oklch(0.847 0.006 297.7);
}Tailwind CSS v4
@theme {
--color-dusty-grey: #cdccd0;
--color-dusty-grey-50: #f5f5f6;
--color-dusty-grey-100: #e8e7e9;
--color-dusty-grey-200: #d4d4d6;
--color-dusty-grey-300: #b8b7ba;
--color-dusty-grey-400: #9f9ea1;
--color-dusty-grey-500: #868589;
--color-dusty-grey-600: #727174;
--color-dusty-grey-700: #5b5a5d;
--color-dusty-grey-800: #424244;
--color-dusty-grey-900: #2e2d2f;
--color-dusty-grey-950: #1b1a1c;
}SCSS
$dusty-grey: #cdccd0;
$dusty-grey-rgb: 205, 204, 208;
$dusty-grey-light: mix(#fff, $dusty-grey, 20%);
$dusty-grey-dark: mix(#000, $dusty-grey, 20%);
.element {
color: $dusty-grey;
box-shadow: 0 0 0 2px rgba($dusty-grey, 0.35);
}