Colore con nome · #567090
Moonlight Blue
Moonlight Blue è #567090: rgb(86 112 144), hsl(213 25% 45%), oklch(0.537 0.059 254). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Blue mean? → · Moonlight Blue color name →
#567090
oklch(0.537 0.059 254)
Conversioni di colore
- HEX
- #567090
- RGB
- rgb(86 112 144)
- HSL
- hsl(213 25% 45%)
- HWB
- hwb(213 34% 44%)
- OKLCH
- oklch(0.537 0.059 254)
- OKLab
- oklab(0.537 -0.016 -0.057)
- CIE Lab
- lab(46.15 -3.29 -20.83)
- LCH
- lch(46.15 21.09 261)
- CMYK
- cmyk(40% 22% 0% 44%)
Tinte · Ombre · Toni
Tinte
- 667D9B
- 768BA6
- 8699B1
- 96A7BC
- A7B5C7
- B8C4D2
- CAD2DD
- DBE1E8
- EDF0F4
Ombre
- 4A607D
- 3E516A
- 324357
- 273545
- 1C2734
- 121A24
- 080E15
- 020407
- 000101
Toni
- 5A728F
- 5F738D
- 63758C
- 67778A
- 6B7889
- 6F7A87
- 747B85
- 787D84
- 7C7F82
Armonie di colore
Complementare +180°
- 567090
Moonlight Blue
- 836947
≈ Golden Summer
Analogo -30° +30°
- 567090
Moonlight Blue
- 467687
≈ Majestic Mountain
- 696A90
≈ Wild Wisteria
Triadico +120° +240°
- 567090
Moonlight Blue
- 8D6063
≈ Cherry Cocoa
- 607653
≈ Seaweed Tea
Complementare divisa +150° +210°
- 567090
Moonlight Blue
- 8C6352
≈ Gaboon Viper
- 737047
≈ Vineyard View
Tetradico +90° +180° +270°
- 567090
Moonlight Blue
- 876076
≈ Purple Gumdrop
- 836947
≈ Golden Summer
- 4C7965
≈ Leaping Lizard
Contrasto e accessibilità
Ag
AASu bianco
WCAG 5.10:1 · APCA Lc 75
Ag
FailSu nero
WCAG 4.11:1 · APCA Lc 27
Miglior colore del testo: #FFFFFF
WCAG 5.10:1 (AA) · APCA Lc 75
Contrast pairs
Frammenti di codice
CSS
:root {
--moonlight-blue: #567090;
--moonlight-blue-rgb: 86 112 144;
--moonlight-blue-oklch: oklch(0.537 0.059 254);
}
.element {
color: var(--moonlight-blue);
background-color: hsl(213 25% 45%);
border-color: oklch(0.537 0.059 254);
}Tailwind CSS v4
@theme {
--color-moonlight-blue: #567090;
--color-moonlight-blue-50: #eaf6ff;
--color-moonlight-blue-100: #dbe9fc;
--color-moonlight-blue-200: #c4d6ee;
--color-moonlight-blue-300: #a4b9d6;
--color-moonlight-blue-400: #87a1c1;
--color-moonlight-blue-500: #6b89ad;
--color-moonlight-blue-600: #5b7492;
--color-moonlight-blue-700: #485c75;
--color-moonlight-blue-800: #334457;
--color-moonlight-blue-900: #232f3c;
--color-moonlight-blue-950: #121b26;
}SCSS
$moonlight-blue: #567090;
$moonlight-blue-rgb: 86, 112, 144;
$moonlight-blue-light: mix(#fff, $moonlight-blue, 20%);
$moonlight-blue-dark: mix(#000, $moonlight-blue, 20%);
.element {
color: $moonlight-blue;
box-shadow: 0 0 0 2px rgba($moonlight-blue, 0.35);
}