Named color · #AD5F28
Plaguelands Hazel
Plaguelands Hazel is #AD5F28: rgb(173 95 40), hsl(25 62% 42%), oklch(0.567 0.122 52.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Brown mean? → · Plaguelands Hazel color name →
#AD5F28
oklch(0.567 0.122 52.4)
Color conversions
- HEX
- #ad5f28
- RGB
- rgb(173 95 40)
- HSL
- hsl(25 62% 42%)
- HWB
- hwb(25 16% 32%)
- OKLCH
- oklch(0.567 0.122 52.4)
- OKLab
- oklab(0.567 0.074 0.096)
- CIE Lab
- lab(49.04 29.42 44.39)
- LCH
- lch(49.04 53.25 56.5)
- CMYK
- cmyk(0% 45% 77% 32%)
Tints · Shades · Tones
Tints
- B66F40
- BF7F56
- C88F6B
- D09E80
- D9AE95
- E1BEAA
- E9CEBF
- F0DED4
- F8EFE9
Shades
- 965221
- 7F441B
- 6A3815
- 552C0F
- 412009
- 2D1504
- 1B0A02
- 0B0301
- 010000
Tones
- A96334
- A5673F
- A16B48
- 9D6E51
- 99715A
- 947562
- 8F7869
- 8B7B71
- 857D79
Color harmonies
Complementary +180°
- AD5F28
Plaguelands Hazel
- 0081AF
≈ Tusche Blue
Analogous -30° +30°
- AD5F28
Plaguelands Hazel
- B35655
≈ Mineral Red
- 986E00
≈ Sandy Taupe
Triadic +120° +240°
- AD5F28
Plaguelands Hazel
- 008B6F
≈ Carolina Green
- 7967B7
≈ Ultra Violet
Split-complementary +150° +210°
- AD5F28
Plaguelands Hazel
- 00878F
≈ Ocean Soul
- 4E74BE
≈ Diva Violet
Tetradic +90° +180° +270°
- AD5F28
Plaguelands Hazel
- 488843
≈ Beating Around the Bush
- 0081AF
≈ Tusche Blue
- 985CA0
≈ Heath Spotted Orchid
Contrast & accessibility
Ag
AAOn white
WCAG 4.72:1 · APCA Lc 72
Ag
FailOn black
WCAG 4.44:1 · APCA Lc 29
Best text color: #FFFFFF
WCAG 4.72:1 (AA) · APCA Lc 72
Contrast pairs
Code snippets
CSS
:root {
--plaguelands-hazel: #ad5f28;
--plaguelands-hazel-rgb: 173 95 40;
--plaguelands-hazel-oklch: oklch(0.567 0.122 52.4);
}
.element {
color: var(--plaguelands-hazel);
background-color: hsl(25 62% 42%);
border-color: oklch(0.567 0.122 52.4);
}Tailwind CSS v4
@theme {
--color-plaguelands-hazel: #ad5f28;
--color-plaguelands-hazel-50: #ffedd5;
--color-plaguelands-hazel-100: #ffdec2;
--color-plaguelands-hazel-200: #fec7a3;
--color-plaguelands-hazel-300: #e8a77b;
--color-plaguelands-hazel-400: #d78957;
--color-plaguelands-hazel-500: #c46c2e;
--color-plaguelands-hazel-600: #a55c29;
--color-plaguelands-hazel-700: #854920;
--color-plaguelands-hazel-800: #633417;
--color-plaguelands-hazel-900: #46240f;
--color-plaguelands-hazel-950: #2d1203;
}SCSS
$plaguelands-hazel: #ad5f28;
$plaguelands-hazel-rgb: 173, 95, 40;
$plaguelands-hazel-light: mix(#fff, $plaguelands-hazel, 20%);
$plaguelands-hazel-dark: mix(#000, $plaguelands-hazel, 20%);
.element {
color: $plaguelands-hazel;
box-shadow: 0 0 0 2px rgba($plaguelands-hazel, 0.35);
}