Named color · #DFD8B3
Rancho Verde
Rancho Verde is #DFD8B3: rgb(223 216 179), hsl(50 41% 79%), oklch(0.878 0.05 98.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Rancho Verde color name →
#DFD8B3
oklch(0.878 0.05 98.4)
Color conversions
- HEX
- #dfd8b3
- RGB
- rgb(223 216 179)
- HSL
- hsl(50 41% 79%)
- HWB
- hwb(50 70% 13%)
- OKLCH
- oklch(0.878 0.05 98.4)
- OKLab
- oklab(0.878 -0.007 0.049)
- CIE Lab
- lab(86.2 -1.93 19.24)
- LCH
- lch(86.2 19.33 95.7)
- CMYK
- cmyk(0% 3% 20% 13%)
Tints · Shades · Tones
Tints
- E2DCBB
- E5E0C2
- E8E4CA
- ECE8D1
- EFEBD9
- F2EFE1
- F5F3E8
- F9F7F0
- FCFBF7
Shades
- C2BC9B
- A5A084
- 8A856E
- 6F6B58
- 565343
- 3D3B2F
- 27251D
- 12110C
- 020201
Tones
- D5CFAE
- CBC6A9
- C1BDA4
- B8B49F
- AEAB9A
- A5A294
- 9B9A8F
- 92918A
- 898885
Color harmonies
Complementary +180°
- DFD8B3
Rancho Verde
- CFD4F8
≈ Pale Phthalo Blue
Analogous -30° +30°
- DFD8B3
Rancho Verde
- EDD2B5
≈ Fuzzy Scruff
- CDDEBB
≈ Cat Woman
Triadic +120° +240°
- DFD8B3
Rancho Verde
- B3E0ED
≈ Break the Ice
- EECBE2
≈ Sweet Dreams
Split-complementary +150° +210°
- DFD8B3
Rancho Verde
- BEDBF7
≈ Oh Boy!
- E0CFF1
≈ Mousse aux Pruneaux
Tetradic +90° +180° +270°
- DFD8B3
Rancho Verde
- B3E2DD
≈ Festival de Verano
- CFD4F8
≈ Pale Phthalo Blue
- F5CAD0
≈ Pleasing Pink
Contrast & accessibility
Ag
FailOn white
WCAG 1.43:1 · APCA Lc 21
Ag
AAAOn black
WCAG 14.61:1 · APCA Lc 82
Best text color: #000000
WCAG 14.61:1 (AAA) · APCA Lc 82
Contrast pairs
Code snippets
CSS
:root {
--rancho-verde: #dfd8b3;
--rancho-verde-rgb: 223 216 179;
--rancho-verde-oklch: oklch(0.878 0.05 98.4);
}
.element {
color: var(--rancho-verde);
background-color: hsl(50 41% 79%);
border-color: oklch(0.878 0.05 98.4);
}Tailwind CSS v4
@theme {
--color-rancho-verde: #dfd8b3;
--color-rancho-verde-50: #f8f6e6;
--color-rancho-verde-100: #ebe9d6;
--color-rancho-verde-200: #d9d5bd;
--color-rancho-verde-300: #bdb99c;
--color-rancho-verde-400: #a69f7e;
--color-rancho-verde-500: #8e8761;
--color-rancho-verde-600: #787252;
--color-rancho-verde-700: #605b42;
--color-rancho-verde-800: #47432f;
--color-rancho-verde-900: #312e20;
--color-rancho-verde-950: #1d1b0f;
}SCSS
$rancho-verde: #dfd8b3;
$rancho-verde-rgb: 223, 216, 179;
$rancho-verde-light: mix(#fff, $rancho-verde, 20%);
$rancho-verde-dark: mix(#000, $rancho-verde, 20%);
.element {
color: $rancho-verde;
box-shadow: 0 0 0 2px rgba($rancho-verde, 0.35);
}