Colore con nome più vicino · #487E88
#487E88
Colore con nome più vicino: Mysterious Blue
#487E88 (rgb(72 126 136), hsl(189 31% 41%), oklch(0.56 0.059 210.7)) è più vicino al colore con nome Mysterious Blue. Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
#487E88
oklch(0.56 0.059 210.7)
Conversioni di colore
- HEX
- #487e88
- RGB
- rgb(72 126 136)
- HSL
- hsl(189 31% 41%)
- HWB
- hwb(189 28% 47%)
- OKLCH
- oklch(0.56 0.059 210.7)
- OKLab
- oklab(0.56 -0.051 -0.03)
- CIE Lab
- lab(49.36 -16.57 -11.37)
- LCH
- lch(49.36 20.1 214.5)
- CMYK
- cmyk(47% 7% 0% 47%)
Tinte · Ombre · Toni
Tinte
- 5A8A93
- 6D979F
- 7EA3AA
- 90B0B6
- A2BDC2
- B5CACE
- C7D7DA
- D9E4E6
- ECF2F3
Ombre
- 3D6D75
- 335C63
- 294C52
- 1F3C41
- 162D31
- 0D1F22
- 061113
- 020506
- 000101
Toni
- 4F7E87
- 557F87
- 5B7F86
- 617F85
- 667F84
- 6C8083
- 718083
- 768082
- 7B8081
Armonie di colore
Complementare +180°
- 487E88
Mysterious Blue
- 94685F
≈ Agate Brown
Analogo -30° +30°
- 487E88
Mysterious Blue
- 4B8076
≈ Azurite Water Green
- 547994
≈ Mallorca Blue
Triadico +120° +240°
- 487E88
Mysterious Blue
- 896885
≈ Sunshone Plum
- 81734B
≈ Mossy
Complementare divisa +150° +210°
- 487E88
Mysterious Blue
- 926672
≈ Copper Pink
- 8E6C50
≈ Split Rail
Tetradico +90° +180° +270°
- 487E88
Mysterious Blue
- 7A6D92
≈ Purple Silhouette
- 94685F
≈ Agate Brown
- 6F7A52
≈ Kariyasu Green
Contrasto e accessibilità
Ag
AASu bianco
WCAG 4.54:1 · APCA Lc 71
Ag
AASu nero
WCAG 4.61:1 · APCA Lc 30
Miglior colore del testo: #000000
WCAG 4.61:1 (AA) · APCA Lc 30
Contrast pairs
Frammenti di codice
CSS
:root {
--mysterious-blue: #487e88;
--mysterious-blue-rgb: 72 126 136;
--mysterious-blue-oklch: oklch(0.56 0.059 210.7);
}
.element {
color: var(--mysterious-blue);
background-color: hsl(189 31% 41%);
border-color: oklch(0.56 0.059 210.7);
}Tailwind CSS v4
@theme {
--color-mysterious-blue: #487e88;
--color-mysterious-blue-50: #e3faff;
--color-mysterious-blue-100: #d2eef4;
--color-mysterious-blue-200: #b8dbe3;
--color-mysterious-blue-300: #95c0c9;
--color-mysterious-blue-400: #75a8b2;
--color-mysterious-blue-500: #54919c;
--color-mysterious-blue-600: #487b84;
--color-mysterious-blue-700: #39626a;
--color-mysterious-blue-800: #28484d;
--color-mysterious-blue-900: #1b3236;
--color-mysterious-blue-950: #0b1e21;
}SCSS
$mysterious-blue: #487e88;
$mysterious-blue-rgb: 72, 126, 136;
$mysterious-blue-light: mix(#fff, $mysterious-blue, 20%);
$mysterious-blue-dark: mix(#000, $mysterious-blue, 20%);
.element {
color: $mysterious-blue;
box-shadow: 0 0 0 2px rgba($mysterious-blue, 0.35);
}