Named color · #C4B47D
Cool Avocado
Cool Avocado is #C4B47D: rgb(196 180 125), hsl(46 38% 63%), oklch(0.77 0.075 93.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Cool Avocado color name →
#C4B47D
oklch(0.77 0.075 93.8)
Color conversions
- HEX
- #c4b47d
- RGB
- rgb(196 180 125)
- HSL
- hsl(46 38% 63%)
- HWB
- hwb(46 49% 23%)
- OKLCH
- oklch(0.77 0.075 93.8)
- OKLab
- oklab(0.77 -0.005 0.075)
- CIE Lab
- lab(73.7 -0.03 30.29)
- LCH
- lch(73.7 30.29 90.1)
- CMYK
- cmyk(0% 8% 36% 23%)
Tints · Shades · Tones
Tints
- CABB8A
- D0C397
- D5CAA4
- DBD2B1
- E1D9BE
- E7E1CB
- EDE8D8
- F3F0E5
- F9F7F2
Shades
- AA9C6C
- 91855B
- 786E4B
- 61583B
- 4A442C
- 35301E
- 211D11
- 0E0C05
- 020201
Tones
- BDAF7E
- B6AA7F
- AFA47F
- A89F80
- A19A80
- 9B9580
- 948F80
- 8D8A80
- 878580
Color harmonies
Complementary +180°
- C4B47D
Cool Avocado
- A5B2E5
≈ Myrtle Flower
Analogous -30° +30°
- C4B47D
Cool Avocado
- D7AB82
≈ Paper Brown
- AABD88
≈ Shrubbery
Triadic +120° +240°
- C4B47D
Cool Avocado
- 7AC1D1
≈ Meltwater
- D2A3C8
≈ Geranium Bud
Split-complementary +150° +210°
- C4B47D
Cool Avocado
- 8BBAE1
≈ Goluboy Blue
- BEA9DC
≈ Perfume
Tetradic +90° +180° +270°
- C4B47D
Cool Avocado
- 7BC4B9
≈ Holiday
- A5B2E5
≈ Myrtle Flower
- DEA1AF
≈ Nana’s Rose
Contrast & accessibility
Ag
FailOn white
WCAG 2.06:1 · APCA Lc 40
Ag
AAAOn black
WCAG 10.17:1 · APCA Lc 62
Best text color: #000000
WCAG 10.17:1 (AAA) · APCA Lc 62
Contrast pairs
Code snippets
CSS
:root {
--cool-avocado: #c4b47d;
--cool-avocado-rgb: 196 180 125;
--cool-avocado-oklch: oklch(0.77 0.075 93.8);
}
.element {
color: var(--cool-avocado);
background-color: hsl(46 38% 63%);
border-color: oklch(0.77 0.075 93.8);
}Tailwind CSS v4
@theme {
--color-cool-avocado: #c4b47d;
--color-cool-avocado-50: #fbf6de;
--color-cool-avocado-100: #efe8cc;
--color-cool-avocado-200: #ded5b1;
--color-cool-avocado-300: #c3b88c;
--color-cool-avocado-400: #ad9e6b;
--color-cool-avocado-500: #978549;
--color-cool-avocado-600: #7f713f;
--color-cool-avocado-700: #665a32;
--color-cool-avocado-800: #4c4223;
--color-cool-avocado-900: #352d17;
--color-cool-avocado-950: #201a08;
}SCSS
$cool-avocado: #c4b47d;
$cool-avocado-rgb: 196, 180, 125;
$cool-avocado-light: mix(#fff, $cool-avocado, 20%);
$cool-avocado-dark: mix(#000, $cool-avocado, 20%);
.element {
color: $cool-avocado;
box-shadow: 0 0 0 2px rgba($cool-avocado, 0.35);
}