이름 색상 · #30A9FF
Xed
Xed은(는) #30A9FF: rgb(48 169 255), hsl(205 100% 59%), oklch(0.71 0.162 245.2). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Blue mean? → · Xed color name →
#30A9FF
oklch(0.71 0.162 245.2)
색상 변환
- HEX
- #30a9ff
- RGB
- rgb(48 169 255)
- HSL
- hsl(205 100% 59%)
- HWB
- hwb(205 19% 0%)
- OKLCH
- oklch(0.71 0.162 245.2)
- OKLab
- oklab(0.71 -0.068 -0.147)
- CIE Lab
- lab(65.87 -10.84 -52.83)
- LCH
- lch(65.87 53.93 258.4)
- CMYK
- cmyk(81% 34% 0% 0%)
틴트 · 셰이드 · 톤
틴트
- 4EB2FF
- 66BBFF
- 7CC4FF
- 90CDFF
- A3D6FF
- B6DEFF
- C8E6FF
- DBEFFF
- EDF7FF
셰이드
- 2892DE
- 217CBE
- 1A679E
- 135380
- 0C3F63
- 062C48
- 031B2E
- 010A16
- 000103
톤
- 40A5F2
- 4CA2E5
- 569ED9
- 5E9ACC
- 6696BF
- 6C92B3
- 728EA6
- 778999
- 7C858D
색 조화
보색 +180°
- 30A9FF
Xed
- E38900
≈ Hotter Butter
유사색 -30° +30°
삼각 배색 +120° +240°
분열 보색 +150° +210°
사각 배색 +90° +180° +270°
대비 및 접근성
Ag
Fail흰색 위
WCAG 2.54:1 · APCA Lc 49
Ag
AAA검은색 위
WCAG 8.24:1 · APCA Lc 53
가장 좋은 글자색: #000000
WCAG 8.24:1 (AAA) · APCA Lc 53
Contrast pairs
코드 스니펫
CSS
:root {
--xed: #30a9ff;
--xed-rgb: 48 169 255;
--xed-oklch: oklch(0.71 0.162 245.2);
}
.element {
color: var(--xed);
background-color: hsl(205 100% 59%);
border-color: oklch(0.71 0.162 245.2);
}Tailwind CSS v4
@theme {
--color-xed: #30a9ff;
--color-xed-50: #d1faff;
--color-xed-100: #bdeeff;
--color-xed-200: #9bdbff;
--color-xed-300: #6ebeff;
--color-xed-400: #37a6f7;
--color-xed-500: #008ce9;
--color-xed-600: #0077c4;
--color-xed-700: #005f9e;
--color-xed-800: #004675;
--color-xed-900: #003153;
--color-xed-950: #001c37;
}SCSS
$xed: #30a9ff;
$xed-rgb: 48, 169, 255;
$xed-light: mix(#fff, $xed, 20%);
$xed-dark: mix(#000, $xed, 20%);
.element {
color: $xed;
box-shadow: 0 0 0 2px rgba($xed, 0.35);
}