Nazwany kolor · #CC2288
Purple Heart Kiwi
Purple Heart Kiwi to #CC2288: rgb(204 34 136), hsl(324 71% 47%), oklch(0.569 0.218 350.3). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · Purple Heart Kiwi color name →
#CC2288
oklch(0.569 0.218 350.3)
Konwersje koloru
- HEX
- #cc2288
- RGB
- rgb(204 34 136)
- HSL
- hsl(324 71% 47%)
- HWB
- hwb(324 13% 20%)
- OKLCH
- oklch(0.569 0.218 350.3)
- OKLab
- oklab(0.569 0.215 -0.037)
- CIE Lab
- lab(47.07 68.7 -12.93)
- LCH
- lch(47.07 69.9 349.3)
- CMYK
- cmyk(0% 83% 33% 20%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- D44393
- DC5C9F
- E272AB
- E987B6
- EE9CC2
- F3B0CE
- F7C4DA
- FBD7E6
- FDEBF3
Odcienie ciemniejsze
- B11C75
- 971663
- 7E1152
- 650B41
- 4E0731
- 370322
- 220113
- 0F0006
- 020001
Tony
- C63587
- C04287
- B94D86
- B35785
- AB5F84
- A46783
- 9C6E83
- 937482
- 8A7A81
Harmonie kolorów
Komplementarna +180°
- CC2288
Purple Heart Kiwi
- 008C6D
≈ Festive Green
Analogowa -30° +30°
- CC2288
Purple Heart Kiwi
- AC3AC4
≈ Magentleman
- DA193C
≈ Lollipop
Triada +120° +240°
- CC2288
Purple Heart Kiwi
- 7C7D00
≈ Olive
- 0082AD
≈ Tusche Blue
Komplementarna rozszczepiona +150° +210°
- CC2288
Purple Heart Kiwi
- 278F00
≈ Diamine Green
- 00888E
≈ Ocean Soul
Tetrada +90° +180° +270°
- CC2288
Purple Heart Kiwi
- 9B6E00
≈ Balor Brown
- 008C6D
≈ Festive Green
- 186CF4
≈ Níu Zǎi Sè Denim
Kontrast i dostępność
Ag
AANa bieli
WCAG 5.05:1 · APCA Lc 73
Ag
FailNa czerni
WCAG 4.15:1 · APCA Lc 28
Najlepszy kolor tekstu: #FFFFFF
WCAG 5.05:1 (AA) · APCA Lc 73
Contrast pairs
Fragmenty kodu
CSS
:root {
--purple-heart-kiwi: #cc2288;
--purple-heart-kiwi-rgb: 204 34 136;
--purple-heart-kiwi-oklch: oklch(0.569 0.218 350.3);
}
.element {
color: var(--purple-heart-kiwi);
background-color: hsl(324 71% 47%);
border-color: oklch(0.569 0.218 350.3);
}Tailwind CSS v4
@theme {
--color-purple-heart-kiwi: #cc2288;
--color-purple-heart-kiwi-50: #ffdcfb;
--color-purple-heart-kiwi-100: #ffcaef;
--color-purple-heart-kiwi-200: #ffacdd;
--color-purple-heart-kiwi-300: #ff83c2;
--color-purple-heart-kiwi-400: #f75baf;
--color-purple-heart-kiwi-500: #e52599;
--color-purple-heart-kiwi-600: #c22381;
--color-purple-heart-kiwi-700: #9c1d68;
--color-purple-heart-kiwi-800: #74134f;
--color-purple-heart-kiwi-900: #520d37;
--color-purple-heart-kiwi-950: #360022;
}SCSS
$purple-heart-kiwi: #cc2288;
$purple-heart-kiwi-rgb: 204, 34, 136;
$purple-heart-kiwi-light: mix(#fff, $purple-heart-kiwi, 20%);
$purple-heart-kiwi-dark: mix(#000, $purple-heart-kiwi, 20%);
.element {
color: $purple-heart-kiwi;
box-shadow: 0 0 0 2px rgba($purple-heart-kiwi, 0.35);
}