Nazwany kolor · #556B87
Aurora Borealis
Aurora Borealis to #556B87: rgb(85 107 135), hsl(214 23% 43%), oklch(0.521 0.052 254.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Blue mean? → · Aurora Borealis color name →
#556B87
oklch(0.521 0.052 254.7)
Konwersje koloru
- HEX
- #556b87
- RGB
- rgb(85 107 135)
- HSL
- hsl(214 23% 43%)
- HWB
- hwb(214 33% 47%)
- OKLCH
- oklch(0.521 0.052 254.7)
- OKLab
- oklab(0.521 -0.014 -0.05)
- CIE Lab
- lab(44.28 -2.84 -18.35)
- LCH
- lch(44.28 18.57 261.2)
- CMYK
- cmyk(37% 21% 0% 47%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 657993
- 75879E
- 8595AA
- 96A4B6
- A6B2C2
- B8C1CE
- C9D1DA
- DBE0E6
- EDEFF3
Odcienie ciemniejsze
- 495C75
- 3D4E63
- 313F51
- 263241
- 1C2531
- 111821
- 080D13
- 020406
- 000001
Tony
- 596D86
- 5E6F86
- 627185
- 667485
- 6B7684
- 6F7883
- 737A82
- 777C82
- 7C7E81
Harmonie kolorów
Komplementarna +180°
- 556B87
Aurora Borealis
- 7B6547
≈ Loden Blanket
Analogowa -30° +30°
- 556B87
Aurora Borealis
- 477080
≈ Wild River
- 666586
≈ Daemonette Hide
Triada +120° +240°
- 556B87
Aurora Borealis
- 845D60
≈ Tarsier
- 5D7052
≈ Cactus
Komplementarna rozszczepiona +150° +210°
- 556B87
Aurora Borealis
- 836051
≈ Chocolate Bliss
- 6E6B48
≈ Beat Around the Bush
Tetrada +90° +180° +270°
- 556B87
Aurora Borealis
- 7F5D70
≈ Chicha Morada
- 7B6547
≈ Loden Blanket
- 4C7362
≈ Christmas Ivy
Kontrast i dostępność
Ag
AANa bieli
WCAG 5.46:1 · APCA Lc 77
Ag
FailNa czerni
WCAG 3.83:1 · APCA Lc 24
Najlepszy kolor tekstu: #FFFFFF
WCAG 5.46:1 (AA) · APCA Lc 77
Contrast pairs
Fragmenty kodu
CSS
:root {
--aurora-borealis: #556b87;
--aurora-borealis-rgb: 85 107 135;
--aurora-borealis-oklch: oklch(0.521 0.052 254.7);
}
.element {
color: var(--aurora-borealis);
background-color: hsl(214 23% 43%);
border-color: oklch(0.521 0.052 254.7);
}Tailwind CSS v4
@theme {
--color-aurora-borealis: #556b87;
--color-aurora-borealis-50: #ecf6ff;
--color-aurora-borealis-100: #dde9fa;
--color-aurora-borealis-200: #c6d6eb;
--color-aurora-borealis-300: #a7b9d2;
--color-aurora-borealis-400: #8aa0bd;
--color-aurora-borealis-500: #6f88a8;
--color-aurora-borealis-600: #5e738e;
--color-aurora-borealis-700: #4b5c72;
--color-aurora-borealis-800: #364454;
--color-aurora-borealis-900: #252f3b;
--color-aurora-borealis-950: #131b25;
}SCSS
$aurora-borealis: #556b87;
$aurora-borealis-rgb: 85, 107, 135;
$aurora-borealis-light: mix(#fff, $aurora-borealis, 20%);
$aurora-borealis-dark: mix(#000, $aurora-borealis, 20%);
.element {
color: $aurora-borealis;
box-shadow: 0 0 0 2px rgba($aurora-borealis, 0.35);
}