Named color · #FF6FFC
Strawberry Frosting
Strawberry Frosting is #FF6FFC: rgb(255 111 252), hsl(301 100% 72%), oklch(0.765 0.237 328.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Strawberry Frosting color name →
#FF6FFC
oklch(0.765 0.237 328.4)
Color conversions
- HEX
- #ff6ffc
- RGB
- rgb(255 111 252)
- HSL
- hsl(301 100% 72%)
- HWB
- hwb(301 44% 0%)
- OKLCH
- oklch(0.765 0.237 328.4)
- OKLab
- oklab(0.765 0.202 -0.124)
- CIE Lab
- lab(69.14 68.36 -44.71)
- LCH
- lch(69.14 81.68 326.8)
- CMYK
- cmyk(0% 56% 1% 0%)
Tints · Shades · Tones
Tints
- FF80FD
- FF90FE
- FFA0FF
- FFAEFF
- FFBCFF
- FFCAFF
- FFD8FF
- FFE5FF
- FFF2FF
Shades
- DE60DB
- BE51BB
- 9E429C
- 80347E
- 632762
- 481A47
- 2E0E2D
- 160416
- 030103
Tones
- F373EF
- E677E3
- DA7AD6
- CD7CCA
- C17EBE
- B47FB1
- A780A5
- 9A8099
- 8D808C
Color harmonies
Complementary +180°
- FF6FFC
Strawberry Frosting
- 00D65A
≈ Brazilianite
Analogous -30° +30°
- FF6FFC
Strawberry Frosting
- BE9EFF
≈ Diva
- FF85B1
≈ Informative Pink
Triadic +120° +240°
- FF6FFC
Strawberry Frosting
- DBAB00
≈ Chinese Gold
- 00C9DF
≈ Picnic Day Sky
Split-complementary +150° +210°
- FF6FFC
Strawberry Frosting
- A9C100
≈ Bahia
- 00CFB3
≈ Mint Leaf
Tetradic +90° +180° +270°
- FF6FFC
Strawberry Frosting
- FF942E
≈ Energy Orange
- 00D65A
≈ Brazilianite
- 50BEFF
≈ Hello Summer
Contrast & accessibility
Ag
FailOn white
WCAG 2.35:1 · APCA Lc 46
Ag
AAAOn black
WCAG 8.93:1 · APCA Lc 56
Best text color: #000000
WCAG 8.93:1 (AAA) · APCA Lc 56
Contrast pairs
Code snippets
CSS
:root {
--strawberry-frosting: #ff6ffc;
--strawberry-frosting-rgb: 255 111 252;
--strawberry-frosting-oklch: oklch(0.765 0.237 328.4);
}
.element {
color: var(--strawberry-frosting);
background-color: hsl(301 100% 72%);
border-color: oklch(0.765 0.237 328.4);
}Tailwind CSS v4
@theme {
--color-strawberry-frosting: #ff6ffc;
--color-strawberry-frosting-50: #ffddff;
--color-strawberry-frosting-100: #ffcbff;
--color-strawberry-frosting-200: #ffaeff;
--color-strawberry-frosting-300: #f985ef;
--color-strawberry-frosting-400: #e55ee2;
--color-strawberry-frosting-500: #d22ad2;
--color-strawberry-frosting-600: #b227b1;
--color-strawberry-frosting-700: #8f208e;
--color-strawberry-frosting-800: #69166c;
--color-strawberry-frosting-900: #4a0e4c;
--color-strawberry-frosting-950: #300132;
}SCSS
$strawberry-frosting: #ff6ffc;
$strawberry-frosting-rgb: 255, 111, 252;
$strawberry-frosting-light: mix(#fff, $strawberry-frosting, 20%);
$strawberry-frosting-dark: mix(#000, $strawberry-frosting, 20%);
.element {
color: $strawberry-frosting;
box-shadow: 0 0 0 2px rgba($strawberry-frosting, 0.35);
}