Colore con nome · #CC76A3
Heartbreaker
Heartbreaker è #CC76A3: rgb(204 118 163), hsl(329 46% 63%), oklch(0.673 0.12 348.2). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Pink mean? → · Heartbreaker color name →
#CC76A3
oklch(0.673 0.12 348.2)
Conversioni di colore
- HEX
- #cc76a3
- RGB
- rgb(204 118 163)
- HSL
- hsl(329 46% 63%)
- HWB
- hwb(329 46% 20%)
- OKLCH
- oklch(0.673 0.12 348.2)
- OKLab
- oklab(0.673 0.118 -0.025)
- CIE Lab
- lab(60.46 38.74 -8.91)
- LCH
- lch(60.46 39.75 347.1)
- CMYK
- cmyk(0% 42% 20% 20%)
Tinte · Ombre · Toni
Tinte
- D284AC
- D891B5
- DE9FBE
- E3ADC7
- E8BAD0
- EDC8D9
- F2D5E3
- F7E3EC
- FBF1F6
Ombre
- B1668D
- 975678
- 7E4763
- 65384F
- 4E293C
- 371C2A
- 220F19
- 0F050A
- 020101
Toni
- C5789F
- BE799C
- B67A98
- AF7B95
- A77D91
- A07D8E
- 987E8A
- 907F87
- 888083
Armonie di colore
Complementare +180°
- CC76A3
Heartbreaker
- 33AE88
≈ Mermaid Song
Analogo -30° +30°
- CC76A3
Heartbreaker
- B57DC6
≈ Wisteria
- D6767A
≈ Red Cedar
Triadico +120° +240°
- CC76A3
Heartbreaker
- 9D9B38
≈ Be Yourself
- 2AA4D0
≈ Modal
Complementare divisa +150° +210°
- CC76A3
Heartbreaker
- 70A85D
≈ Ferntastic
- 00ABB0
≈ Fiji
Tetradico +90° +180° +270°
- CC76A3
Heartbreaker
- BE8C32
≈ Hokey Pokey
- 33AE88
≈ Mermaid Song
- 6697E0
≈ Little Boy Blue
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 3.14:1 · APCA Lc 58
Ag
AASu nero
WCAG 6.68:1 · APCA Lc 44
Miglior colore del testo: #000000
WCAG 6.68:1 (AA) · APCA Lc 44
Contrast pairs
Frammenti di codice
CSS
:root {
--heartbreaker: #cc76a3;
--heartbreaker-rgb: 204 118 163;
--heartbreaker-oklch: oklch(0.673 0.12 348.2);
}
.element {
color: var(--heartbreaker);
background-color: hsl(329 46% 63%);
border-color: oklch(0.673 0.12 348.2);
}Tailwind CSS v4
@theme {
--color-heartbreaker: #cc76a3;
--color-heartbreaker-50: #ffe8fa;
--color-heartbreaker-100: #ffd8ed;
--color-heartbreaker-200: #fdc0db;
--color-heartbreaker-300: #e79ec0;
--color-heartbreaker-400: #d380ab;
--color-heartbreaker-500: #bf6294;
--color-heartbreaker-600: #a1537d;
--color-heartbreaker-700: #814264;
--color-heartbreaker-800: #5f304b;
--color-heartbreaker-900: #432034;
--color-heartbreaker-950: #2b101f;
}SCSS
$heartbreaker: #cc76a3;
$heartbreaker-rgb: 204, 118, 163;
$heartbreaker-light: mix(#fff, $heartbreaker, 20%);
$heartbreaker-dark: mix(#000, $heartbreaker, 20%);
.element {
color: $heartbreaker;
box-shadow: 0 0 0 2px rgba($heartbreaker, 0.35);
}