이름 색상 · #D04A70
Pink Punch
Pink Punch은(는) #D04A70: rgb(208 74 112), hsl(343 59% 55%), oklch(0.602 0.171 6.5). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Red mean? → · Pink Punch color name →
#D04A70
oklch(0.602 0.171 6.5)
색상 변환
- HEX
- #d04a70
- RGB
- rgb(208 74 112)
- HSL
- hsl(343 59% 55%)
- HWB
- hwb(343 29% 18%)
- OKLCH
- oklch(0.602 0.171 6.5)
- OKLab
- oklab(0.602 0.17 0.019)
- CIE Lab
- lab(51.75 55.78 8.48)
- LCH
- lch(51.75 56.42 8.6)
- CMYK
- cmyk(0% 64% 46% 18%)
틴트 · 셰이드 · 톤
틴트
- D75E7D
- DE718B
- E48499
- E996A7
- EEA7B5
- F3B9C3
- F7CAD2
- FADCE1
- FDEDF0
셰이드
- B53F60
- 9A3551
- 802A43
- 672035
- 4F1727
- 390E1A
- 23060E
- 100204
- 020001
톤
- C95272
- C25973
- BB5F75
- B46576
- AC6A78
- A46F7A
- 9C747B
- 93787D
- 8A7C7E
색 조화
보색 +180°
- D04A70
Pink Punch
- 00958B
≈ Lights at Sea
유사색 -30° +30°
- D04A70
Pink Punch
- BD51A6
≈ Mazzy Star
- D2512C
≈ Dizzy Days
삼각 배색 +120° +240°
- D04A70
Pink Punch
- 699000
≈ Canopy
- 0086D8
≈ Blue Cola
분열 보색 +150° +210°
- D04A70
Pink Punch
- 00995B
≈ Militant Vegan
- 0090AA
≈ Zeftron
사각 배색 +90° +180° +270°
- D04A70
Pink Punch
- 968000
≈ Thicket Green
- 00958B
≈ Lights at Sea
- 6972E4
≈ Pan Purple
대비 및 접근성
Ag
Fail흰색 위
WCAG 4.28:1 · APCA Lc 69
Ag
AA검은색 위
WCAG 4.89:1 · APCA Lc 33
가장 좋은 글자색: #000000
WCAG 4.89:1 (AA) · APCA Lc 33
Contrast pairs
코드 스니펫
CSS
:root {
--pink-punch: #d04a70;
--pink-punch-rgb: 208 74 112;
--pink-punch-oklch: oklch(0.602 0.171 6.5);
}
.element {
color: var(--pink-punch);
background-color: hsl(343 59% 55%);
border-color: oklch(0.602 0.171 6.5);
}Tailwind CSS v4
@theme {
--color-pink-punch: #d04a70;
--color-pink-punch-50: #ffe2eb;
--color-pink-punch-100: #ffd1dc;
--color-pink-punch-200: #ffb5c6;
--color-pink-punch-300: #ff90a6;
--color-pink-punch-400: #ef6d8e;
--color-pink-punch-500: #dd4774;
--color-pink-punch-600: #bb3e62;
--color-pink-punch-700: #96314e;
--color-pink-punch-800: #70223b;
--color-pink-punch-900: #4f1728;
--color-pink-punch-950: #340716;
}SCSS
$pink-punch: #d04a70;
$pink-punch-rgb: 208, 74, 112;
$pink-punch-light: mix(#fff, $pink-punch, 20%);
$pink-punch-dark: mix(#000, $pink-punch, 20%);
.element {
color: $pink-punch;
box-shadow: 0 0 0 2px rgba($pink-punch, 0.35);
}