Named color · #C2DBC6
Quintessential
Quintessential is #C2DBC6: rgb(194 219 198), hsl(130 26% 81%), oklch(0.867 0.039 150). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Green mean? → · Quintessential color name →
#C2DBC6
oklch(0.867 0.039 150)
Color conversions
- HEX
- #c2dbc6
- RGB
- rgb(194 219 198)
- HSL
- hsl(130 26% 81%)
- HWB
- hwb(130 76% 14%)
- OKLCH
- oklch(0.867 0.039 150)
- OKLab
- oklab(0.867 -0.034 0.02)
- CIE Lab
- lab(85.1 -11.58 7.41)
- LCH
- lch(85.1 13.75 147.4)
- CMYK
- cmyk(11% 0% 10% 14%)
Tints · Shades · Tones
Tints
- C8DFCC
- CEE2D1
- D4E6D7
- DAE9DD
- E0EDE2
- E6F1E8
- EDF4EE
- F3F8F3
- F9FBF9
Shades
- A8BEAC
- 8FA292
- 77877A
- 606D62
- 49544B
- 343C35
- 202621
- 0E110E
- 020202
Tones
- BBD2BF
- B5C8B8
- AEBFB0
- A7B6A9
- A1ACA2
- 9AA39B
- 939A94
- 8D928E
- 868987
Color harmonies
Complementary +180°
- C2DBC6
Quintessential
- E3CBE0
≈ Orchid Shimmer
Analogous -30° +30°
- C2DBC6
Quintessential
- D0D8BB
≈ Celery Satin
- B9DCD4
≈ Picnic Bay
Triadic +120° +240°
- C2DBC6
Quintessential
- C9D3EE
≈ Frozen Periwinkle
- ECCAC4
≈ Harmony
Split-complementary +150° +210°
- C2DBC6
Quintessential
- D7CEEA
≈ Plum’s the Word
- EAC9D2
≈ Cradle Pink
Tetradic +90° +180° +270°
- C2DBC6
Quintessential
- BDD7EB
≈ First Rain
- E3CBE0
≈ Orchid Shimmer
- E7CEBA
≈ Tanglewood Park
Contrast & accessibility
Ag
FailOn white
WCAG 1.47:1 · APCA Lc 22
Ag
AAAOn black
WCAG 14.24:1 · APCA Lc 81
Best text color: #000000
WCAG 14.24:1 (AAA) · APCA Lc 81
Contrast pairs
Code snippets
CSS
:root {
--quintessential: #c2dbc6;
--quintessential-rgb: 194 219 198;
--quintessential-oklch: oklch(0.867 0.039 150);
}
.element {
color: var(--quintessential);
background-color: hsl(130 26% 81%);
border-color: oklch(0.867 0.039 150);
}Tailwind CSS v4
@theme {
--color-quintessential: #c2dbc6;
--color-quintessential-50: #edf9f0;
--color-quintessential-100: #dfece2;
--color-quintessential-200: #c9d9cc;
--color-quintessential-300: #a9beae;
--color-quintessential-400: #8fa592;
--color-quintessential-500: #748e79;
--color-quintessential-600: #637866;
--color-quintessential-700: #4f6052;
--color-quintessential-800: #39463b;
--color-quintessential-900: #273128;
--color-quintessential-950: #151d16;
}SCSS
$quintessential: #c2dbc6;
$quintessential-rgb: 194, 219, 198;
$quintessential-light: mix(#fff, $quintessential, 20%);
$quintessential-dark: mix(#000, $quintessential, 20%);
.element {
color: $quintessential;
box-shadow: 0 0 0 2px rgba($quintessential, 0.35);
}