Steel Blue

#4E8ECA

Blue

Color Codes

All color formats for development

HEX

#4E8ECA

RGB

rgb(78, 142, 202)

HSL

hsl(209, 54%, 55%)

OKLCH

oklch(0.63 0.112 248.6)

CMYK

cmyk(61%, 30%, 0%, 21%)

Accessibility

WCAG contrast compliance

On White Background

3.47:1

AA ✗AAA ✗

On Black Background

6.05:1

AA ✓AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#F3F7

100

#E4ED

200

#CCDE

300

#A5C5

400

#76A7

500

#4E8E

600

#3472

700

#295B

800

#1D41

900

#132A

950

#0C1A

Shades

Darker variations

1#3A80C2

2#3472AD

3#2D6497

4#275682

5#20476C

6#1A3956

7#132B41

8#0D1D2B

9#060E16

Tints

Lighter variations

1#609ACF

2#72A5D5

3#83B0DA

4#95BBDF

5#A7C7E5

6#B8D2EA

7#CADDEF

8#DCE8F4

9#EDF4FA

Tones

Muted variations

1#548EC4

2#5B8EBE

3#618EB8

4#678DB1

5#6D8DAB

6#738DA5

7#7A8D9F

8#808D99

9#868C92

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	F3F7 `#F3F7FB`	BackgroundsSubtle highlightsCard backgrounds
100	E4ED `#E4EDF7`	Light backgroundsTable row hoverSkeleton loading
200	CCDE `#CCDEF0`	Secondary backgroundsInput backgroundsDividers
300	A5C5 `#A5C5E4`	BordersInactive statesPlaceholder text
400	76A7 `#76A7D6`	Disabled statesSecondary iconsMuted text
500	4E8E `#4E8ECA`	Primary brand colorCTAsActive elementsLinks
600	3472 `#3472AD`	Hover statesFocus ringsPrimary buttons hover
700	295B `#295B89`	Active/pressed statesDark mode accentsSecondary text
800	1D41 `#1D4162`	Text on light backgroundsHeadingsStrong borders
900	132A `#132A3F`	Primary textHigh emphasis contentDark headings
950	0C1A `#0C1A27`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --steel-blue-50: #F3F7FB;
  --steel-blue-100: #E4EDF7;
  --steel-blue-200: #CCDEF0;
  --steel-blue-300: #A5C5E4;
  --steel-blue-400: #76A7D6;
  --steel-blue-500: #4E8ECA;
  --steel-blue-600: #3472AD;
  --steel-blue-700: #295B89;
  --steel-blue-800: #1D4162;
  --steel-blue-900: #132A3F;
  --steel-blue-950: #0C1A27;
}

Generate More Shades Create Palette Convert Color