Named color · #AD896A
Yearling
Yearling is #AD896A: rgb(173 137 106), hsl(28 29% 55%), oklch(0.656 0.062 62.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Yearling color name →
#AD896A
oklch(0.656 0.062 62.2)
Color conversions
- HEX
- #ad896a
- RGB
- rgb(173 137 106)
- HSL
- hsl(28 29% 55%)
- HWB
- hwb(28 42% 32%)
- OKLCH
- oklch(0.656 0.062 62.2)
- OKLab
- oklab(0.656 0.029 0.055)
- CIE Lab
- lab(59.98 10.98 22.15)
- LCH
- lch(59.98 24.72 63.6)
- CMYK
- cmyk(0% 21% 39% 32%)
Tints · Shades · Tones
Tints
- B59478
- BDA087
- C6AB95
- CEB7A4
- D6C3B3
- DECFC2
- E6DBD1
- EFE7E0
- F7F3EF
Shades
- 96765B
- 7F644D
- 6A533F
- 554231
- 413124
- 2D2218
- 1B140D
- 0B0704
- 010100
Tones
- A9886D
- A4876F
- A08771
- 9B8674
- 978576
- 928478
- 8E837A
- 89827C
- 85817E
Color harmonies
Complementary +180°
- AD896A
Yearling
- 7096B4
≈ Cranberry Blue
Analogous -30° +30°
- AD896A
Yearling
- B48479
≈ Brandy Rose
- 9E9065
≈ Willow Tree
Triadic +120° +240°
- AD896A
Yearling
- 659E94
≈ Treasure Isle
- 9888B1
≈ Flirty Pink
Split-complementary +150° +210°
- AD896A
Yearling
- 639CA7
≈ Echo One
- 848FB8
≈ Opal Violet
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 3.19:1 · APCA Lc 59
Ag
AAOn black
WCAG 6.56:1 · APCA Lc 43
Best text color: #000000
WCAG 6.56:1 (AA) · APCA Lc 43
Contrast pairs
Code snippets
CSS
:root {
--yearling: #ad896a;
--yearling-rgb: 173 137 106;
--yearling-oklch: oklch(0.656 0.062 62.2);
}
.element {
color: var(--yearling);
background-color: hsl(28 29% 55%);
border-color: oklch(0.656 0.062 62.2);
}Tailwind CSS v4
@theme {
--color-yearling: #ad896a;
--color-yearling-50: #fff2e3;
--color-yearling-100: #f7e4d3;
--color-yearling-200: #e8cfb9;
--color-yearling-300: #ceb197;
--color-yearling-400: #ba9779;
--color-yearling-500: #a47d5b;
--color-yearling-600: #8b6a4e;
--color-yearling-700: #6f553e;
--color-yearling-800: #523d2c;
--color-yearling-900: #392a1e;
--color-yearling-950: #24180e;
}SCSS
$yearling: #ad896a;
$yearling-rgb: 173, 137, 106;
$yearling-light: mix(#fff, $yearling, 20%);
$yearling-dark: mix(#000, $yearling, 20%);
.element {
color: $yearling;
box-shadow: 0 0 0 2px rgba($yearling, 0.35);
}