Steel Blue
#30B0A8
CyanColor Codes
All color formats for development
HEX
#30B0A8RGB
rgb(48, 176, 168)HSL
hsl(176, 57%, 44%)OKLCH
oklch(0.688 0.108 188.7)CMYK
cmyk(73%, 0%, 5%, 31%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#2B9F97
2#278D86
3#227B75
4#1D6A65
5#185854
6#134643
7#0E3532
8#0A2322
9#051211
Tints
Lighter variations
1#36C7BD
2#4CCEC5
3#62D4CC
4#78DAD4
5#8FE0DB
6#A5E6E2
7#BCEDE9
8#D2F3F1
9#E9F9F8
Tones
Muted variations
1#37AAA2
2#3DA39D
3#439D97
4#4A9791
5#50908C
6#578A86
7#5D8381
8#637D7B
9#6A7776
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F3FC #F3FCFB | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E3F7 #E3F7F6 | Light backgroundsTable row hoverSkeleton loading |
| 200 | CBF1 #CBF1EE | Secondary backgroundsInput backgroundsDividers |
| 300 | A3E6 #A3E6E1 | BordersInactive statesPlaceholder text |
| 400 | 73D9 #73D9D2 | Disabled statesSecondary iconsMuted text |
| 500 | 4BCE #4BCEC5 | Primary brand colorCTAsActive elementsLinks |
| 600 | 30B0 #30B0A8 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 268C #268C85 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 1B64 #1B645F | Text on light backgroundsHeadingsStrong borders |
| 900 | 1240 #12403D | Primary textHigh emphasis contentDark headings |
| 950 | 0B28 #0B2826 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--steel-blue-50: #F3FCFB;
--steel-blue-100: #E3F7F6;
--steel-blue-200: #CBF1EE;
--steel-blue-300: #A3E6E1;
--steel-blue-400: #73D9D2;
--steel-blue-500: #4BCEC5;
--steel-blue-600: #30B0A8;
--steel-blue-700: #268C85;
--steel-blue-800: #1B645F;
--steel-blue-900: #12403D;
--steel-blue-950: #0B2826;
}