Teal
#065579
BlueColor Codes
All color formats for development
HEX
#065579RGB
rgb(6, 85, 121)HSL
hsl(199, 91%, 25%)OKLCH
oklch(0.426 0.09 236.5)CMYK
cmyk(95%, 30%, 0%, 53%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#054D6E
2#054461
3#043C55
4#033349
5#032B3D
6#022231
7#021A25
8#011118
9#01090C
Tints
Lighter variations
1#076F9E
2#0988C3
3#0BA2E7
4#24B3F5
5#48BFF6
6#6DCCF8
7#91D9FA
8#B6E6FC
9#DAF2FD
Tones
Muted variations
1#0C5374
2#11516E
3#174F68
4#1D4D63
5#234A5D
6#294857
7#2E4651
8#34444B
9#3A4246
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0FA #F0FAFE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DDF3 #DDF3FD | Light backgroundsTable row hoverSkeleton loading |
| 200 | C0E9 #C0E9FC | Secondary backgroundsInput backgroundsDividers |
| 300 | 8FD8 #8FD8FA | BordersInactive statesPlaceholder text |
| 400 | 55C4 #55C4F7 | Disabled statesSecondary iconsMuted text |
| 500 | 24B3 #24B3F5 | Primary brand colorCTAsActive elementsLinks |
| 600 | 0A96 #0A96D6 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0877 #0877AA | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0655 #06557A | Text on light backgroundsHeadingsStrong borders |
| 900 | 0436 #04364E | Primary textHigh emphasis contentDark headings |
| 950 | 0222 #022231 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--teal-50: #F0FAFE;
--teal-100: #DDF3FD;
--teal-200: #C0E9FC;
--teal-300: #8FD8FA;
--teal-400: #55C4F7;
--teal-500: #24B3F5;
--teal-600: #0A96D6;
--teal-700: #0877AA;
--teal-800: #06557A;
--teal-900: #04364E;
--teal-950: #022231;
}