Named color · #FF3888
Raspberry Shortcake
Raspberry Shortcake is #FF3888: rgb(255 56 136), hsl(336 100% 61%), oklch(0.668 0.237 2.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Raspberry Shortcake color name →
#FF3888
oklch(0.668 0.237 2.5)
Color conversions
- HEX
- #ff3888
- RGB
- rgb(255 56 136)
- HSL
- hsl(336 100% 61%)
- HWB
- hwb(336 22% 0%)
- OKLCH
- oklch(0.668 0.237 2.5)
- OKLab
- oklab(0.668 0.236 0.01)
- CIE Lab
- lab(58.58 76.58 5.24)
- LCH
- lch(58.58 76.76 3.9)
- CMYK
- cmyk(0% 78% 47% 0%)
Tints · Shades · Tones
Tints
- FF5593
- FF6D9F
- FF82AA
- FF95B6
- FFA8C2
- FFBACE
- FFCBDA
- FFDDE6
- FFEEF3
Shades
- DE2F75
- BE2763
- 9E1F52
- 801741
- 630F31
- 480822
- 2E0413
- 160106
- 030001
Tones
- F44787
- E85286
- DC5B86
- D16385
- C46A84
- B86F83
- AB7482
- 9D7982
- 8F7D81
Color harmonies
Complementary +180°
- FF3888
Raspberry Shortcake
- 00AC9B
≈ Pool Green
Analogous -30° +30°
- FF3888
Raspberry Shortcake
- E34AD2
≈ Leo Royal Fuchsia
- FF4C2B
≈ Flame Angelfish
Triadic +120° +240°
- FF3888
Raspberry Shortcake
- 83A300
≈ Noxious
- 009DEE
≈ Out of the Blue
Split-complementary +150° +210°
- FF3888
Raspberry Shortcake
- 00B25D
≈ Future Hair
- 00A7BF
≈ Maui
Tetradic +90° +180° +270°
- FF3888
Raspberry Shortcake
- B29100
≈ Manure
- 00AC9B
≈ Pool Green
- 7289FF
≈ Punch Out Glove
Contrast & accessibility
Ag
FailOn white
WCAG 3.40:1 · APCA Lc 60
Ag
AAOn black
WCAG 6.17:1 · APCA Lc 42
Best text color: #000000
WCAG 6.17:1 (AA) · APCA Lc 42
Contrast pairs
Code snippets
CSS
:root {
--raspberry-shortcake: #ff3888;
--raspberry-shortcake-rgb: 255 56 136;
--raspberry-shortcake-oklch: oklch(0.668 0.237 2.5);
}
.element {
color: var(--raspberry-shortcake);
background-color: hsl(336 100% 61%);
border-color: oklch(0.668 0.237 2.5);
}Tailwind CSS v4
@theme {
--color-raspberry-shortcake: #ff3888;
--color-raspberry-shortcake-50: #ffd9ed;
--color-raspberry-shortcake-100: #ffc6de;
--color-raspberry-shortcake-200: #ffa7c8;
--color-raspberry-shortcake-300: #ff7ca8;
--color-raspberry-shortcake-400: #ff4e92;
--color-raspberry-shortcake-500: #f50079;
--color-raspberry-shortcake-600: #cf0066;
--color-raspberry-shortcake-700: #a70052;
--color-raspberry-shortcake-800: #7c003e;
--color-raspberry-shortcake-900: #58032b;
--color-raspberry-shortcake-950: #3b0018;
}SCSS
$raspberry-shortcake: #ff3888;
$raspberry-shortcake-rgb: 255, 56, 136;
$raspberry-shortcake-light: mix(#fff, $raspberry-shortcake, 20%);
$raspberry-shortcake-dark: mix(#000, $raspberry-shortcake, 20%);
.element {
color: $raspberry-shortcake;
box-shadow: 0 0 0 2px rgba($raspberry-shortcake, 0.35);
}