Named color · #655E4E
Boulder Brown
Boulder Brown is #655E4E: rgb(101 94 78), hsl(42 13% 35%), oklch(0.484 0.026 87.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Boulder Brown color name →
#655E4E
oklch(0.484 0.026 87.2)
Color conversions
- HEX
- #655e4e
- RGB
- rgb(101 94 78)
- HSL
- hsl(42 13% 35%)
- HWB
- hwb(42 31% 60%)
- OKLCH
- oklch(0.484 0.026 87.2)
- OKLab
- oklab(0.484 0.001 0.026)
- CIE Lab
- lab(40.22 0.74 10.28)
- LCH
- lch(40.22 10.31 85.9)
- CMYK
- cmyk(0% 7% 23% 60%)
Tints · Shades · Tones
Tints
- 736D5E
- 827C6F
- 908B7F
- A09B91
- AFABA2
- BEBBB4
- CECCC6
- DEDDD9
- EFEEEC
Shades
- 575143
- 494438
- 3C372D
- 2F2B23
- 221F19
- 17140F
- 0C0A07
- 030302
- 000000
Tones
- 686153
- 6A6558
- 6D685D
- 706B62
- 726F67
- 75726C
- 787671
- 7B7976
- 7D7D7B
Color harmonies
Complementary +180°
- 655E4E
Boulder Brown
- 585F6E
≈ Suede Indigo
Analogous -30° +30°
- 655E4E
Boulder Brown
- 6B5B50
≈ Ageing Barrel
- 5D6150
≈ Stump Green
Triadic +120° +240°
- 655E4E
Boulder Brown
- 4E6366
≈ Wellington
- 675A66
≈ Patina Violet
Split-complementary +150° +210°
- 655E4E
Boulder Brown
- 51616C
≈ Wellerman
- 605C6C
≈ Smoky
Tetradic +90° +180° +270°
- 655E4E
Boulder Brown
- 4F645E
≈ Blue Fir
- 585F6E
≈ Suede Indigo
- 6C595F
≈ Aubergine Grey
Contrast & accessibility
Ag
AAOn white
WCAG 6.43:1 · APCA Lc 82
Ag
FailOn black
WCAG 3.26:1 · APCA Lc 20
Best text color: #FFFFFF
WCAG 6.43:1 (AA) · APCA Lc 82
Contrast pairs
Code snippets
CSS
:root {
--boulder-brown: #655e4e;
--boulder-brown-rgb: 101 94 78;
--boulder-brown-oklch: oklch(0.484 0.026 87.2);
}
.element {
color: var(--boulder-brown);
background-color: hsl(42 13% 35%);
border-color: oklch(0.484 0.026 87.2);
}Tailwind CSS v4
@theme {
--color-boulder-brown: #655e4e;
--color-boulder-brown-50: #f8f5ed;
--color-boulder-brown-100: #ebe8de;
--color-boulder-brown-200: #d9d4c8;
--color-boulder-brown-300: #bdb7a9;
--color-boulder-brown-400: #a59e8d;
--color-boulder-brown-500: #8e8573;
--color-boulder-brown-600: #787161;
--color-boulder-brown-700: #605a4e;
--color-boulder-brown-800: #464238;
--color-boulder-brown-900: #312d26;
--color-boulder-brown-950: #1d1a15;
}SCSS
$boulder-brown: #655e4e;
$boulder-brown-rgb: 101, 94, 78;
$boulder-brown-light: mix(#fff, $boulder-brown, 20%);
$boulder-brown-dark: mix(#000, $boulder-brown, 20%);
.element {
color: $boulder-brown;
box-shadow: 0 0 0 2px rgba($boulder-brown, 0.35);
}