Steel Blue
#239FBE
CyanColor Codes
All color formats for development
HEX
#239FBERGB
rgb(35, 159, 190)HSL
hsl(192, 69%, 44%)OKLCH
oklch(0.652 0.111 219.7)CMYK
cmyk(82%, 16%, 0%, 25%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#1F8FAB
2#1C7F98
3#186F85
4#155F72
5#114F5F
6#0E3F4C
7#0A3039
8#072026
9#031013
Tints
Lighter variations
1#27B3D6
2#3EBCDC
3#56C4E0
4#6ECDE4
5#86D5E9
6#9EDEED
7#B7E6F2
8#CFEEF6
9#E7F7FB
Tones
Muted variations
1#2B9AB6
2#3295AE
3#3A91A6
4#428C9F
5#498797
6#51838F
7#597E87
8#617980
9#687578
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F2FB #F2FBFD | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E1F5 #E1F5F9 | Light backgroundsTable row hoverSkeleton loading |
| 200 | C7EC #C7ECF5 | Secondary backgroundsInput backgroundsDividers |
| 300 | 9CDD #9CDDED | BordersInactive statesPlaceholder text |
| 400 | 68CB #68CBE3 | Disabled statesSecondary iconsMuted text |
| 500 | 3DBC #3DBCDB | Primary brand colorCTAsActive elementsLinks |
| 600 | 239F #239FBE | Hover statesFocus ringsPrimary buttons hover |
| 700 | 1C7E #1C7E97 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 145A #145A6C | Text on light backgroundsHeadingsStrong borders |
| 900 | 0D3A #0D3A45 | Primary textHigh emphasis contentDark headings |
| 950 | 0824 #08242B | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--steel-blue-50: #F2FBFD;
--steel-blue-100: #E1F5F9;
--steel-blue-200: #C7ECF5;
--steel-blue-300: #9CDDED;
--steel-blue-400: #68CBE3;
--steel-blue-500: #3DBCDB;
--steel-blue-600: #239FBE;
--steel-blue-700: #1C7E97;
--steel-blue-800: #145A6C;
--steel-blue-900: #0D3A45;
--steel-blue-950: #08242B;
}