Steel Blue

#3DA2A4

Cyan

Color Codes

All color formats for development

HEX

#3DA2A4

RGB

rgb(61, 162, 164)

HSL

hsl(181, 46%, 44%)

OKLCH

oklch(0.655 0.092 197)

CMYK

cmyk(63%, 1%, 0%, 36%)

Accessibility

WCAG contrast compliance

On White Background

3.04:1

AA ✗AAA ✗

On Black Background

6.90:1

AA ✓AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#F4FB

100

#E5F5

200

#CFED

300

#A9DE

400

#7DCD

500

#57BF

600

#3DA2

700

#3081

800

#225C

900

#163B

950

#0E25

Shades

Darker variations

1#379293

2#308283

3#2A7173

4#246162

5#1E5152

6#184142

7#123131

8#0C2021

9#061010

Tints

Lighter variations

1#44B7B9

2#58C0C1

3#6DC7C9

4#82CFD1

5#97D7D8

6#ACDFE0

7#C0E7E8

8#D5EFF0

9#EAF7F7

Tones

Muted variations

1#429D9F

2#479899

3#4C9394

4#518E8F

5#56898A

6#5C8485

7#617F80

8#667A7B

9#6B7575

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	F4FB `#F4FBFB`	BackgroundsSubtle highlightsCard backgrounds
100	E5F5 `#E5F5F5`	Light backgroundsTable row hoverSkeleton loading
200	CFED `#CFEDED`	Secondary backgroundsInput backgroundsDividers
300	A9DE `#A9DEDF`	BordersInactive statesPlaceholder text
400	7DCD `#7DCDCF`	Disabled statesSecondary iconsMuted text
500	57BF `#57BFC1`	Primary brand colorCTAsActive elementsLinks
600	3DA2 `#3DA2A4`	Hover statesFocus ringsPrimary buttons hover
700	3081 `#308182`	Active/pressed statesDark mode accentsSecondary text
800	225C `#225C5D`	Text on light backgroundsHeadingsStrong borders
900	163B `#163B3C`	Primary textHigh emphasis contentDark headings
950	0E25 `#0E2525`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --steel-blue-50: #F4FBFB;
  --steel-blue-100: #E5F5F5;
  --steel-blue-200: #CFEDED;
  --steel-blue-300: #A9DEDF;
  --steel-blue-400: #7DCDCF;
  --steel-blue-500: #57BFC1;
  --steel-blue-600: #3DA2A4;
  --steel-blue-700: #308182;
  --steel-blue-800: #225C5D;
  --steel-blue-900: #163B3C;
  --steel-blue-950: #0E2525;
}

Generate More Shades Create Palette Convert Color