#304c8c

Color #304c8c

A moderately saturated dark blue.

Closest named color Dark Slate Blue #483d8b · ΔE 15.34 Nearest Tailwind class blue-900 #1c398e · ΔE 6.2

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

Conversions

HEX

#304c8c

RGB

rgb(48, 76, 140)

HSL

hsl(221.7, 48.9%, 36.9%)

HSV / HSB

hsv(221.7, 65.7%, 54.9%)

CMYK

cmyk(65.7%, 45.7%, 0%, 45.1%)

LAB

lab(33.33, 11.28, -38.78)

LCH

lch(33.33, 40.39, 286.22)

OKLCH

oklch(42.9%, 0.1112, 264.43)

HWB

hwb(221.7, 18.8%, 45.1%)

Harmony colors

Complementary

#8c7030

Analogous

#307a8c

#304c8c

#42308c

Triadic

#304c8c

#8c304c

#4c8c30

Split-complementary

#304c8c

#8c4230

#7a8c30

Tetradic

#304c8c

#70308c

#8c7030

#4c8c30

Square

#304c8c

#8c307a

#8c7030

#308c42

Shades

Color #304c8c mixed toward black.

#283f75

#20335d

#182646

#10192f

#080d17

Tints

Color #304c8c mixed toward white.

#3e62b4

#5f7fc8

#879fd6

#afbfe4

#d7dff1

Tones

Color #304c8c mixed toward gray.

#384f84

#3f527d

#475575

#4f586d

#565b66

Accessibility

Aa White text on this color

8.27:1

Aa Black text on this color

2.54:1

White text reads better on this background (8.27:1). That passes WCAG AAA (≥7:1) for normal-size text.

Under color vision deficiencies

Protanopia

#3e3e80 · ΔE 6.9

Deuteranopia

#3c3a7d · ΔE 7.9

Tritanopia

#327673 · ΔE 28.2

Achromatopsia

#4e4e4e · ΔE 21.4

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

Code

CSS

background-color: #304c8c;

Tailwind (arbitrary value)

bg-[#304c8c]

Related colors

Cornflower Blue #6495ed

Royal Blue #4169e1

Light Steel Blue #b0c4de

Light Slate Gray #778899

Slate Gray #708090

Dodger Blue #1e90ff

Frequently asked questions

#304c8c (#304c8c) is rgb(48, 76, 140) in RGB.

No, #304c8c 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 #304c8c, or check how it holds up for accessibility.

Generate a palette → Check contrast