#486db2

Color #486db2

A moderately saturated medium blue.

Closest named color Steel Blue #4682b4 · ΔE 16.22 Nearest Tailwind class sky-700 #0069a8 · ΔE 7.7

Open in Palette generator Color wheel Color mixer Contrast checker Blindness simulator Gradient

Conversions

HEX

#486db2

RGB

rgb(72, 109, 178)

HSL

hsl(219.1, 42.4%, 49%)

HSV / HSB

hsv(219.1, 59.6%, 69.8%)

CMYK

cmyk(59.6%, 38.8%, 0%, 30.2%)

LAB

lab(46.35, 8.33, -40.65)

LCH

lch(46.35, 41.49, 281.58)

OKLCH

oklch(54%, 0.1165, 261.9)

HWB

hwb(219.1, 28.2%, 30.2%)

Harmony colors

Complementary

#b28d48

Analogous

#48a2b2

#486db2

#5848b2

Triadic

#486db2

#b2486d

#6db248

Split-complementary

#486db2

#b25848

#a2b248

Tetradic

#486db2

#8d48b2

#b28d48

#6db248

Square

#486db2

#b248a2

#b28d48

#48b258

Shades

Color #486db2 mixed toward black.

#3c5b94

#304977

#243659

#18243b

#0c121e

Tints

Color #486db2 mixed toward white.

#6585c1

#849dcd

#a2b6da

#c1cee6

#e0e7f3

Tones

Color #486db2 mixed toward gray.

#5170a9

#5a72a0

#627597

#6b788f

#747a86

Accessibility

Aa White text on this color

5.11:1

Aa Black text on this color

4.11:1

White text reads better on this background (5.11:1). That passes WCAG AA (≥4.5:1) for normal-size text, but not AAA.

Under color vision deficiencies

Protanopia

#5a5ba5 · ΔE 9.1

Deuteranopia

#5855a1 · ΔE 10.8

Tritanopia

#4a9996 · ΔE 28.5

Achromatopsia

#6e6e6e · ΔE 21.6

Left half is the original, right half is the simulated appearance. See all 8 vision types →

Code

CSS

background-color: #486db2;

Tailwind (arbitrary value)

bg-[#486db2]

Related colors

Cornflower Blue #6495ed

Light Steel Blue #b0c4de

Royal Blue #4169e1

Light Slate Gray #778899

Slate Gray #708090

Dodger Blue #1e90ff

Frequently asked questions

#486db2 (#486db2) is rgb(72, 109, 178) in RGB.

No, #486db2 is not web-safe. The nearest web-safe colors are among its tones and shades below.

Related tools

Colors

HEX to RGB Converter

Convert any HEX color code to its RGB and HSL equivalents, live, with copy-to-clipboard values.

Try it → Accessibility

Contrast Checker

Check the WCAG contrast ratio between any two colors, live, with AA/AAA pass-fail results.

Try it → Generators

Palette Generator

Generate complementary, analogous, triadic, split-complementary, tetradic, square, and monochromatic palettes from any base color.

Try it →

Build something with this color

Generate a full palette from #486db2, or check how it holds up for accessibility.

Generate a palette → Check contrast