Named color · #C1BEB9
Noble Grey
Noble Grey is #C1BEB9: rgb(193 190 185), hsl(38 6% 74%), oklch(0.802 0.008 80.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Noble Grey color name →
#C1BEB9
oklch(0.802 0.008 80.7)
Color conversions
- HEX
- #c1beb9
- RGB
- rgb(193 190 185)
- HSL
- hsl(38 6% 74%)
- HWB
- hwb(38 73% 24%)
- OKLCH
- oklch(0.802 0.008 80.7)
- OKLab
- oklab(0.802 0.001 0.008)
- CIE Lab
- lab(77.11 0.41 2.92)
- LCH
- lch(77.11 2.95 81.9)
- CMYK
- cmyk(0% 2% 4% 24%)
Tints · Shades · Tones
Tints
- C7C4C0
- CDCBC7
- D3D1CE
- D9D8D5
- E0DEDB
- E6E5E3
- ECEBEA
- F2F2F1
- F9F8F8
Shades
- A7A5A0
- 8F8C89
- 777571
- 5F5E5B
- 494846
- 343331
- 201F1E
- 0E0D0D
- 020202
Tones
- BAB8B3
- B4B1AD
- ADABA8
- A6A5A2
- A09E9C
- 999896
- 939291
- 8D8C8B
- 868686
Color harmonies
Complementary +180°
- C1BEB9
Noble Grey
- BCBFC4
≈ Silver Lined
Analogous -30° +30°
- C1BEB9
Noble Grey
- C3BDBA
≈ Grey Shadows
- BEBFB9
≈ Hailstorm Grey
Triadic +120° +240°
- C1BEB9
Noble Grey
- B9C0C0
≈ Skyline Steel
- C1BDC2
≈ Inuit Ice
Split-complementary +150° +210°
- C1BEB9
Noble Grey
- BABFC3
≈ Silver Lined
- BEBEC3
≈ Rocket Man
Tetradic +90° +180° +270°
- C1BEB9
Noble Grey
- BAC0BE
≈ Metal
- BCBFC4
≈ Silver Lined
- C3BCBF
≈ Lace Wisteria
Contrast & accessibility
Ag
FailOn white
WCAG 1.85:1 · APCA Lc 35
Ag
AAAOn black
WCAG 11.33:1 · APCA Lc 68
Best text color: #000000
WCAG 11.33:1 (AAA) · APCA Lc 68
Contrast pairs
Code snippets
CSS
:root {
--noble-grey: #c1beb9;
--noble-grey-rgb: 193 190 185;
--noble-grey-oklch: oklch(0.802 0.008 80.7);
}
.element {
color: var(--noble-grey);
background-color: hsl(38 6% 74%);
border-color: oklch(0.802 0.008 80.7);
}Tailwind CSS v4
@theme {
--color-noble-grey: #c1beb9;
--color-noble-grey-50: #f6f5f3;
--color-noble-grey-100: #e9e8e5;
--color-noble-grey-200: #d6d4d0;
--color-noble-grey-300: #b9b7b3;
--color-noble-grey-400: #a19e99;
--color-noble-grey-500: #898680;
--color-noble-grey-600: #74716d;
--color-noble-grey-700: #5d5a57;
--color-noble-grey-800: #44423f;
--color-noble-grey-900: #2f2e2c;
--color-noble-grey-950: #1b1a19;
}SCSS
$noble-grey: #c1beb9;
$noble-grey-rgb: 193, 190, 185;
$noble-grey-light: mix(#fff, $noble-grey, 20%);
$noble-grey-dark: mix(#000, $noble-grey, 20%);
.element {
color: $noble-grey;
box-shadow: 0 0 0 2px rgba($noble-grey, 0.35);
}