Najbliższy nazwany kolor · #DE1E8A
#DE1E8A
Najbliższy nazwany kolor: Benevolent Pink
#DE1E8A (rgb(222 30 138), hsl(326 76% 49%), oklch(0.599 0.233 353.7)) jest najbliższy nazwanemu kolorowi Benevolent Pink. Zobacz odcienie, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
#DE1E8A
oklch(0.599 0.233 353.7)
Konwersje koloru
- HEX
- #de1e8a
- RGB
- rgb(222 30 138)
- HSL
- hsl(326 76% 49%)
- HWB
- hwb(326 12% 13%)
- OKLCH
- oklch(0.599 0.233 353.7)
- OKLab
- oklab(0.599 0.232 -0.026)
- CIE Lab
- lab(50.36 73.95 -8.79)
- LCH
- lch(50.36 74.47 353.2)
- CMYK
- cmyk(0% 86% 38% 13%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- E54395
- EB5DA0
- F074AC
- F489B7
- F89EC3
- FBB1CF
- FDC5DB
- FFD8E7
- FFECF3
Odcienie ciemniejsze
- C11977
- A51365
- 890E53
- 6F0942
- 550532
- 3D0322
- 260114
- 120007
- 020001
Tony
- D63489
- CE4388
- C64E87
- BD5886
- B56085
- AB6884
- A26F83
- 977582
- 8C7B81
Harmonie kolorów
Komplementarna +180°
- DE1E8A
Benevolent Pink
- 00957A
≈ Pool Table
Analogowa -30° +30°
- DE1E8A
Benevolent Pink
- BE3ACC
≈ Ultraviolet Berl
- EB1833
≈ Transfusion
Triada +120° +240°
- DE1E8A
Benevolent Pink
- 808800
≈ Krypton Green
- 008BBE
≈ Hawaiian Surf
Komplementarna rozszczepiona +150° +210°
- DE1E8A
Benevolent Pink
- 009B1A
≈ Green Gardens
- 00919B
≈ Peacock Feather
Tetrada +90° +180° +270°
- DE1E8A
Benevolent Pink
- A27800
≈ Nataneyu Gold
- 00957A
≈ Pool Table
- 3773FF
≈ Hailey Blue
Kontrast i dostępność
Ag
AANa bieli
WCAG 4.50:1 · APCA Lc 69
Ag
AANa czerni
WCAG 4.65:1 · APCA Lc 32
Najlepszy kolor tekstu: #000000
WCAG 4.65:1 (AA) · APCA Lc 32
Contrast pairs
Fragmenty kodu
CSS
:root {
--benevolent-pink: #de1e8a;
--benevolent-pink-rgb: 222 30 138;
--benevolent-pink-oklch: oklch(0.599 0.233 353.7);
}
.element {
color: var(--benevolent-pink);
background-color: hsl(326 76% 49%);
border-color: oklch(0.599 0.233 353.7);
}Tailwind CSS v4
@theme {
--color-benevolent-pink: #de1e8a;
--color-benevolent-pink-50: #ffdaf8;
--color-benevolent-pink-100: #ffc7eb;
--color-benevolent-pink-200: #ffa8d8;
--color-benevolent-pink-300: #ff7ebc;
--color-benevolent-pink-400: #ff52a9;
--color-benevolent-pink-500: #ee0091;
--color-benevolent-pink-600: #c90e7b;
--color-benevolent-pink-700: #a10e62;
--color-benevolent-pink-800: #78084b;
--color-benevolent-pink-900: #550634;
--color-benevolent-pink-950: #380020;
}SCSS
$benevolent-pink: #de1e8a;
$benevolent-pink-rgb: 222, 30, 138;
$benevolent-pink-light: mix(#fff, $benevolent-pink, 20%);
$benevolent-pink-dark: mix(#000, $benevolent-pink, 20%);
.element {
color: $benevolent-pink;
box-shadow: 0 0 0 2px rgba($benevolent-pink, 0.35);
}