Teal
#137DA0
BlueColor Codes
All color formats for development
HEX
#137DA0RGB
rgb(19, 125, 160)HSL
hsl(195, 79%, 35%)OKLCH
oklch(0.551 0.102 227.2)CMYK
cmyk(88%, 22%, 0%, 37%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#117090
2#0F6480
3#0D5770
4#0B4B60
5#093E50
6#073240
7#062530
8#041920
9#020C10
Tints
Lighter variations
1#1694BD
2#1AABDB
3#2FB9E7
4#4DC3EA
5#6BCDEE
6#88D7F1
7#A6E1F5
8#C4EBF8
9#E1F5FC
Tones
Muted variations
1#1A7999
2#217592
3#28728B
4#2F6E84
5#366B7D
6#3D6775
7#44646E
8#4B6067
9#525D60
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1FA #F1FAFD | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DFF4 #DFF4FB | Light backgroundsTable row hoverSkeleton loading |
| 200 | C4EB #C4EBF8 | Secondary backgroundsInput backgroundsDividers |
| 300 | 96DC #96DCF3 | BordersInactive statesPlaceholder text |
| 400 | 5FC9 #5FC9EC | Disabled statesSecondary iconsMuted text |
| 500 | 32BA #32BAE7 | Primary brand colorCTAsActive elementsLinks |
| 600 | 189D #189DC9 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 137D #137DA0 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0D59 #0D5972 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0939 #093949 | Primary textHigh emphasis contentDark headings |
| 950 | 0524 #05242E | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--teal-50: #F1FAFD;
--teal-100: #DFF4FB;
--teal-200: #C4EBF8;
--teal-300: #96DCF3;
--teal-400: #5FC9EC;
--teal-500: #32BAE7;
--teal-600: #189DC9;
--teal-700: #137DA0;
--teal-800: #0D5972;
--teal-900: #093949;
--teal-950: #05242E;
}