이름 색상 · #CC76A3
Heartbreaker
Heartbreaker은(는) #CC76A3: rgb(204 118 163), hsl(329 46% 63%), oklch(0.673 0.12 348.2). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Pink mean? → · Heartbreaker color name →
#CC76A3
oklch(0.673 0.12 348.2)
색상 변환
- 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%)
틴트 · 셰이드 · 톤
틴트
- D284AC
- D891B5
- DE9FBE
- E3ADC7
- E8BAD0
- EDC8D9
- F2D5E3
- F7E3EC
- FBF1F6
셰이드
- B1668D
- 975678
- 7E4763
- 65384F
- 4E293C
- 371C2A
- 220F19
- 0F050A
- 020101
톤
- C5789F
- BE799C
- B67A98
- AF7B95
- A77D91
- A07D8E
- 987E8A
- 907F87
- 888083
색 조화
보색 +180°
- CC76A3
Heartbreaker
- 33AE88
≈ Mermaid Song
유사색 -30° +30°
- CC76A3
Heartbreaker
- B57DC6
≈ Wisteria
- D6767A
≈ Red Cedar
삼각 배색 +120° +240°
- CC76A3
Heartbreaker
- 9D9B38
≈ Be Yourself
- 2AA4D0
≈ Modal
분열 보색 +150° +210°
- CC76A3
Heartbreaker
- 70A85D
≈ Ferntastic
- 00ABB0
≈ Fiji
사각 배색 +90° +180° +270°
- CC76A3
Heartbreaker
- BE8C32
≈ Hokey Pokey
- 33AE88
≈ Mermaid Song
- 6697E0
≈ Little Boy Blue
대비 및 접근성
Ag
Fail흰색 위
WCAG 3.14:1 · APCA Lc 58
Ag
AA검은색 위
WCAG 6.68:1 · APCA Lc 44
가장 좋은 글자색: #000000
WCAG 6.68:1 (AA) · APCA Lc 44
Contrast pairs
코드 스니펫
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);
}