Steel Blue

#6685B2

Blue

Color Codes

All color formats for development

HEX

#6685B2

RGB

rgb(102, 133, 178)

HSL

hsl(216, 33%, 55%)

OKLCH

oklch(0.611 0.077 257.6)

CMYK

cmyk(43%, 25%, 0%, 30%)

Accessibility

WCAG contrast compliance

On White Background

3.78:1

AA ✗AAA ✗

On Black Background

5.56:1

AA ✓AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#F5F7

100

#E7EC

200

#D3DC

300

#B1C0

400

#88A0

500

#6685

600

#4B69

700

#3C53

800

#2B3C

900

#1B26

950

#1118

Shades

Darker variations

1#5576A8

2#4B6995

3#425C83

4#384F70

5#2F415D

6#26344B

7#1C2738

8#131A25

9#090D13

Tints

Lighter variations

1#7691BA

2#859DC1

3#94A9C9

4#A3B6D1

5#B3C2D9

6#C2CEE0

7#D1DAE8

8#E0E7F0

9#F0F3F7

Tones

Muted variations

1#6A85AE

2#6E86AB

3#7287A7

4#7688A3

5#79889F

6#7D899B

7#818A98

8#858B94

9#888B90

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	F5F7 `#F5F7FA`	BackgroundsSubtle highlightsCard backgrounds
100	E7EC `#E7ECF3`	Light backgroundsTable row hoverSkeleton loading
200	D3DC `#D3DCE9`	Secondary backgroundsInput backgroundsDividers
300	B1C0 `#B1C0D8`	BordersInactive statesPlaceholder text
400	88A0 `#88A0C3`	Disabled statesSecondary iconsMuted text
500	6685 `#6685B2`	Primary brand colorCTAsActive elementsLinks
600	4B69 `#4B6995`	Hover statesFocus ringsPrimary buttons hover
700	3C53 `#3C5377`	Active/pressed statesDark mode accentsSecondary text
800	2B3C `#2B3C55`	Text on light backgroundsHeadingsStrong borders
900	1B26 `#1B2636`	Primary textHigh emphasis contentDark headings
950	1118 `#111822`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --steel-blue-50: #F5F7FA;
  --steel-blue-100: #E7ECF3;
  --steel-blue-200: #D3DCE9;
  --steel-blue-300: #B1C0D8;
  --steel-blue-400: #88A0C3;
  --steel-blue-500: #6685B2;
  --steel-blue-600: #4B6995;
  --steel-blue-700: #3C5377;
  --steel-blue-800: #2B3C55;
  --steel-blue-900: #1B2636;
  --steel-blue-950: #111822;
}

Generate More Shades Create Palette Convert Color