Named color · #884400
Chocolate Pancakes
Chocolate Pancakes is #884400: rgb(136 68 0), hsl(30 100% 27%), oklch(0.464 0.115 55.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Brown mean? → · Chocolate Pancakes color name →
#884400
oklch(0.464 0.115 55.2)
Color conversions
- HEX
- #884400
- RGB
- rgb(136 68 0)
- HSL
- hsl(30 100% 27%)
- HWB
- hwb(30 0% 47%)
- OKLCH
- oklch(0.464 0.115 55.2)
- OKLab
- oklab(0.464 0.065 0.094)
- CIE Lab
- lab(37.15 27.01 47.23)
- LCH
- lch(37.15 54.41 60.2)
- CMYK
- cmyk(0% 50% 100% 47%)
Tints · Shades · Tones
Tints
- 955626
- A16840
- AD7B58
- B98D6F
- C59F86
- D1B29E
- DDC5B5
- E8D8CE
- F4EBE6
Shades
- 753A00
- 633000
- 522600
- 411D00
- 311400
- 220C00
- 130500
- 060200
- 010000
Tones
- 884B19
- 885129
- 885835
- 875E41
- 87644C
- 866A57
- 856F61
- 83756C
- 827A76
Color harmonies
Complementary +180°
- 884400
Chocolate Pancakes
- 006188
≈ Ink Blotch
Analogous -30° +30°
- 884400
Chocolate Pancakes
- 8E3B37
≈ Red Blooded
- 715400
≈ Pickled Grape Leaves
Triadic +120° +240°
- 884400
Chocolate Pancakes
- 006956
≈ Chrysocolla Medium Green
- 5F4991
≈ Purple Corallite
Split-complementary +150° +210°
- 884400
Chocolate Pancakes
- 00656E
≈ Wakame Green
- 395599
≈ Muted Lavender
Tetradic +90° +180° +270°
- 884400
Chocolate Pancakes
- 26692D
≈ Radical Green
- 006188
≈ Ink Blotch
- 78407C
≈ Nightly Violet
Contrast & accessibility
Ag
AAAOn white
WCAG 7.30:1 · APCA Lc 85
Ag
FailOn black
WCAG 2.87:1 · APCA Lc 17
Best text color: #FFFFFF
WCAG 7.30:1 (AAA) · APCA Lc 85
Contrast pairs
Code snippets
CSS
:root {
--chocolate-pancakes: #884400;
--chocolate-pancakes-rgb: 136 68 0;
--chocolate-pancakes-oklch: oklch(0.464 0.115 55.2);
}
.element {
color: var(--chocolate-pancakes);
background-color: hsl(30 100% 27%);
border-color: oklch(0.464 0.115 55.2);
}Tailwind CSS v4
@theme {
--color-chocolate-pancakes: #884400;
--color-chocolate-pancakes-50: #ffeed6;
--color-chocolate-pancakes-100: #ffdfc3;
--color-chocolate-pancakes-200: #fbc9a5;
--color-chocolate-pancakes-300: #e5a97d;
--color-chocolate-pancakes-400: #d28c59;
--color-chocolate-pancakes-500: #bf6f31;
--color-chocolate-pancakes-600: #a15e2b;
--color-chocolate-pancakes-700: #824b22;
--color-chocolate-pancakes-800: #613618;
--color-chocolate-pancakes-900: #442510;
--color-chocolate-pancakes-950: #2c1303;
}SCSS
$chocolate-pancakes: #884400;
$chocolate-pancakes-rgb: 136, 68, 0;
$chocolate-pancakes-light: mix(#fff, $chocolate-pancakes, 20%);
$chocolate-pancakes-dark: mix(#000, $chocolate-pancakes, 20%);
.element {
color: $chocolate-pancakes;
box-shadow: 0 0 0 2px rgba($chocolate-pancakes, 0.35);
}