Nazwany kolor · #D648D7
Pinkish Purple
Pinkish Purple to #D648D7: rgb(214 72 215), hsl(300 64% 56%), oklch(0.651 0.236 327.6). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Purple mean? → · Pinkish Purple color name →
#D648D7
oklch(0.651 0.236 327.6)
Konwersje koloru
- HEX
- #d648d7
- RGB
- rgb(214 72 215)
- HSL
- hsl(300 64% 56%)
- HWB
- hwb(300 28% 16%)
- OKLCH
- oklch(0.651 0.236 327.6)
- OKLab
- oklab(0.651 0.2 -0.127)
- CIE Lab
- lab(55.81 68.09 -45.53)
- LCH
- lch(55.81 81.91 326.2)
- CMYK
- cmyk(0% 67% 0% 16%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- DC5FDC
- E174E0
- E687E5
- EB99E9
- EFAAED
- F3BCF1
- F7CDF5
- FADDF8
- FDEEFC
Odcienie ciemniejsze
- BA3DBB
- 9E339F
- 842985
- 6A1F6B
- 521652
- 3B0D3B
- 250625
- 100211
- 020002
Tony
- CE52CE
- C65AC6
- BE61BD
- B667B5
- AE6DAC
- A571A4
- 9C769B
- 937A92
- 8A7D89
Harmonie kolorów
Komplementarna +180°
- D648D7
Pinkish Purple
- 00AD42
≈ Poison Ivy
Analogowa -30° +30°
- D648D7
Pinkish Purple
- A168FF
≈ Purple Hedonist
- F53290
≈ Prickly Pink
Triada +120° +240°
- D648D7
Pinkish Purple
- B28900
≈ Yellow Brown
- 00A2B2
≈ Breaking Wave
Komplementarna rozszczepiona +150° +210°
- D648D7
Pinkish Purple
- 899A00
≈ BioShock
- 00A78F
≈ Ottawa Falls
Tetrada +90° +180° +270°
- D648D7
Pinkish Purple
- D47200
≈ Marmalade
- 00AD42
≈ Poison Ivy
- 009ADB
≈ Atmosphere
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.64:1 · APCA Lc 63
Ag
AANa czerni
WCAG 5.76:1 · APCA Lc 39
Najlepszy kolor tekstu: #000000
WCAG 5.76:1 (AA) · APCA Lc 39
Contrast pairs
Fragmenty kodu
CSS
:root {
--pinkish-purple: #d648d7;
--pinkish-purple-rgb: 214 72 215;
--pinkish-purple-oklch: oklch(0.651 0.236 327.6);
}
.element {
color: var(--pinkish-purple);
background-color: hsl(300 64% 56%);
border-color: oklch(0.651 0.236 327.6);
}Tailwind CSS v4
@theme {
--color-pinkish-purple: #d648d7;
--color-pinkish-purple-50: #ffddff;
--color-pinkish-purple-100: #ffcbff;
--color-pinkish-purple-200: #ffaeff;
--color-pinkish-purple-300: #f886f1;
--color-pinkish-purple-400: #e45fe4;
--color-pinkish-purple-500: #d12bd3;
--color-pinkish-purple-600: #b128b2;
--color-pinkish-purple-700: #8e208f;
--color-pinkish-purple-800: #68166d;
--color-pinkish-purple-900: #490f4d;
--color-pinkish-purple-950: #300133;
}SCSS
$pinkish-purple: #d648d7;
$pinkish-purple-rgb: 214, 72, 215;
$pinkish-purple-light: mix(#fff, $pinkish-purple, 20%);
$pinkish-purple-dark: mix(#000, $pinkish-purple, 20%);
.element {
color: $pinkish-purple;
box-shadow: 0 0 0 2px rgba($pinkish-purple, 0.35);
}