Named color · #50314C
Grimace
Grimace is #50314C: rgb(80 49 76), hsl(308 24% 25%), oklch(0.361 0.061 331.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Pink mean? → · Grimace color name →
#50314C
oklch(0.361 0.061 331.4)
Color conversions
- HEX
- #50314c
- RGB
- rgb(80 49 76)
- HSL
- hsl(308 24% 25%)
- HWB
- hwb(308 19% 69%)
- OKLCH
- oklch(0.361 0.061 331.4)
- OKLab
- oklab(0.361 0.054 -0.029)
- CIE Lab
- lab(25.03 18.1 -10.7)
- LCH
- lch(25.03 21.02 329.4)
- CMYK
- cmyk(0% 39% 5% 69%)
Tints · Shades · Tones
Tints
- 60435C
- 71566D
- 82697E
- 937D8F
- A492A1
- B6A7B3
- C8BCC6
- DAD2D9
- ECE8EC
Shades
- 442941
- 392236
- 2E1A2C
- 241322
- 1A0C18
- 10060F
- 070306
- 020102
- 000000
Tones
- 553951
- 5A4056
- 5F485B
- 645061
- 685866
- 6D606B
- 726870
- 777075
- 7B787B
Color harmonies
Complementary +180°
- 50314C
Grimace
- 23472D
≈ Zucchini
Analogous -30° +30°
- 50314C
Grimace
- 433558
≈ Devil’s Plum
- 582F3B
≈ Fig
Triadic +120° +240°
- 50314C
Grimace
- 493C12
≈ Xanthophobia
- 044650
≈ Midnight Green
Split-complementary +150° +210°
- 50314C
Grimace
- 38421B
≈ Ceylanite
- 08483F
≈ Tropical Forest
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
AAAOn white
WCAG 11.14:1 · APCA Lc 96
Ag
FailOn black
WCAG 1.88:1 · APCA Lc 0
Best text color: #FFFFFF
WCAG 11.14:1 (AAA) · APCA Lc 96
Contrast pairs
Code snippets
CSS
:root {
--grimace: #50314c;
--grimace-rgb: 80 49 76;
--grimace-oklch: oklch(0.361 0.061 331.4);
}
.element {
color: var(--grimace);
background-color: hsl(308 24% 25%);
border-color: oklch(0.361 0.061 331.4);
}Tailwind CSS v4
@theme {
--color-grimace: #50314c;
--color-grimace-50: #ffeffd;
--color-grimace-100: #f5e1f1;
--color-grimace-200: #e5cbdf;
--color-grimace-300: #cbacc5;
--color-grimace-400: #b492af;
--color-grimace-500: #9e7799;
--color-grimace-600: #866581;
--color-grimace-700: #6b5167;
--color-grimace-800: #4f3b4d;
--color-grimace-900: #372835;
--color-grimace-950: #211620;
}SCSS
$grimace: #50314c;
$grimace-rgb: 80, 49, 76;
$grimace-light: mix(#fff, $grimace, 20%);
$grimace-dark: mix(#000, $grimace, 20%);
.element {
color: $grimace;
box-shadow: 0 0 0 2px rgba($grimace, 0.35);
}