이름 색상 · #69359C
Purple Heart
Purple Heart은(는) #69359C: rgb(105 53 156), hsl(270 49% 41%), oklch(0.449 0.162 303.7). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Purple mean? → · Purple Heart color name →
#69359C
oklch(0.449 0.162 303.7)
색상 변환
- HEX
- #69359c
- RGB
- rgb(105 53 156)
- HSL
- hsl(270 49% 41%)
- HWB
- hwb(270 21% 39%)
- OKLCH
- oklch(0.449 0.162 303.7)
- OKLab
- oklab(0.449 0.09 -0.134)
- CIE Lab
- lab(33.37 38.8 -47.91)
- LCH
- lch(33.37 61.65 309)
- CMYK
- cmyk(33% 66% 0% 39%)
틴트 · 셰이드 · 톤
틴트
- 774AA7
- 855FB1
- 9372BC
- A286C6
- B19AD0
- C0AEDA
- CFC2E3
- DFD6ED
- EFEAF6
셰이드
- 5A2D87
- 4C2573
- 3E1D5F
- 31154C
- 240E39
- 180828
- 0C0318
- 040109
- 000001
톤
- 6B3F9A
- 6D4798
- 704F95
- 725793
- 745E90
- 76658E
- 796C8B
- 7B7387
- 7E7984
색 조화
보색 +180°
- 69359C
Purple Heart
- 495E00
≈ Camouflage Green
유사색 -30° +30°
- 69359C
Purple Heart
- 3C46AC
≈ Night in Manchester
- 862679
≈ Noble Plum
삼각 배색 +120° +240°
- 69359C
Purple Heart
- 7B4600
≈ Dusky Brown
- 00635A
≈ Dancing Peacock
분열 보색 +150° +210°
- 69359C
Purple Heart
- 665300
≈ Olive Brown
- 006636
≈ Treasured Wilderness
사각 배색 +90° +180° +270°
- 69359C
Purple Heart
- 9A2001
≈ Garden Gnome Red
- 495E00
≈ Camouflage Green
- 00606F
≈ Cool Dive
대비 및 접근성
Ag
AAA흰색 위
WCAG 8.10:1 · APCA Lc 88
Ag
Fail검은색 위
WCAG 2.58:1 · APCA Lc 15
가장 좋은 글자색: #FFFFFF
WCAG 8.10:1 (AAA) · APCA Lc 88
Contrast pairs
코드 스니펫
CSS
:root {
--purple-heart: #69359c;
--purple-heart-rgb: 105 53 156;
--purple-heart-oklch: oklch(0.449 0.162 303.7);
}
.element {
color: var(--purple-heart);
background-color: hsl(270 49% 41%);
border-color: oklch(0.449 0.162 303.7);
}Tailwind CSS v4
@theme {
--color-purple-heart: #69359c;
--color-purple-heart-50: #ffeaff;
--color-purple-heart-100: #f5dbff;
--color-purple-heart-200: #e5c3ff;
--color-purple-heart-300: #cca1f9;
--color-purple-heart-400: #b384eb;
--color-purple-heart-500: #9e65dc;
--color-purple-heart-600: #8556b9;
--color-purple-heart-700: #6b4595;
--color-purple-heart-800: #4d3270;
--color-purple-heart-900: #36224f;
--color-purple-heart-950: #211135;
}SCSS
$purple-heart: #69359c;
$purple-heart-rgb: 105, 53, 156;
$purple-heart-light: mix(#fff, $purple-heart, 20%);
$purple-heart-dark: mix(#000, $purple-heart, 20%);
.element {
color: $purple-heart;
box-shadow: 0 0 0 2px rgba($purple-heart, 0.35);
}