Named color · #30A9FF
Xed
Xed is #30A9FF: rgb(48 169 255), hsl(205 100% 59%), oklch(0.71 0.162 245.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Xed color name →
#30A9FF
oklch(0.71 0.162 245.2)
Color conversions
- 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%)
Tints · Shades · Tones
Tints
- 4EB2FF
- 66BBFF
- 7CC4FF
- 90CDFF
- A3D6FF
- B6DEFF
- C8E6FF
- DBEFFF
- EDF7FF
Shades
- 2892DE
- 217CBE
- 1A679E
- 135380
- 0C3F63
- 062C48
- 031B2E
- 010A16
- 000103
Tones
- 40A5F2
- 4CA2E5
- 569ED9
- 5E9ACC
- 6696BF
- 6C92B3
- 728EA6
- 778999
- 7C858D
Color harmonies
Complementary +180°
- 30A9FF
Xed
- E38900
≈ Hotter Butter
Analogous -30° +30°
Triadic +120° +240°
Split-complementary +150° +210°
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 2.54:1 · APCA Lc 49
Ag
AAAOn black
WCAG 8.24:1 · APCA Lc 53
Best text color: #000000
WCAG 8.24:1 (AAA) · APCA Lc 53
Contrast pairs
Code snippets
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);
}