Cor nomeada · #F3C3D8
Sweetheart
Sweetheart é #F3C3D8: rgb(243 195 216), hsl(334 67% 86%), oklch(0.865 0.061 350.4). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Pink mean? → · Sweetheart color name →
#F3C3D8
oklch(0.865 0.061 350.4)
Conversões de cor
- 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%)
Tons claros · Sombras · Tons
Tons claros
- F4C9DC
- F6CFE0
- F7D5E4
- F9DBE7
- FAE1EB
- FBE7EF
- FCEDF3
- FDF3F7
- FEF9FB
Sombras
- D3A9BC
- B490A0
- 977885
- 7A606B
- 5E4A53
- 44343B
- 2B2025
- 140E11
- 030202
Tons
- E7BCCF
- DBB5C6
- D0AFBD
- C4A8B4
- B8A1AB
- AD9AA2
- A2949A
- 968D91
- 8B8788
Harmonias de cor
Complementar +180°
- F3C3D8
Sweetheart
- ABE0CD
≈ Meristem
Análoga -30° +30°
- F3C3D8
Sweetheart
- E5C6EC
≈ Prom Corsage
- F8C4C2
≈ Icing on the Cake
Tríade +120° +240°
- F3C3D8
Sweetheart
- D4D7A9
≈ Sunlit Leaf
- AADBF4
≈ Van Gogh Blue
Complementar dividida +150° +210°
- F3C3D8
Sweetheart
- BEDDB8
≈ Soft Lumen
- A4DFE3
≈ Blue Bauble
Tétrade +90° +180° +270°
- F3C3D8
Sweetheart
- E8CFA6
≈ Sand Sculpture
- ABE0CD
≈ Meristem
- BCD4FB
≈ Ice Cold Stare
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.54:1 · APCA Lc 25
Ag
AAASobre preto
WCAG 13.60:1 · APCA Lc 78
Melhor cor de texto: #000000
WCAG 13.60:1 (AAA) · APCA Lc 78
Contrast pairs
Trechos de código
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);
}