이름 색상 · #220088

Orbital Kingdom

Orbital Kingdom은(는) #220088: rgb(34 0 136), hsl(255 100% 27%), oklch(0.3 0.187 276.1). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.

What does Blue mean? → · Orbital Kingdom color name →

#220088

oklch(0.3 0.187 276.1)

색상 변환

HEX: #220088
RGB: rgb(34 0 136)
HSL: hsl(255 100% 27%)
HWB: hwb(255 0% 47%)
OKLCH: oklch(0.3 0.187 276.1)
OKLab: oklab(0.3 0.02 -0.186)
CIE Lab: lab(14.67 44 -66.63)
LCH: lch(14.67 79.84 303.4)
CMYK: cmyk(75% 100% 0% 47%)

틴트 · 셰이드 · 톤

틴트

2F2A96
4045A3
535CB0
6973BC
808AC8
98A1D4
B0B8DF
CAD0EA
E4E7F5

셰이드

1C0075
160063
110052
0B0041
070031
030022
010013
000006
000001

톤

271C89
2D2C89
353989
3E4589
484F89
525A88
5D6487
686D85
747783

색 조화

보색 +180°

220088
Orbital Kingdom
372D00
≈ Secret Passage

유사색 -30° +30°

삼각 배색 +120° +240°

분열 보색 +150° +210°

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

대비 및 접근성

흰색 위

WCAG 14.75:1 · APCA Lc 100

AAA

검은색 위

WCAG 1.42:1 · APCA Lc 0

Fail

가장 좋은 글자색: #FFFFFF

WCAG 14.75:1 (AAA) · APCA Lc 100

Contrast pairs

코드 스니펫

CSS

:root {
  --orbital-kingdom: #220088;
  --orbital-kingdom-rgb: 34 0 136;
  --orbital-kingdom-oklch: oklch(0.3 0.187 276.1);
}

.element {
  color: var(--orbital-kingdom);
  background-color: hsl(255 100% 27%);
  border-color: oklch(0.3 0.187 276.1);
}

Tailwind CSS v4

@theme {
  --color-orbital-kingdom: #220088;
  --color-orbital-kingdom-50: #e8f1ff;
  --color-orbital-kingdom-100: #d9e2ff;
  --color-orbital-kingdom-200: #c1ccff;
  --color-orbital-kingdom-300: #a2acff;
  --color-orbital-kingdom-400: #8390ff;
  --color-orbital-kingdom-500: #6972ff;
  --color-orbital-kingdom-600: #5961d7;
  --color-orbital-kingdom-700: #474dad;
  --color-orbital-kingdom-800: #303982;
  --color-orbital-kingdom-900: #21275c;
  --color-orbital-kingdom-950: #11143f;
}

SCSS

$orbital-kingdom: #220088;
$orbital-kingdom-rgb: 34, 0, 136;
$orbital-kingdom-light: mix(#fff, $orbital-kingdom, 20%);
$orbital-kingdom-dark: mix(#000, $orbital-kingdom, 20%);

.element {
  color: $orbital-kingdom;
  box-shadow: 0 0 0 2px rgba($orbital-kingdom, 0.35);
}

비슷한 이름 색상

Palettes with similar colors

도구에서 열기

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