Named color · #6B5947
Chocolate Diamonds
Chocolate Diamonds is #6B5947: rgb(107 89 71), hsl(30 20% 35%), oklch(0.477 0.036 66.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Brown mean? → · Chocolate Diamonds color name →
#6B5947
oklch(0.477 0.036 66.8)
Color conversions
- HEX
- #6b5947
- RGB
- rgb(107 89 71)
- HSL
- hsl(30 20% 35%)
- HWB
- hwb(30 28% 58%)
- OKLCH
- oklch(0.477 0.036 66.8)
- OKLab
- oklab(0.477 0.014 0.033)
- CIE Lab
- lab(39.27 5.45 13.35)
- LCH
- lch(39.27 14.42 67.8)
- CMYK
- cmyk(0% 17% 34% 58%)
Tints · Shades · Tones
Tints
- 796858
- 877869
- 95887A
- A4988C
- B2A89F
- C1B9B1
- D1CAC4
- E0DCD7
- EFEDEB
Shades
- 5C4C3D
- 4E4032
- 3F3428
- 32281F
- 251D16
- 18130D
- 0D0906
- 040302
- 000000
Tones
- 6D5D4D
- 6F6152
- 716558
- 74685E
- 766C63
- 787069
- 7A746F
- 7C7874
- 7E7C7A
Color harmonies
Complementary +180°
- 6B5947
Chocolate Diamonds
- 4C5F70
≈ Trekking Blue
Analogous -30° +30°
- 6B5947
Chocolate Diamonds
- 70564E
≈ Piney Wood
- 625D46
≈ Crushed Oregano
Triadic +120° +240°
- 6B5947
Chocolate Diamonds
- 456460
≈ Brochantite Green
- 62586D
≈ Darkest Grape
Split-complementary +150° +210°
- 6B5947
Chocolate Diamonds
- 45626A
≈ Tempe Star
- 575B72
≈ Agate Violet
Tetradic +90° +180° +270°
- 6B5947
Chocolate Diamonds
- 4C6354
≈ Mineral Green
- 4C5F70
≈ Trekking Blue
- 6B5564
≈ Earth Brown Violet
Contrast & accessibility
Ag
AAOn white
WCAG 6.67:1 · APCA Lc 83
Ag
FailOn black
WCAG 3.14:1 · APCA Lc 19
Best text color: #FFFFFF
WCAG 6.67:1 (AA) · APCA Lc 83
Contrast pairs
Code snippets
CSS
:root {
--chocolate-diamonds: #6b5947;
--chocolate-diamonds-rgb: 107 89 71;
--chocolate-diamonds-oklch: oklch(0.477 0.036 66.8);
}
.element {
color: var(--chocolate-diamonds);
background-color: hsl(30 20% 35%);
border-color: oklch(0.477 0.036 66.8);
}Tailwind CSS v4
@theme {
--color-chocolate-diamonds: #6b5947;
--color-chocolate-diamonds-50: #fcf3ea;
--color-chocolate-diamonds-100: #f0e6db;
--color-chocolate-diamonds-200: #dfd2c4;
--color-chocolate-diamonds-300: #c4b4a4;
--color-chocolate-diamonds-400: #ae9b88;
--color-chocolate-diamonds-500: #97826d;
--color-chocolate-diamonds-600: #806e5c;
--color-chocolate-diamonds-700: #66584a;
--color-chocolate-diamonds-800: #4b4035;
--color-chocolate-diamonds-900: #342c24;
--color-chocolate-diamonds-950: #201913;
}SCSS
$chocolate-diamonds: #6b5947;
$chocolate-diamonds-rgb: 107, 89, 71;
$chocolate-diamonds-light: mix(#fff, $chocolate-diamonds, 20%);
$chocolate-diamonds-dark: mix(#000, $chocolate-diamonds, 20%);
.element {
color: $chocolate-diamonds;
box-shadow: 0 0 0 2px rgba($chocolate-diamonds, 0.35);
}