Named color · #C2BC90
New Foliage
New Foliage is #C2BC90: rgb(194 188 144), hsl(53 29% 66%), oklch(0.789 0.06 101.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · New Foliage color name →
#C2BC90
oklch(0.789 0.06 101.1)
Color conversions
- HEX
- #c2bc90
- RGB
- rgb(194 188 144)
- HSL
- hsl(53 29% 66%)
- HWB
- hwb(53 56% 24%)
- OKLCH
- oklch(0.789 0.06 101.1)
- OKLab
- oklab(0.789 -0.011 0.058)
- CIE Lab
- lab(75.91 -3.01 23.16)
- LCH
- lch(75.91 23.36 97.4)
- CMYK
- cmyk(0% 3% 26% 24%)
Tints · Shades · Tones
Tints
- C8C39B
- CEC9A6
- D4D0B1
- DAD7BC
- E0DDC7
- E6E4D2
- ECEBDD
- F2F1E8
- F9F8F4
Shades
- A8A37D
- 8F8B6A
- 777357
- 605D45
- 494734
- 343224
- 201F15
- 0E0D07
- 020201
Tones
- BBB68F
- B4B08D
- AEAA8C
- A7A48A
- A09E89
- 9A9887
- 939285
- 8D8C84
- 868682
Color harmonies
Complementary +180°
- C2BC90
New Foliage
- B3B6E0
≈ Beloved
Analogous -30° +30°
- C2BC90
New Foliage
- D3B491
≈ Crème de Caramel
- ADC39B
≈ Harmonious
Triadic +120° +240°
- C2BC90
New Foliage
- 90C4D5
≈ Blue Glint
- D6ACC6
≈ Lofty Delight
Split-complementary +150° +210°
- C2BC90
New Foliage
- 9FBEE0
≈ Blair
- C7B0D7
≈ Lavender Field Dreamer
Tetradic +90° +180° +270°
- C2BC90
New Foliage
- 8DC7C3
≈ Mercury Mist
- B3B6E0
≈ Beloved
- DDABB1
≈ Raspberry Lemonade
Contrast & accessibility
Ag
FailOn white
WCAG 1.92:1 · APCA Lc 37
Ag
AAAOn black
WCAG 10.88:1 · APCA Lc 66
Best text color: #000000
WCAG 10.88:1 (AAA) · APCA Lc 66
Contrast pairs
Code snippets
CSS
:root {
--new-foliage: #c2bc90;
--new-foliage-rgb: 194 188 144;
--new-foliage-oklch: oklch(0.789 0.06 101.1);
}
.element {
color: var(--new-foliage);
background-color: hsl(53 29% 66%);
border-color: oklch(0.789 0.06 101.1);
}Tailwind CSS v4
@theme {
--color-new-foliage: #c2bc90;
--color-new-foliage-50: #f8f6e3;
--color-new-foliage-100: #ebe9d3;
--color-new-foliage-200: #d8d6b9;
--color-new-foliage-300: #bcb996;
--color-new-foliage-400: #a6a077;
--color-new-foliage-500: #8e8859;
--color-new-foliage-600: #78734c;
--color-new-foliage-700: #605c3c;
--color-new-foliage-800: #47432b;
--color-new-foliage-900: #312e1d;
--color-new-foliage-950: #1d1b0d;
}SCSS
$new-foliage: #c2bc90;
$new-foliage-rgb: 194, 188, 144;
$new-foliage-light: mix(#fff, $new-foliage, 20%);
$new-foliage-dark: mix(#000, $new-foliage, 20%);
.element {
color: $new-foliage;
box-shadow: 0 0 0 2px rgba($new-foliage, 0.35);
}