Named color · #704A3A
Cappuccino
Cappuccino is #704A3A: rgb(112 74 58), hsl(18 32% 33%), oklch(0.448 0.058 43.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Brown mean? → · Cappuccino color name →
#704A3A
oklch(0.448 0.058 43.6)
Color conversions
- HEX
- #704a3a
- RGB
- rgb(112 74 58)
- HSL
- hsl(18 32% 33%)
- HWB
- hwb(18 23% 56%)
- OKLCH
- oklch(0.448 0.058 43.6)
- OKLab
- oklab(0.448 0.042 0.04)
- CIE Lab
- lab(35.54 15.15 16.47)
- LCH
- lch(35.54 22.38 47.4)
- CMYK
- cmyk(0% 34% 48% 56%)
Tints · Shades · Tones
Tints
- 7E5B4C
- 8C6B5E
- 9A7D71
- A88E84
- B6A097
- C5B3AB
- D3C5C0
- E2D8D4
- F0ECEA
Shades
- 603F31
- 513528
- 432A20
- 352018
- 271710
- 1A0E09
- 0E0604
- 040201
- 010000
Tones
- 724F41
- 745548
- 765A4F
- 776056
- 79655D
- 7B6A64
- 7C706B
- 7E7572
- 7F7B79
Color harmonies
Complementary +180°
- 704A3A
Cappuccino
- 2C5C6C
≈ Night Shift
Analogous -30° +30°
- 704A3A
Cappuccino
- 71474B
≈ Formal Maroon
- 68502F
≈ Wild Chocolate
Triadic +120° +240°
- 704A3A
Cappuccino
- 345F4C
≈ Wine Leaf
- 505074
≈ Provocative
Split-complementary +150° +210°
- 704A3A
Cappuccino
- 275F5E
≈ Verdant Forest
- 3E5674
≈ Champlain Blue
Tetradic +90° +180° +270°
- 704A3A
Cappuccino
- 475C3A
≈ Stinging Nettle
- 2C5C6C
≈ Night Shift
- 604B6B
≈ Loganberry
Contrast & accessibility
Ag
AAAOn white
WCAG 7.69:1 · APCA Lc 87
Ag
FailOn black
WCAG 2.72:1 · APCA Lc 15
Best text color: #FFFFFF
WCAG 7.69:1 (AAA) · APCA Lc 87
Contrast pairs
Code snippets
CSS
:root {
--cappuccino: #704a3a;
--cappuccino-rgb: 112 74 58;
--cappuccino-oklch: oklch(0.448 0.058 43.6);
}
.element {
color: var(--cappuccino);
background-color: hsl(18 32% 33%);
border-color: oklch(0.448 0.058 43.6);
}Tailwind CSS v4
@theme {
--color-cappuccino: #704a3a;
--color-cappuccino-50: #fff0e8;
--color-cappuccino-100: #f9e2d8;
--color-cappuccino-200: #ebcdc0;
--color-cappuccino-300: #d2af9f;
--color-cappuccino-400: #bd9483;
--color-cappuccino-500: #a87a67;
--color-cappuccino-600: #8e6757;
--color-cappuccino-700: #725346;
--color-cappuccino-800: #543c33;
--color-cappuccino-900: #3b2922;
--color-cappuccino-950: #251712;
}SCSS
$cappuccino: #704a3a;
$cappuccino-rgb: 112, 74, 58;
$cappuccino-light: mix(#fff, $cappuccino, 20%);
$cappuccino-dark: mix(#000, $cappuccino, 20%);
.element {
color: $cappuccino;
box-shadow: 0 0 0 2px rgba($cappuccino, 0.35);
}