Named color · #6D4B3E
Fondue Fudge
Fondue Fudge is #6D4B3E: rgb(109 75 62), hsl(17 27% 34%), oklch(0.447 0.051 41.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Brown mean? → · Fondue Fudge color name →
#6D4B3E
oklch(0.447 0.051 41.8)
Color conversions
- HEX
- #6d4b3e
- RGB
- rgb(109 75 62)
- HSL
- hsl(17 27% 34%)
- HWB
- hwb(17 24% 57%)
- OKLCH
- oklch(0.447 0.051 41.8)
- OKLab
- oklab(0.447 0.038 0.034)
- CIE Lab
- lab(35.48 13.56 13.84)
- LCH
- lch(35.48 19.37 45.6)
- CMYK
- cmyk(0% 31% 43% 57%)
Tints · Shades · Tones
Tints
- 7B5B4F
- 896C61
- 987D73
- A68F86
- B4A199
- C3B3AD
- D2C6C1
- E1D8D5
- F0ECEA
Shades
- 5E4035
- 4F352B
- 412B23
- 33211A
- 261712
- 190E0A
- 0D0604
- 040201
- 010000
Tones
- 6F5044
- 71564B
- 735B51
- 756058
- 77655F
- 796B65
- 7B706C
- 7D7572
- 7E7B79
Color harmonies
Complementary +180°
- 6D4B3E
Fondue Fudge
- 325B69
≈ Night Shift
Analogous -30° +30°
- 6D4B3E
Fondue Fudge
- 6E494D
≈ Formal Maroon
- 665034
≈ Wild Chocolate
Triadic +120° +240°
- 6D4B3E
Fondue Fudge
- 395D4C
≈ Spectra
- 4F5170
≈ Independence
Split-complementary +150° +210°
- 6D4B3E
Fondue Fudge
- 2F5D5B
≈ Lacrosse
- 3F5670
≈ Champlain Blue
Tetradic +90° +180° +270°
- 6D4B3E
Fondue Fudge
- 4A5A3D
≈ Knarloc Green
- 325B69
≈ Night Shift
- 5E4C69
≈ Blackcurrant Elixir
Contrast & accessibility
Ag
AAAOn white
WCAG 7.70:1 · APCA Lc 87
Ag
FailOn black
WCAG 2.72:1 · APCA Lc 15
Best text color: #FFFFFF
WCAG 7.70:1 (AAA) · APCA Lc 87
Contrast pairs
Code snippets
CSS
:root {
--fondue-fudge: #6d4b3e;
--fondue-fudge-rgb: 109 75 62;
--fondue-fudge-oklch: oklch(0.447 0.051 41.8);
}
.element {
color: var(--fondue-fudge);
background-color: hsl(17 27% 34%);
border-color: oklch(0.447 0.051 41.8);
}Tailwind CSS v4
@theme {
--color-fondue-fudge: #6d4b3e;
--color-fondue-fudge-50: #fff1ea;
--color-fondue-fudge-100: #f8e3da;
--color-fondue-fudge-200: #e8cec3;
--color-fondue-fudge-300: #cfb0a3;
--color-fondue-fudge-400: #ba9587;
--color-fondue-fudge-500: #a47b6c;
--color-fondue-fudge-600: #8b695b;
--color-fondue-fudge-700: #6f5349;
--color-fondue-fudge-800: #523d35;
--color-fondue-fudge-900: #392a24;
--color-fondue-fudge-950: #241713;
}SCSS
$fondue-fudge: #6d4b3e;
$fondue-fudge-rgb: 109, 75, 62;
$fondue-fudge-light: mix(#fff, $fondue-fudge, 20%);
$fondue-fudge-dark: mix(#000, $fondue-fudge, 20%);
.element {
color: $fondue-fudge;
box-shadow: 0 0 0 2px rgba($fondue-fudge, 0.35);
}