Color con nombre más cercano · #DD2757
#DD2757
Color con nombre más cercano: Howling Pink
#DD2757 (rgb(221 39 87), hsl(344 73% 51%), oklch(0.587 0.213 13)) se parece más al color con nombre Howling Pink. Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
#DD2757
oklch(0.587 0.213 13)
Conversiones de color
- HEX
- #dd2757
- RGB
- rgb(221 39 87)
- HSL
- hsl(344 73% 51%)
- HWB
- hwb(344 15% 13%)
- OKLCH
- oklch(0.587 0.213 13)
- OKLab
- oklab(0.587 0.208 0.048)
- CIE Lab
- lab(49.64 69.17 21.26)
- LCH
- lch(49.64 72.36 17.1)
- CMYK
- cmyk(0% 82% 61% 13%)
Tintes · Sombras · Tonos
Tintes
- E44867
- EA6077
- EF7687
- F48B97
- F89FA8
- FBB2B9
- FDC6CA
- FFD9DC
- FFECED
Sombras
- C0204B
- A41A3E
- 881433
- 6E0E27
- 55081C
- 3D0412
- 260208
- 110103
- 020000
Tonos
- D5395B
- CE4660
- C55164
- BD5A68
- B4626C
- AB6970
- A16F74
- 977578
- 8C7B7C
Armonías de color
Complementario +180°
- DD2757
Howling Pink
- 008F8D
≈ Corfu Shallows
Análogo -30° +30°
- DD2757
Howling Pink
- CB339D
≈ Royal Fuchsia
- CC4F00
≈ Hot Bolognese
Triádico +120° +240°
- DD2757
Howling Pink
- 529000
≈ Pistachio Flour
- 007CE3
≈ Soothing Sapphire
Complementario dividido +150° +210°
- DD2757
Howling Pink
- 009366
≈ Emerald Lake
- 008AAB
≈ Corfu Waters
Tetrádico +90° +180° +270°
- DD2757
Howling Pink
- 8A7E00
≈ Moscow Papyrus
- 008F8D
≈ Corfu Shallows
- 715FF4
≈ Blue Hepatica
Contraste y accesibilidad
Ag
AASobre blanco
WCAG 4.66:1 · APCA Lc 71
Ag
AASobre negro
WCAG 4.50:1 · APCA Lc 31
Mejor color de texto: #FFFFFF
WCAG 4.66:1 (AA) · APCA Lc 71
Contrast pairs
Fragmentos de código
CSS
:root {
--howling-pink: #dd2757;
--howling-pink-rgb: 221 39 87;
--howling-pink-oklch: oklch(0.587 0.213 13);
}
.element {
color: var(--howling-pink);
background-color: hsl(344 73% 51%);
border-color: oklch(0.587 0.213 13);
}Tailwind CSS v4
@theme {
--color-howling-pink: #dd2757;
--color-howling-pink-50: #ffdde1;
--color-howling-pink-100: #ffcbd1;
--color-howling-pink-200: #ffadb7;
--color-howling-pink-300: #ff8494;
--color-howling-pink-400: #ff5a7a;
--color-howling-pink-500: #f11f5c;
--color-howling-pink-600: #cc204f;
--color-howling-pink-700: #a41a3f;
--color-howling-pink-800: #7a1030;
--color-howling-pink-900: #570b20;
--color-howling-pink-950: #3a0010;
}SCSS
$howling-pink: #dd2757;
$howling-pink-rgb: 221, 39, 87;
$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);
}