Named color · #C5CFB6
Tender Greens
Tender Greens is #C5CFB6: rgb(197 207 182), hsl(84 21% 76%), oklch(0.84 0.036 125). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Tender Greens color name →
#C5CFB6
oklch(0.84 0.036 125)
Color conversions
- HEX
- #c5cfb6
- RGB
- rgb(197 207 182)
- HSL
- hsl(84 21% 76%)
- HWB
- hwb(84 71% 19%)
- OKLCH
- oklch(0.84 0.036 125)
- OKLab
- oklab(0.84 -0.02 0.029)
- CIE Lab
- lab(81.83 -6.85 11.25)
- LCH
- lch(81.83 13.17 121.4)
- CMYK
- cmyk(5% 0% 12% 19%)
Tints · Shades · Tones
Tints
- CBD4BD
- D0D8C4
- D6DDCC
- DCE2D3
- E2E7DA
- E7ECE1
- EDF0E9
- F3F5F0
- F9FAF8
Shades
- ABB49E
- 929986
- 797F6F
- 616759
- 4B4F44
- 353830
- 21231D
- 0E100C
- 020202
Tones
- BEC7B0
- B7BFAB
- B0B7A6
- A9AFA0
- A2A79B
- 9B9F95
- 949790
- 8D8F8B
- 878885
Color harmonies
Complementary +180°
- C5CFB6
Tender Greens
- D0C5DE
≈ Lavender Bliss
Analogous -30° +30°
- C5CFB6
Tender Greens
- D2CBB1
≈ Platinum Sage
- B9D2C1
≈ Little Beaux Blue
Triadic +120° +240°
- C5CFB6
Tender Greens
- B8CEE1
≈ Impressionist Sky
- E0C1C7
≈ Odyssey Plum
Split-complementary +150° +210°
- C5CFB6
Tender Greens
- C3C9E2
≈ Silver Sweetpea
- DAC2D4
≈ Lilac Snow
Tetradic +90° +180° +270°
- C5CFB6
Tender Greens
- B1D1D9
≈ Hatchling Blue
- D0C5DE
≈ Lavender Bliss
- E1C3BB
≈ Golden Guernsey
Contrast & accessibility
Ag
FailOn white
WCAG 1.61:1 · APCA Lc 28
Ag
AAAOn black
WCAG 12.97:1 · APCA Lc 75
Best text color: #000000
WCAG 12.97:1 (AAA) · APCA Lc 75
Contrast pairs
Code snippets
CSS
:root {
--tender-greens: #c5cfb6;
--tender-greens-rgb: 197 207 182;
--tender-greens-oklch: oklch(0.84 0.036 125);
}
.element {
color: var(--tender-greens);
background-color: hsl(84 21% 76%);
border-color: oklch(0.84 0.036 125);
}Tailwind CSS v4
@theme {
--color-tender-greens: #c5cfb6;
--color-tender-greens-50: #f2f7ec;
--color-tender-greens-100: #e5eade;
--color-tender-greens-200: #d0d7c7;
--color-tender-greens-300: #b2bba8;
--color-tender-greens-400: #99a28c;
--color-tender-greens-500: #818b71;
--color-tender-greens-600: #6d7560;
--color-tender-greens-700: #575e4c;
--color-tender-greens-800: #404537;
--color-tender-greens-900: #2c2f26;
--color-tender-greens-950: #191c14;
}SCSS
$tender-greens: #c5cfb6;
$tender-greens-rgb: 197, 207, 182;
$tender-greens-light: mix(#fff, $tender-greens, 20%);
$tender-greens-dark: mix(#000, $tender-greens, 20%);
.element {
color: $tender-greens;
box-shadow: 0 0 0 2px rgba($tender-greens, 0.35);
}