Named color · #7D6A58
Downtown Benny Brown
Downtown Benny Brown is #7D6A58: rgb(125 106 88), hsl(29 17% 42%), oklch(0.537 0.036 65.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Brown mean? → · Downtown Benny Brown color name →
#7D6A58
oklch(0.537 0.036 65.4)
Color conversions
- HEX
- #7d6a58
- RGB
- rgb(125 106 88)
- HSL
- hsl(29 17% 42%)
- HWB
- hwb(29 35% 51%)
- OKLCH
- oklch(0.537 0.036 65.4)
- OKLab
- oklab(0.537 0.015 0.033)
- CIE Lab
- lab(46.29 5.61 13.09)
- LCH
- lch(46.29 14.24 66.8)
- CMYK
- cmyk(0% 15% 30% 51%)
Tints · Shades · Tones
Tints
- 897867
- 968677
- A29487
- AFA397
- BCB2A8
- C9C1B9
- D7D0CA
- E4E0DB
- F1EFED
Shades
- 6C5B4B
- 5B4D3F
- 4B3F33
- 3B3128
- 2C241D
- 1E1812
- 110D09
- 050403
- 010000
Tones
- 7D6C5C
- 7E6E60
- 7E7164
- 7E7368
- 7F756C
- 7F7770
- 7F7974
- 807C78
- 807E7C
Color harmonies
Complementary +180°
- 7D6A58
Downtown Benny Brown
- 5D7182
≈ Glide Time
Analogous -30° +30°
- 7D6A58
Downtown Benny Brown
- 826760
≈ Pharlap
- 746E56
≈ Priory
Triadic +120° +240°
- 7D6A58
Downtown Benny Brown
- 567571
≈ Sagebrush Green
- 73697F
≈ Purple Sage
Split-complementary +150° +210°
- 7D6A58
Downtown Benny Brown
- 56747B
≈ Blue Sage
- 686D83
≈ Great Grape
Tetradic +90° +180° +270°
- 7D6A58
Downtown Benny Brown
- 5E7565
≈ Brookside
- 5D7182
≈ Glide Time
- 7C6676
≈ Old Lavender
Contrast & accessibility
Ag
AAOn white
WCAG 5.15:1 · APCA Lc 76
Ag
FailOn black
WCAG 4.07:1 · APCA Lc 26
Best text color: #FFFFFF
WCAG 5.15:1 (AA) · APCA Lc 76
Contrast pairs
Code snippets
CSS
:root {
--downtown-benny-brown: #7d6a58;
--downtown-benny-brown-rgb: 125 106 88;
--downtown-benny-brown-oklch: oklch(0.537 0.036 65.4);
}
.element {
color: var(--downtown-benny-brown);
background-color: hsl(29 17% 42%);
border-color: oklch(0.537 0.036 65.4);
}Tailwind CSS v4
@theme {
--color-downtown-benny-brown: #7d6a58;
--color-downtown-benny-brown-50: #fcf3ea;
--color-downtown-benny-brown-100: #f0e6db;
--color-downtown-benny-brown-200: #dfd2c4;
--color-downtown-benny-brown-300: #c4b4a4;
--color-downtown-benny-brown-400: #ae9b88;
--color-downtown-benny-brown-500: #97826d;
--color-downtown-benny-brown-600: #806e5d;
--color-downtown-benny-brown-700: #66584a;
--color-downtown-benny-brown-800: #4c4036;
--color-downtown-benny-brown-900: #352c24;
--color-downtown-benny-brown-950: #201913;
}SCSS
$downtown-benny-brown: #7d6a58;
$downtown-benny-brown-rgb: 125, 106, 88;
$downtown-benny-brown-light: mix(#fff, $downtown-benny-brown, 20%);
$downtown-benny-brown-dark: mix(#000, $downtown-benny-brown, 20%);
.element {
color: $downtown-benny-brown;
box-shadow: 0 0 0 2px rgba($downtown-benny-brown, 0.35);
}