Named color · #8E4541
Cranberry Whip
Cranberry Whip is #8E4541: rgb(142 69 65), hsl(3 37% 41%), oklch(0.482 0.1 24.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Cranberry Whip color name →
#8E4541
oklch(0.482 0.1 24.7)
Color conversions
- HEX
- #8e4541
- RGB
- rgb(142 69 65)
- HSL
- hsl(3 37% 41%)
- HWB
- hwb(3 25% 44%)
- OKLCH
- oklch(0.482 0.1 24.7)
- OKLab
- oklab(0.482 0.091 0.042)
- CIE Lab
- lab(38.91 31.3 17.56)
- LCH
- lch(38.91 35.89 29.3)
- CMYK
- cmyk(0% 51% 54% 44%)
Tints · Shades · Tones
Tints
- 9A5752
- A66964
- B27B76
- BE8D89
- C99F9B
- D4B2AF
- DFC5C2
- EAD8D6
- F5EBEA
Shades
- 7B3B37
- 68312E
- 562725
- 441E1C
- 341513
- 240C0B
- 150505
- 070201
- 010000
Tones
- 8E4C47
- 8D524E
- 8C5854
- 8B5E5A
- 8A6460
- 886A67
- 876F6D
- 857573
- 837A7A
Color harmonies
Complementary +180°
- 8E4541
Cranberry Whip
- 006B74
≈ Toadstool Teal
Analogous -30° +30°
- 8E4541
Cranberry Whip
- 894461
≈ Redcurrant
- 884D1F
≈ Plane Brown
Triadic +120° +240°
- 8E4541
Cranberry Whip
- 366D38
≈ Arcala Green
- 425C96
≈ Integra
Split-complementary +150° +210°
- 8E4541
Cranberry Whip
- 006E5B
≈ Teal Dark Green
- 06668E
≈ Pulsating Blue
Tetradic +90° +180° +270°
- 8E4541
Cranberry Whip
- 5D6414
≈ Kirchner Green
- 006B74
≈ Toadstool Teal
- 625190
≈ Fine Purple
Contrast & accessibility
Ag
AAOn white
WCAG 6.82:1 · APCA Lc 83
Ag
FailOn black
WCAG 3.07:1 · APCA Lc 19
Best text color: #FFFFFF
WCAG 6.82:1 (AA) · APCA Lc 83
Contrast pairs
Code snippets
CSS
:root {
--cranberry-whip: #8e4541;
--cranberry-whip-rgb: 142 69 65;
--cranberry-whip-oklch: oklch(0.482 0.1 24.7);
}
.element {
color: var(--cranberry-whip);
background-color: hsl(3 37% 41%);
border-color: oklch(0.482 0.1 24.7);
}Tailwind CSS v4
@theme {
--color-cranberry-whip: #8e4541;
--color-cranberry-whip-50: #ffebe6;
--color-cranberry-whip-100: #ffdcd6;
--color-cranberry-whip-200: #fcc5be;
--color-cranberry-whip-300: #e6a49c;
--color-cranberry-whip-400: #d38781;
--color-cranberry-whip-500: #bf6a64;
--color-cranberry-whip-600: #a25a55;
--color-cranberry-whip-700: #824844;
--color-cranberry-whip-800: #603432;
--color-cranberry-whip-900: #442322;
--color-cranberry-whip-950: #2b1211;
}SCSS
$cranberry-whip: #8e4541;
$cranberry-whip-rgb: 142, 69, 65;
$cranberry-whip-light: mix(#fff, $cranberry-whip, 20%);
$cranberry-whip-dark: mix(#000, $cranberry-whip, 20%);
.element {
color: $cranberry-whip;
box-shadow: 0 0 0 2px rgba($cranberry-whip, 0.35);
}