Benannte Farbe · #F3C3D8
Sweetheart
Sweetheart ist #F3C3D8: rgb(243 195 216), hsl(334 67% 86%), oklch(0.865 0.061 350.4). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Pink mean? → · Sweetheart color name →
#F3C3D8
oklch(0.865 0.061 350.4)
Farbumrechnungen
- HEX
- #f3c3d8
- RGB
- rgb(243 195 216)
- HSL
- hsl(334 67% 86%)
- HWB
- hwb(334 76% 5%)
- OKLCH
- oklch(0.865 0.061 350.4)
- OKLab
- oklab(0.865 0.06 -0.01)
- CIE Lab
- lab(83.56 20.06 -3.67)
- LCH
- lch(83.56 20.4 349.6)
- CMYK
- cmyk(0% 20% 11% 5%)
Tints · Shades · Tones
Tints
- F4C9DC
- F6CFE0
- F7D5E4
- F9DBE7
- FAE1EB
- FBE7EF
- FCEDF3
- FDF3F7
- FEF9FB
Shades
- D3A9BC
- B490A0
- 977885
- 7A606B
- 5E4A53
- 44343B
- 2B2025
- 140E11
- 030202
Tones
- E7BCCF
- DBB5C6
- D0AFBD
- C4A8B4
- B8A1AB
- AD9AA2
- A2949A
- 968D91
- 8B8788
Farbharmonien
Komplementär +180°
- F3C3D8
Sweetheart
- ABE0CD
≈ Meristem
Analog -30° +30°
- F3C3D8
Sweetheart
- E5C6EC
≈ Prom Corsage
- F8C4C2
≈ Icing on the Cake
Triadisch +120° +240°
- F3C3D8
Sweetheart
- D4D7A9
≈ Sunlit Leaf
- AADBF4
≈ Van Gogh Blue
Geteilt komplementär +150° +210°
- F3C3D8
Sweetheart
- BEDDB8
≈ Soft Lumen
- A4DFE3
≈ Blue Bauble
Tetradisch +90° +180° +270°
- F3C3D8
Sweetheart
- E8CFA6
≈ Sand Sculpture
- ABE0CD
≈ Meristem
- BCD4FB
≈ Ice Cold Stare
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.54:1 · APCA Lc 25
Ag
AAAAuf Schwarz
WCAG 13.60:1 · APCA Lc 78
Beste Textfarbe: #000000
WCAG 13.60:1 (AAA) · APCA Lc 78
Contrast pairs
Code-Snippets
CSS
:root {
--sweetheart: #f3c3d8;
--sweetheart-rgb: 243 195 216;
--sweetheart-oklch: oklch(0.865 0.061 350.4);
}
.element {
color: var(--sweetheart);
background-color: hsl(334 67% 86%);
border-color: oklch(0.865 0.061 350.4);
}Tailwind CSS v4
@theme {
--color-sweetheart: #f3c3d8;
--color-sweetheart-50: #ffeef7;
--color-sweetheart-100: #f9e0ea;
--color-sweetheart-200: #eacad7;
--color-sweetheart-300: #d1abba;
--color-sweetheart-400: #bb90a3;
--color-sweetheart-500: #a6768c;
--color-sweetheart-600: #8c6476;
--color-sweetheart-700: #70505e;
--color-sweetheart-800: #533a46;
--color-sweetheart-900: #3a2830;
--color-sweetheart-950: #24161d;
}SCSS
$sweetheart: #f3c3d8;
$sweetheart-rgb: 243, 195, 216;
$sweetheart-light: mix(#fff, $sweetheart, 20%);
$sweetheart-dark: mix(#000, $sweetheart, 20%);
.element {
color: $sweetheart;
box-shadow: 0 0 0 2px rgba($sweetheart, 0.35);
}