Named color · #F29EAB
Sweet 60
Sweet 60 is #F29EAB: rgb(242 158 171), hsl(351 76% 78%), oklch(0.786 0.101 9.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Sweet 60 color name →
#F29EAB
oklch(0.786 0.101 9.5)
Color conversions
- HEX
- #f29eab
- RGB
- rgb(242 158 171)
- HSL
- hsl(351 76% 78%)
- HWB
- hwb(351 62% 5%)
- OKLCH
- oklch(0.786 0.101 9.5)
- OKLab
- oklab(0.786 0.1 0.017)
- CIE Lab
- lab(74.02 33.35 6.91)
- LCH
- lch(74.02 34.06 11.7)
- CMYK
- cmyk(0% 35% 29% 5%)
Tints · Shades · Tones
Tints
- F4A8B3
- F6B2BB
- F8BBC4
- FAC5CC
- FBCFD4
- FCD8DD
- FDE2E5
- FEECEE
- FFF5F6
Shades
- D28994
- B4747E
- 966068
- 794D54
- 5E3A40
- 43292D
- 2B181B
- 14090B
- 030101
Tones
- E79BA7
- DB98A2
- D0969E
- C4939A
- B99095
- AE8D91
- A28A8D
- 978688
- 8C8384
Color harmonies
Complementary +180°
- F29EAB
Sweet 60
- 61CEC7
≈ Setting Sail
Analogous -30° +30°
- F29EAB
Sweet 60
- E5A0CE
≈ Exotic Violet
- F2A388
≈ Creamy Peach
Triadic +120° +240°
- F29EAB
Sweet 60
- A4C780
≈ Opaline Green
- 86BFF8
≈ Electric Eel
Split-complementary +150° +210°
- F29EAB
Sweet 60
- 7DCEA2
≈ Crystal Gem
- 66C9E6
≈ Hawaiian Breeze
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 2.04:1 · APCA Lc 40
Ag
AAAOn black
WCAG 10.25:1 · APCA Lc 63
Best text color: #000000
WCAG 10.25:1 (AAA) · APCA Lc 63
Contrast pairs
Code snippets
CSS
:root {
--sweet-60: #f29eab;
--sweet-60-rgb: 242 158 171;
--sweet-60-oklch: oklch(0.786 0.101 9.5);
}
.element {
color: var(--sweet-60);
background-color: hsl(351 76% 78%);
border-color: oklch(0.786 0.101 9.5);
}Tailwind CSS v4
@theme {
--color-sweet-60: #f29eab;
--color-sweet-60-50: #ffeaee;
--color-sweet-60-100: #ffdbdf;
--color-sweet-60-200: #fcc3c9;
--color-sweet-60-300: #e6a2aa;
--color-sweet-60-400: #d28591;
--color-sweet-60-500: #bf6877;
--color-sweet-60-600: #a15865;
--color-sweet-60-700: #814651;
--color-sweet-60-800: #60333c;
--color-sweet-60-900: #432229;
--color-sweet-60-950: #2b1117;
}SCSS
$sweet-60: #f29eab;
$sweet-60-rgb: 242, 158, 171;
$sweet-60-light: mix(#fff, $sweet-60, 20%);
$sweet-60-dark: mix(#000, $sweet-60, 20%);
.element {
color: $sweet-60;
box-shadow: 0 0 0 2px rgba($sweet-60, 0.35);
}