Colore con nome · #69359C
Purple Heart
Purple Heart è #69359C: rgb(105 53 156), hsl(270 49% 41%), oklch(0.449 0.162 303.7). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Purple mean? → · Purple Heart color name →
#69359C
oklch(0.449 0.162 303.7)
Conversioni di colore
- 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%)
Tinte · Ombre · Toni
Tinte
- 774AA7
- 855FB1
- 9372BC
- A286C6
- B19AD0
- C0AEDA
- CFC2E3
- DFD6ED
- EFEAF6
Ombre
- 5A2D87
- 4C2573
- 3E1D5F
- 31154C
- 240E39
- 180828
- 0C0318
- 040109
- 000001
Toni
- 6B3F9A
- 6D4798
- 704F95
- 725793
- 745E90
- 76658E
- 796C8B
- 7B7387
- 7E7984
Armonie di colore
Complementare +180°
- 69359C
Purple Heart
- 495E00
≈ Camouflage Green
Analogo -30° +30°
- 69359C
Purple Heart
- 3C46AC
≈ Night in Manchester
- 862679
≈ Noble Plum
Triadico +120° +240°
- 69359C
Purple Heart
- 7B4600
≈ Dusky Brown
- 00635A
≈ Dancing Peacock
Complementare divisa +150° +210°
- 69359C
Purple Heart
- 665300
≈ Olive Brown
- 006636
≈ Treasured Wilderness
Tetradico +90° +180° +270°
- 69359C
Purple Heart
- 9A2001
≈ Garden Gnome Red
- 495E00
≈ Camouflage Green
- 00606F
≈ Cool Dive
Contrasto e accessibilità
Ag
AAASu bianco
WCAG 8.10:1 · APCA Lc 88
Ag
FailSu nero
WCAG 2.58:1 · APCA Lc 15
Miglior colore del testo: #FFFFFF
WCAG 8.10:1 (AAA) · APCA Lc 88
Contrast pairs
Frammenti di codice
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);
}