Couleur nommée · #AF73B0
Moonlight Melody
Moonlight Melody correspond à #AF73B0 : rgb(175 115 176), hsl(299 28% 57%), oklch(0.639 0.112 326.2). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Purple mean? → · Moonlight Melody color name →
#AF73B0
oklch(0.639 0.112 326.2)
Conversions de couleur
- HEX
- #af73b0
- RGB
- rgb(175 115 176)
- HSL
- hsl(299 28% 57%)
- HWB
- hwb(299 45% 31%)
- OKLCH
- oklch(0.639 0.112 326.2)
- OKLab
- oklab(0.639 0.093 -0.062)
- CIE Lab
- lab(56.55 31.69 -22.67)
- LCH
- lch(56.55 38.96 324.4)
- CMYK
- cmyk(1% 35% 0% 31%)
Teintes · Ombres · Tons
Teintes
- B781B8
- C08EC0
- C89CC8
- D0AAD0
- D8B8D8
- E0C6DF
- E8D4E7
- EFE2EF
- F7F1F7
Ombres
- 986399
- 815482
- 6B456C
- 563656
- 412842
- 2E1B2E
- 1C0F1C
- 0B050B
- 010101
Tons
- AB75AB
- A676A7
- A178A2
- 9D799D
- 987B98
- 947C93
- 8F7D8F
- 8A7E8A
- 857F85
Harmonies de couleurs
Complémentaire +180°
- AF73B0
Moonlight Melody
- 5C9E62
≈ Mosaic Green
Analogue -30° +30°
- AF73B0
Moonlight Melody
- 927DC8
≈ Faraway Sky
- C16E8E
≈ Silk Ribbon
Triadique +120° +240°
- AF73B0
Moonlight Melody
- AA872F
≈ Rich Gold
- 009EAD
≈ Lake Blue
Complémentaire divisée +150° +210°
- AF73B0
Moonlight Melody
- 88943E
≈ Wasabi Nuts
- 22A28A
≈ Stamp Pad Green
Tétradique +90° +180° +270°
- AF73B0
Moonlight Melody
- BF7944
≈ Sedona at Sunset
- 5C9E62
≈ Mosaic Green
- 3C96C7
≈ Stratos Blue
Contraste et accessibilité
Ag
FailSur blanc
WCAG 3.55:1 · APCA Lc 63
Ag
AASur noir
WCAG 5.90:1 · APCA Lc 39
Meilleure couleur de texte: #000000
WCAG 5.90:1 (AA) · APCA Lc 39
Contrast pairs
Extraits de code
CSS
:root {
--moonlight-melody: #af73b0;
--moonlight-melody-rgb: 175 115 176;
--moonlight-melody-oklch: oklch(0.639 0.112 326.2);
}
.element {
color: var(--moonlight-melody);
background-color: hsl(299 28% 57%);
border-color: oklch(0.639 0.112 326.2);
}Tailwind CSS v4
@theme {
--color-moonlight-melody: #af73b0;
--color-moonlight-melody-50: #ffeaff;
--color-moonlight-melody-100: #fddbfb;
--color-moonlight-melody-200: #efc4ed;
--color-moonlight-melody-300: #d7a3d4;
--color-moonlight-melody-400: #c187c2;
--color-moonlight-melody-500: #ac6aad;
--color-moonlight-melody-600: #915a92;
--color-moonlight-melody-700: #754875;
--color-moonlight-melody-800: #553458;
--color-moonlight-melody-900: #3c243d;
--color-moonlight-melody-950: #251227;
}SCSS
$moonlight-melody: #af73b0;
$moonlight-melody-rgb: 175, 115, 176;
$moonlight-melody-light: mix(#fff, $moonlight-melody, 20%);
$moonlight-melody-dark: mix(#000, $moonlight-melody, 20%);
.element {
color: $moonlight-melody;
box-shadow: 0 0 0 2px rgba($moonlight-melody, 0.35);
}