Skip to content

#504afd

a balanced, electric blue · warm · closest name: blue

RGB
80, 74, 253
HSL
242°, 98%, 64%
CMYK
68, 71, 0, 1
Luminance
0.1369

Every format

HEX#504afd
RGBrgb(80, 74, 253)
HSLhsl(242, 98%, 64%)
CMYKcmyk(68%, 71%, 0%, 1%)
LABlab(43.8 56.0 -87.6)
LCHlch(43.8 104.0 302.6)
OKLCHoklch(0.539 0.254 275.2)

Copy-ready code

/* CSS */
color: #504afd;
background-color: #504afd;
/* Tailwind (arbitrary) */
class="text-[#504afd] bg-[#504afd]"
/* SCSS */
$brand: #504afd;
/* SwiftUI */
Color(red: 0.314, green: 0.290, blue: 0.992)
/* Android */
Color.parseColor("#504afd")

Accessibility — WCAG contrast

Aa
#504afd on white: 5.62:1
AA ✓ pass · AA-large · AAA
Aa
#504afd on black: 3.74:1
AA ✗ fail · AA-large · AAA
true color
protanopia
deuteranopia
tritanopia

RGB percentages

Red31.4%
Green29.0%
Blue99.2%

CMYK percentages

Cyan68.4%
Magenta70.8%
Yellow0.0%
Key (black)0.8%

Color previews

#504afd text on a black background

contrast 3.74:1

Card sample

#504afd text on a white background

contrast 5.62:1

Card sample

CSS3 live lab

Text font color

The quick brown fox

color: #504afd;
Background color
Panel with #504afd background
background-color: #504afd;
Text shadow — hex

Glowing headline

text-shadow: 2px 2px 8px #504afd;
Text shadow — RGB

Soft neon halo

text-shadow: 0 0 14px rgba(80, 74, 253, 0.45);
Div box shadow
Elevated card
box-shadow: 0 12px 32px -8px rgba(80, 74, 253, 0.45);
Border & gradient
Gradient panel
border: 3px solid #504afd;
background: linear-gradient(135deg, #504afd, #C74AFD);

Monochromatic scale

Palettes built from #504afd

Shades — darker

Tints — lighter

Hue & tone neighbors

Color harmonies

Nearest named colors

Work with #504afd in the Color Lab