Najbliższy nazwany kolor · #DD3158
#DD3158
Najbliższy nazwany kolor: Howling Pink
#DD3158 (rgb(221 49 88), hsl(346 72% 53%), oklch(0.594 0.206 13.9)) jest najbliższy nazwanemu kolorowi Howling Pink. Zobacz odcienie, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
#DD3158
oklch(0.594 0.206 13.9)
Konwersje koloru
- HEX
- #dd3158
- RGB
- rgb(221 49 88)
- HSL
- hsl(346 72% 53%)
- HWB
- hwb(346 19% 13%)
- OKLCH
- oklch(0.594 0.206 13.9)
- OKLab
- oklab(0.594 0.2 0.05)
- CIE Lab
- lab(50.55 66.77 21.82)
- LCH
- lch(50.55 70.24 18.1)
- CMYK
- cmyk(0% 78% 60% 13%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- E44E68
- EA6578
- EF7A88
- F48E98
- F7A1A9
- FBB4B9
- FDC7CB
- FFDADC
- FFECED
Odcienie ciemniejsze
- C0294B
- A4223F
- 881A33
- 6E1328
- 550C1D
- 3D0612
- 260309
- 110103
- 020000
Tony
- D5405C
- CD4B60
- C55564
- BD5D69
- B4646D
- AB6B70
- A17174
- 977678
- 8C7B7C
Harmonie kolorów
Komplementarna +180°
- DD3158
Howling Pink
- 009190
≈ Common Teal
Analogowa -30° +30°
- DD3158
Howling Pink
- CC3A9C
≈ Lustful Wishes
- CE5200
≈ Burnt Orange
Triada +120° +240°
- DD3158
Howling Pink
- 509300
≈ Pistachio Flour
- 007DEA
≈ Blue Darknut
Komplementarna rozszczepiona +150° +210°
- DD3158
Howling Pink
- 00956A
≈ Viridian
- 008CAF
≈ Algiers Blue
Tetrada +90° +180° +270°
- DD3158
Howling Pink
- 8B8100
≈ Fickle Pickle
- 009190
≈ Common Teal
- 7563F2
≈ Medium Slate Blue
Kontrast i dostępność
Ag
AANa bieli
WCAG 4.51:1 · APCA Lc 70
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 {
--howling-pink: #dd3158;
--howling-pink-rgb: 221 49 88;
--howling-pink-oklch: oklch(0.594 0.206 13.9);
}
.element {
color: var(--howling-pink);
background-color: hsl(346 72% 53%);
border-color: oklch(0.594 0.206 13.9);
}Tailwind CSS v4
@theme {
--color-howling-pink: #dd3158;
--color-howling-pink-50: #ffdee1;
--color-howling-pink-100: #ffccd1;
--color-howling-pink-200: #ffafb6;
--color-howling-pink-300: #ff8793;
--color-howling-pink-400: #ff5e79;
--color-howling-pink-500: #ee2a5b;
--color-howling-pink-600: #c9274e;
--color-howling-pink-700: #a2203e;
--color-howling-pink-800: #79142f;
--color-howling-pink-900: #560e20;
--color-howling-pink-950: #39000f;
}SCSS
$howling-pink: #dd3158;
$howling-pink-rgb: 221, 49, 88;
$howling-pink-light: mix(#fff, $howling-pink, 20%);
$howling-pink-dark: mix(#000, $howling-pink, 20%);
.element {
color: $howling-pink;
box-shadow: 0 0 0 2px rgba($howling-pink, 0.35);
}