Slate Gray
#528E8E
CyanColor Codes
All color formats for development
HEX
#528E8ERGB
rgb(82, 142, 142)HSL
hsl(180, 27%, 44%)OKLCH
oklch(0.606 0.063 195.6)CMYK
cmyk(42%, 0%, 0%, 44%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#4A8080
2#427272
3#396464
4#315555
5#294747
6#213939
7#192B2B
8#101C1C
9#080E0E
Tints
Lighter variations
1#5CA1A1
2#6EACAC
3#80B6B6
4#92C0C0
5#A4CBCB
6#B6D5D5
7#C9E0E0
8#DBEAEA
9#EDF5F5
Tones
Muted variations
1#558B8B
2#588888
3#5B8585
4#5E8282
5#617F7F
6#647C7C
7#677979
8#6A7676
9#6D7373
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F5F9 #F5F9F9 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E8F2 #E8F2F2 | Light backgroundsTable row hoverSkeleton loading |
| 200 | D5E7 #D5E7E7 | Secondary backgroundsInput backgroundsDividers |
| 300 | B5D4 #B5D4D4 | BordersInactive statesPlaceholder text |
| 400 | 8EBE #8EBEBE | Disabled statesSecondary iconsMuted text |
| 500 | 6DAB #6DABAB | Primary brand colorCTAsActive elementsLinks |
| 600 | 528E #528E8E | Hover statesFocus ringsPrimary buttons hover |
| 700 | 4171 #417171 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 2F51 #2F5151 | Text on light backgroundsHeadingsStrong borders |
| 900 | 1E34 #1E3434 | Primary textHigh emphasis contentDark headings |
| 950 | 1320 #132020 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--slate-gray-50: #F5F9F9;
--slate-gray-100: #E8F2F2;
--slate-gray-200: #D5E7E7;
--slate-gray-300: #B5D4D4;
--slate-gray-400: #8EBEBE;
--slate-gray-500: #6DABAB;
--slate-gray-600: #528E8E;
--slate-gray-700: #417171;
--slate-gray-800: #2F5151;
--slate-gray-900: #1E3434;
--slate-gray-950: #132020;
}