Named color · #B1A387
Curly Willow
Curly Willow is #B1A387: rgb(177 163 135), hsl(40 21% 61%), oklch(0.72 0.042 84.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Curly Willow color name →
#B1A387
oklch(0.72 0.042 84.5)
Color conversions
- HEX
- #b1a387
- RGB
- rgb(177 163 135)
- HSL
- hsl(40 21% 61%)
- HWB
- hwb(40 53% 31%)
- OKLCH
- oklch(0.72 0.042 84.5)
- OKLab
- oklab(0.72 0.004 0.042)
- CIE Lab
- lab(67.66 1.91 16.55)
- LCH
- lch(67.66 16.66 83.4)
- CMYK
- cmyk(0% 8% 24% 31%)
Tints · Shades · Tones
Tints
- B9AC93
- C0B59E
- C8BEAA
- D0C7B6
- D7D0C2
- DFD9CE
- E7E3DA
- EFECE6
- F7F6F3
Shades
- 998D75
- 837863
- 6C6351
- 574F41
- 423C31
- 2F2A21
- 1C1913
- 0C0A06
- 010101
Tones
- AC9F86
- A79C86
- A29885
- 9D9585
- 989184
- 938E83
- 8E8A82
- 8A8782
- 858381
Color harmonies
Complementary +180°
- B1A387
Curly Willow
- 98A5C0
≈ Veranda Iris
Analogous -30° +30°
- B1A387
Curly Willow
- BA9E8C
≈ Rogue Cowboy
- A4A88A
≈ Mountain Sage
Triadic +120° +240°
- B1A387
Curly Willow
- 86ADB1
≈ Bon Voyage
- B39CB4
≈ Pastel Purple
Split-complementary +150° +210°
- B1A387
Curly Willow
- 8CAABC
≈ Sky Eyes
- A6A0BD
≈ Fragrant Satchel
Tetradic +90° +180° +270°
- B1A387
Curly Willow
- 8AAEA3
≈ Sea Nymph
- 98A5C0
≈ Veranda Iris
- BB9AA6
≈ Pale Petticoat
Contrast & accessibility
Ag
FailOn white
WCAG 2.48:1 · APCA Lc 49
Ag
AAAOn black
WCAG 8.45:1 · APCA Lc 53
Best text color: #000000
WCAG 8.45:1 (AAA) · APCA Lc 53
Contrast pairs
Code snippets
CSS
:root {
--curly-willow: #b1a387;
--curly-willow-rgb: 177 163 135;
--curly-willow-oklch: oklch(0.72 0.042 84.5);
}
.element {
color: var(--curly-willow);
background-color: hsl(40 21% 61%);
border-color: oklch(0.72 0.042 84.5);
}Tailwind CSS v4
@theme {
--color-curly-willow: #b1a387;
--color-curly-willow-50: #faf5e8;
--color-curly-willow-100: #eee7d8;
--color-curly-willow-200: #dcd3c0;
--color-curly-willow-300: #c1b69f;
--color-curly-willow-400: #aa9d83;
--color-curly-willow-500: #938466;
--color-curly-willow-600: #7d7057;
--color-curly-willow-700: #645a45;
--color-curly-willow-800: #4a4132;
--color-curly-willow-900: #332d22;
--color-curly-willow-950: #1f1a11;
}SCSS
$curly-willow: #b1a387;
$curly-willow-rgb: 177, 163, 135;
$curly-willow-light: mix(#fff, $curly-willow, 20%);
$curly-willow-dark: mix(#000, $curly-willow, 20%);
.element {
color: $curly-willow;
box-shadow: 0 0 0 2px rgba($curly-willow, 0.35);
}