Named color · #5539CC
Blurple
Blurple is #5539CC: rgb(85 57 204), hsl(251 59% 51%), oklch(0.474 0.213 283.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Blurple color name →
#5539CC
oklch(0.474 0.213 283.4)
Color conversions
- HEX
- #5539cc
- RGB
- rgb(85 57 204)
- HSL
- hsl(251 59% 51%)
- HWB
- hwb(251 22% 20%)
- OKLCH
- oklch(0.474 0.213 283.4)
- OKLab
- oklab(0.474 0.049 -0.207)
- CIE Lab
- lab(35.23 43.06 -73.41)
- LCH
- lch(35.23 85.11 300.4)
- CMYK
- cmyk(58% 72% 0% 20%)
Tints · Shades · Tones
Tints
- 6251D3
- 7067DA
- 7F7BE0
- 908EE6
- A1A1EB
- B3B4F0
- C5C7F4
- D8D9F8
- EBECFC
Shades
- 4930B1
- 3D2897
- 311F7E
- 261765
- 1C104E
- 110937
- 080422
- 02010F
- 000002
Tones
- 5744C5
- 5A4EBF
- 5E56B8
- 625EB1
- 6664A9
- 6B6BA2
- 70709A
- 757692
- 7A7B89
Color harmonies
Complementary +180°
- 5539CC
Blurple
- 665E00
≈ Brussels Sprout Green
Analogous -30° +30°
- 5539CC
Blurple
- 005BAC
≈ Bottled Sea
- 841EAD
≈ Shade of Violet
Triadic +120° +240°
- 5539CC
Blurple
- 993A00
≈ Chocoholic
- 006D4C
≈ Environmental Green
Split-complementary +150° +210°
- 5539CC
Blurple
- 7D5100
≈ Intense Brown
- 3A6B00
≈ Tatzelwurm Green
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
AAAOn white
WCAG 7.38:1 · APCA Lc 85
Ag
FailOn black
WCAG 2.84:1 · APCA Lc 17
Best text color: #FFFFFF
WCAG 7.38:1 (AAA) · APCA Lc 85
Contrast pairs
Code snippets
CSS
:root {
--blurple: #5539cc;
--blurple-rgb: 85 57 204;
--blurple-oklch: oklch(0.474 0.213 283.4);
}
.element {
color: var(--blurple);
background-color: hsl(251 59% 51%);
border-color: oklch(0.474 0.213 283.4);
}Tailwind CSS v4
@theme {
--color-blurple: #5539cc;
--color-blurple-50: #efedff;
--color-blurple-100: #e0deff;
--color-blurple-200: #ccc7ff;
--color-blurple-300: #aea5ff;
--color-blurple-400: #9286ff;
--color-blurple-500: #7b64ff;
--color-blurple-600: #6856e1;
--color-blurple-700: #5345b5;
--color-blurple-800: #3a3288;
--color-blurple-900: #272261;
--color-blurple-950: #161042;
}SCSS
$blurple: #5539cc;
$blurple-rgb: 85, 57, 204;
$blurple-light: mix(#fff, $blurple, 20%);
$blurple-dark: mix(#000, $blurple, 20%);
.element {
color: $blurple;
box-shadow: 0 0 0 2px rgba($blurple, 0.35);
}