Steel Blue

#7390D9

Blue

Color Codes

All color formats for development

HEX

#7390D9

RGB

rgb(115, 144, 217)

HSL

hsl(223, 57%, 65%)

OKLCH

oklch(0.662 0.114 266.8)

CMYK

cmyk(47%, 34%, 0%, 15%)

Accessibility

WCAG contrast compliance

On White Background

3.12:1

AA ✗AAA ✗

On Black Background

6.72:1

AA ✓AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#F3F5

100

#E3E9

200

#CBD6

300

#A3B6

400

#7390

500

#4B70

600

#3054

700

#2643

800

#1B30

900

#121F

950

#0B13

Shades

Darker variations

1#597BD1

2#3F66CA

3#3257B6

4#2B4B9C

5#243E82

6#1D3268

7#15254E

8#0E1934

9#070C1A

Tints

Lighter variations

1#819BDC

2#8FA6E0

3#9DB1E4

4#ABBCE8

5#B9C7EC

6#C7D2F0

7#D5DEF3

8#E3E9F7

9#F1F4FB

Tones

Muted variations

1#7892D4

2#7D94CE

3#8296C9

4#8799C4

5#8C9BBF

6#919DBA

7#969FB5

8#9CA1B0

9#A1A4AB

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	F3F5 `#F3F5FC`	BackgroundsSubtle highlightsCard backgrounds
100	E3E9 `#E3E9F7`	Light backgroundsTable row hoverSkeleton loading
200	CBD6 `#CBD6F1`	Secondary backgroundsInput backgroundsDividers
300	A3B6 `#A3B6E6`	BordersInactive statesPlaceholder text
400	7390 `#7390D9`	Disabled statesSecondary iconsMuted text
500	4B70 `#4B70CE`	Primary brand colorCTAsActive elementsLinks
600	3054 `#3054B0`	Hover statesFocus ringsPrimary buttons hover
700	2643 `#26438C`	Active/pressed statesDark mode accentsSecondary text
800	1B30 `#1B3064`	Text on light backgroundsHeadingsStrong borders
900	121F `#121F40`	Primary textHigh emphasis contentDark headings
950	0B13 `#0B1328`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --steel-blue-50: #F3F5FC;
  --steel-blue-100: #E3E9F7;
  --steel-blue-200: #CBD6F1;
  --steel-blue-300: #A3B6E6;
  --steel-blue-400: #7390D9;
  --steel-blue-500: #4B70CE;
  --steel-blue-600: #3054B0;
  --steel-blue-700: #26438C;
  --steel-blue-800: #1B3064;
  --steel-blue-900: #121F40;
  --steel-blue-950: #0B1328;
}

Generate More Shades Create Palette Convert Color