Named color · #673033
Voluptuous
Voluptuous is #673033: rgb(103 48 51), hsl(357 36% 30%), oklch(0.384 0.079 18.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Brown mean? → · Voluptuous color name →
#673033
oklch(0.384 0.079 18.1)
Color conversions
- HEX
- #673033
- RGB
- rgb(103 48 51)
- HSL
- hsl(357 36% 30%)
- HWB
- hwb(357 19% 60%)
- OKLCH
- oklch(0.384 0.079 18.1)
- OKLab
- oklab(0.384 0.075 0.025)
- CIE Lab
- lab(27.67 25.43 10.25)
- LCH
- lch(27.67 27.41 21.9)
- CMYK
- cmyk(0% 53% 50% 60%)
Tints · Shades · Tones
Tints
- 764345
- 865657
- 956A6B
- A47E7E
- B39393
- C2A7A7
- D2BDBD
- E1D2D2
- F0E9E8
Shades
- 59282B
- 4B2123
- 3D1A1C
- 301314
- 230C0D
- 170607
- 0C0303
- 040101
- 000000
Tones
- 6A383A
- 6E4042
- 714849
- 735051
- 765858
- 786060
- 7B6868
- 7D7070
- 7E7878
Color harmonies
Complementary +180°
- 673033
Voluptuous
- 004E50
≈ Antique Turquoise
Analogous -30° +30°
- 673033
Voluptuous
- 61304B
≈ Grape Wine
- 65351A
≈ Meatloaf
Triadic +120° +240°
- 673033
Voluptuous
- 2D4D21
≈ Chestnut Green
- 27436D
≈ Nightlife
Split-complementary +150° +210°
- 673033
Voluptuous
- 00503B
≈ Raspberry Leaf Green
- 004A63
≈ Stegadon Scale Green
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
AAAOn white
WCAG 10.25:1 · APCA Lc 93
Ag
FailOn black
WCAG 2.04:1 · APCA Lc 9
Best text color: #FFFFFF
WCAG 10.25:1 (AAA) · APCA Lc 93
Contrast pairs
Code snippets
CSS
:root {
--voluptuous: #673033;
--voluptuous-rgb: 103 48 51;
--voluptuous-oklch: oklch(0.384 0.079 18.1);
}
.element {
color: var(--voluptuous);
background-color: hsl(357 36% 30%);
border-color: oklch(0.384 0.079 18.1);
}Tailwind CSS v4
@theme {
--color-voluptuous: #673033;
--color-voluptuous-50: #ffedec;
--color-voluptuous-100: #ffdedd;
--color-voluptuous-200: #f5c8c6;
--color-voluptuous-300: #dda8a7;
--color-voluptuous-400: #c98c8d;
--color-voluptuous-500: #b57072;
--color-voluptuous-600: #995f61;
--color-voluptuous-700: #7a4c4d;
--color-voluptuous-800: #5b3739;
--color-voluptuous-900: #3f2627;
--color-voluptuous-950: #281415;
}SCSS
$voluptuous: #673033;
$voluptuous-rgb: 103, 48, 51;
$voluptuous-light: mix(#fff, $voluptuous, 20%);
$voluptuous-dark: mix(#000, $voluptuous, 20%);
.element {
color: $voluptuous;
box-shadow: 0 0 0 2px rgba($voluptuous, 0.35);
}