Nazwany kolor · #882299
Passionate Purple
Passionate Purple to #882299: rgb(136 34 153), hsl(291 64% 37%), oklch(0.468 0.193 321.4). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Purple mean? → · Passionate Purple color name →
#882299
oklch(0.468 0.193 321.4)
Konwersje koloru
- HEX
- #882299
- RGB
- rgb(136 34 153)
- HSL
- hsl(291 64% 37%)
- HWB
- hwb(291 13% 40%)
- OKLCH
- oklch(0.468 0.193 321.4)
- OKLab
- oklab(0.468 0.151 -0.12)
- CIE Lab
- lab(35.11 53.91 -42.98)
- LCH
- lch(35.11 68.95 321.4)
- CMYK
- cmyk(11% 78% 0% 40%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 953EA4
- A155AF
- AD6BB9
- B980C3
- C595CE
- D1AAD8
- DDBFE2
- E8D4EC
- F4E9F5
Odcienie ciemniejsze
- 751C84
- 631670
- 52115D
- 410B4A
- 310738
- 220327
- 130117
- 060008
- 010001
Tony
- 883197
- 883D95
- 884793
- 875191
- 87598F
- 86628C
- 856A89
- 837186
- 827983
Harmonie kolorów
Komplementarna +180°
- 882299
Passionate Purple
- 116E00
≈ Leafy Lush
Analogowa -30° +30°
- 882299
Passionate Purple
- 6138BB
≈ Purple Emperor
- A20366
≈ Morbid Princess
Triada +120° +240°
- 882299
Passionate Purple
- 755400
≈ Pickled Grape Leaves
- 00676D
≈ Tahitian Treat
Komplementarna rozszczepiona +150° +210°
- 882299
Passionate Purple
- 5D5F00
≈ Kirchner Green
- 006A54
≈ Poster Green
Tetrada +90° +180° +270°
- 882299
Passionate Purple
- 8D4200
≈ Otterly Brown
- 116E00
≈ Leafy Lush
- 006386
≈ Blue Heist
Kontrast i dostępność
Ag
AAANa bieli
WCAG 7.67:1 · APCA Lc 85
Ag
FailNa czerni
WCAG 2.73:1 · APCA Lc 17
Najlepszy kolor tekstu: #FFFFFF
WCAG 7.67:1 (AAA) · APCA Lc 85
Contrast pairs
Fragmenty kodu
CSS
:root {
--passionate-purple: #882299;
--passionate-purple-rgb: 136 34 153;
--passionate-purple-oklch: oklch(0.468 0.193 321.4);
}
.element {
color: var(--passionate-purple);
background-color: hsl(291 64% 37%);
border-color: oklch(0.468 0.193 321.4);
}Tailwind CSS v4
@theme {
--color-passionate-purple: #882299;
--color-passionate-purple-50: #ffe3ff;
--color-passionate-purple-100: #ffd3ff;
--color-passionate-purple-200: #fdb8ff;
--color-passionate-purple-300: #e793f0;
--color-passionate-purple-400: #d172e2;
--color-passionate-purple-500: #bd4ed1;
--color-passionate-purple-600: #a043b0;
--color-passionate-purple-700: #80358e;
--color-passionate-purple-800: #5e266b;
--color-passionate-purple-900: #421a4b;
--color-passionate-purple-950: #2a0932;
}SCSS
$passionate-purple: #882299;
$passionate-purple-rgb: 136, 34, 153;
$passionate-purple-light: mix(#fff, $passionate-purple, 20%);
$passionate-purple-dark: mix(#000, $passionate-purple, 20%);
.element {
color: $passionate-purple;
box-shadow: 0 0 0 2px rgba($passionate-purple, 0.35);
}