Named color · #564A33
Hóng Zōng Brown
Hóng Zōng Brown is #564A33: rgb(86 74 51), hsl(39 26% 27%), oklch(0.415 0.039 83.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Brown mean? → · Hóng Zōng Brown color name →
#564A33
oklch(0.415 0.039 83.3)
Color conversions
- HEX
- #564a33
- RGB
- rgb(86 74 51)
- HSL
- hsl(39 26% 27%)
- HWB
- hwb(39 20% 66%)
- OKLCH
- oklch(0.415 0.039 83.3)
- OKLab
- oklab(0.415 0.005 0.039)
- CIE Lab
- lab(32.21 2.42 15.72)
- LCH
- lch(32.21 15.91 81.2)
- CMYK
- cmyk(0% 14% 41% 66%)
Tints · Shades · Tones
Tints
- 655A45
- 756B58
- 857C6B
- 968E7F
- A7A093
- B8B2A8
- C9C5BD
- DBD8D3
- EDEBE9
Shades
- 4A3F2B
- 3E3523
- 322A1C
- 272014
- 1C170D
- 120E07
- 080603
- 020201
- 000000
Tones
- 5A4F3B
- 5E5542
- 625A4A
- 675F51
- 6B6559
- 6F6A61
- 736F68
- 777570
- 7C7A78
Color harmonies
Complementary +180°
- 564A33
Hóng Zōng Brown
- 414C61
≈ Luna Pier
Analogous -30° +30°
- 564A33
Hóng Zōng Brown
- 5D4638
≈ Carafe
- 4B4E35
≈ Waiouru
Triadic +120° +240°
- 564A33
Hóng Zōng Brown
- 315255
≈ Microwave Blue
- 564558
≈ Parma Violet
Split-complementary +150° +210°
- 564A33
Hóng Zōng Brown
- 36505E
≈ Velvet Evening
- 4C485F
≈ Violet Shadow
Tetradic +90° +180° +270°
- 564A33
Hóng Zōng Brown
- 35534A
≈ Hunter
- 414C61
≈ Luna Pier
- 5D434D
≈ Purple Basil
Contrast & accessibility
Ag
AAAOn white
WCAG 8.66:1 · APCA Lc 90
Ag
FailOn black
WCAG 2.42:1 · APCA Lc 13
Best text color: #FFFFFF
WCAG 8.66:1 (AAA) · APCA Lc 90
Contrast pairs
Code snippets
CSS
:root {
--hong-zong-brown: #564a33;
--hong-zong-brown-rgb: 86 74 51;
--hong-zong-brown-oklch: oklch(0.415 0.039 83.3);
}
.element {
color: var(--hong-zong-brown);
background-color: hsl(39 26% 27%);
border-color: oklch(0.415 0.039 83.3);
}Tailwind CSS v4
@theme {
--color-hong-zong-brown: #564a33;
--color-hong-zong-brown-50: #faf5e9;
--color-hong-zong-brown-100: #eee7da;
--color-hong-zong-brown-200: #dcd3c2;
--color-hong-zong-brown-300: #c0b6a1;
--color-hong-zong-brown-400: #aa9d85;
--color-hong-zong-brown-500: #938469;
--color-hong-zong-brown-600: #7c7059;
--color-hong-zong-brown-700: #635a47;
--color-hong-zong-brown-800: #494133;
--color-hong-zong-brown-900: #332d23;
--color-hong-zong-brown-950: #1f1a12;
}SCSS
$hong-zong-brown: #564a33;
$hong-zong-brown-rgb: 86, 74, 51;
$hong-zong-brown-light: mix(#fff, $hong-zong-brown, 20%);
$hong-zong-brown-dark: mix(#000, $hong-zong-brown, 20%);
.element {
color: $hong-zong-brown;
box-shadow: 0 0 0 2px rgba($hong-zong-brown, 0.35);
}