Couleur nommée la plus proche · #DF0589
#DF0589
Couleur nommée la plus proche: Benevolent Pink
#DF0589 (rgb(223 5 137), hsl(324 96% 45%), oklch(0.593 0.243 353.5)) est la plus proche de la couleur nommée Benevolent Pink. Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
#DF0589
oklch(0.593 0.243 353.5)
Conversions de couleur
- HEX
- #df0589
- RGB
- rgb(223 5 137)
- HSL
- hsl(324 96% 45%)
- HWB
- hwb(324 2% 13%)
- OKLCH
- oklch(0.593 0.243 353.5)
- OKLab
- oklab(0.593 0.241 -0.027)
- CIE Lab
- lab(49.55 76.87 -9.37)
- LCH
- lch(49.55 77.44 353.1)
- CMYK
- cmyk(0% 98% 39% 13%)
Teintes · Ombres · Tons
Teintes
- E63C94
- EC58A0
- F170AB
- F586B7
- F99BC3
- FCAFCE
- FEC4DA
- FFD7E7
- FFEBF3
Ombres
- C20476
- A50364
- 8A0253
- 6F0142
- 560131
- 3D0022
- 270014
- 120007
- 020001
Tons
- D72B88
- CF3D87
- C74A86
- BE5586
- B55E85
- AC6684
- A26D83
- 987482
- 8C7A81
Harmonies de couleurs
Complémentaire +180°
- DF0589
Benevolent Pink
- 009378
≈ Dòu Lǜ Green
Analogue -30° +30°
- DF0589
Benevolent Pink
- BE31CE
≈ Ultraviolet Berl
- EB002F
≈ Brake Light Trails
Triadique +120° +240°
- DF0589
Benevolent Pink
- 7E8600
≈ Elwynn Forest Olive
- 0089BB
≈ Mermaid Dreams
Complémentaire divisée +150° +210°
- DF0589
Benevolent Pink
- 009918
≈ Green Gardens
- 008F99
≈ Splashy
Tétradique +90° +180° +270°
- DF0589
Benevolent Pink
- A07600
≈ Barbarian Leather
- 009378
≈ Dòu Lǜ Green
- 3471FF
≈ Hailey Blue
Contraste et accessibilité
Ag
AASur blanc
WCAG 4.64:1 · APCA Lc 70
Ag
AASur noir
WCAG 4.52:1 · APCA Lc 32
Meilleure couleur de texte: #FFFFFF
WCAG 4.64:1 (AA) · APCA Lc 70
Contrast pairs
Extraits de code
CSS
:root {
--benevolent-pink: #df0589;
--benevolent-pink-rgb: 223 5 137;
--benevolent-pink-oklch: oklch(0.593 0.243 353.5);
}
.element {
color: var(--benevolent-pink);
background-color: hsl(324 96% 45%);
border-color: oklch(0.593 0.243 353.5);
}Tailwind CSS v4
@theme {
--color-benevolent-pink: #df0589;
--color-benevolent-pink-50: #ffd9f8;
--color-benevolent-pink-100: #ffc6eb;
--color-benevolent-pink-200: #ffa6d8;
--color-benevolent-pink-300: #ff7abc;
--color-benevolent-pink-400: #ff4da9;
--color-benevolent-pink-500: #f10092;
--color-benevolent-pink-600: #cc007c;
--color-benevolent-pink-700: #a40063;
--color-benevolent-pink-800: #7a004c;
--color-benevolent-pink-900: #560235;
--color-benevolent-pink-950: #390020;
}SCSS
$benevolent-pink: #df0589;
$benevolent-pink-rgb: 223, 5, 137;
$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);
}