이름 색상 · #556B87

Aurora Borealis

Aurora Borealis은(는) #556B87: rgb(85 107 135), hsl(214 23% 43%), oklch(0.521 0.052 254.7). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.

What does Blue mean? → · Aurora Borealis color name →

#556B87

oklch(0.521 0.052 254.7)

색상 변환

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%)

틴트 · 셰이드 · 톤

틴트

657993
75879E
8595AA
96A4B6
A6B2C2
B8C1CE
C9D1DA
DBE0E6
EDEFF3

셰이드

495C75
3D4E63
313F51
263241
1C2531
111821
080D13
020406
000001

톤

596D86
5E6F86
627185
667485
6B7684
6F7883
737A82
777C82
7C7E81

색 조화

보색 +180°

556B87
Aurora Borealis
7B6547
≈ Loden Blanket

유사색 -30° +30°

삼각 배색 +120° +240°

556B87
Aurora Borealis
845D60
≈ Tarsier
5D7052
≈ Cactus

분열 보색 +150° +210°

사각 배색 +90° +180° +270°

대비 및 접근성

흰색 위

WCAG 5.46:1 · APCA Lc 77

검은색 위

WCAG 3.83:1 · APCA Lc 24

Fail

가장 좋은 글자색: #FFFFFF

WCAG 5.46:1 (AA) · APCA Lc 77

Contrast pairs

코드 스니펫

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);
}

비슷한 이름 색상

Palettes with similar colors

도구에서 열기

피커 조합 대비 검사기 Studio JSON API