Nazwany kolor · #E34285
Christmas Pink
Christmas Pink to #E34285: rgb(227 66 133), hsl(335 74% 57%), oklch(0.63 0.204 359.5). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · Christmas Pink color name →
#E34285
oklch(0.63 0.204 359.5)
Konwersje koloru
- HEX
- #e34285
- RGB
- rgb(227 66 133)
- HSL
- hsl(335 74% 57%)
- HWB
- hwb(335 26% 11%)
- OKLCH
- oklch(0.63 0.204 359.5)
- OKLab
- oklab(0.63 0.204 -0.002)
- CIE Lab
- lab(54.47 65.86 0.33)
- LCH
- lch(54.47 65.86 0.3)
- CMYK
- cmyk(0% 71% 41% 11%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- E95A91
- EE6F9C
- F282A8
- F695B4
- F9A7C0
- FCB9CC
- FECAD9
- FFDCE5
- FFEDF2
Odcienie ciemniejsze
- C53873
- A82F61
- 8C2550
- 711C40
- 571430
- 3F0B21
- 270513
- 120106
- 030001
Tony
- DA4D85
- D25584
- C95D84
- BF6483
- B66983
- AC6F82
- A27482
- 977881
- 8C7C81
Harmonie kolorów
Komplementarna +180°
- E34285
Christmas Pink
- 009F8B
≈ Flamboyant Teal
Analogowa -30° +30°
- E34285
Christmas Pink
- C950C3
≈ Zǐ Sè Purple
- EB4636
≈ Chilled Chilly
Triada +120° +240°
- E34285
Christmas Pink
- 7F9500
≈ Mossy Woods
- 0092D6
≈ Kahu Blue
Komplementarna rozszczepiona +150° +210°
- E34285
Christmas Pink
- 00A549
≈ Green Pigment
- 009AAD
≈ Aquarium Diver
Tetrada +90° +180° +270°
- E34285
Christmas Pink
- A88400
≈ Chestnut Gold
- 009F8B
≈ Flamboyant Teal
- 5B7BFF
≈ C64 NTSC
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.90:1 · APCA Lc 65
Ag
AANa czerni
WCAG 5.38:1 · APCA Lc 36
Najlepszy kolor tekstu: #000000
WCAG 5.38:1 (AA) · APCA Lc 36
Contrast pairs
Fragmenty kodu
CSS
:root {
--christmas-pink: #e34285;
--christmas-pink-rgb: 227 66 133;
--christmas-pink-oklch: oklch(0.63 0.204 359.5);
}
.element {
color: var(--christmas-pink);
background-color: hsl(335 74% 57%);
border-color: oklch(0.63 0.204 359.5);
}Tailwind CSS v4
@theme {
--color-christmas-pink: #e34285;
--color-christmas-pink-50: #ffddf1;
--color-christmas-pink-100: #ffcce3;
--color-christmas-pink-200: #ffaece;
--color-christmas-pink-300: #ff87b0;
--color-christmas-pink-400: #f9609a;
--color-christmas-pink-500: #e72f82;
--color-christmas-pink-600: #c32b6e;
--color-christmas-pink-700: #9d2258;
--color-christmas-pink-800: #751743;
--color-christmas-pink-900: #520f2e;
--color-christmas-pink-950: #37011b;
}SCSS
$christmas-pink: #e34285;
$christmas-pink-rgb: 227, 66, 133;
$christmas-pink-light: mix(#fff, $christmas-pink, 20%);
$christmas-pink-dark: mix(#000, $christmas-pink, 20%);
.element {
color: $christmas-pink;
box-shadow: 0 0 0 2px rgba($christmas-pink, 0.35);
}