Teal
#106FA2
BlueColor Codes
All color formats for development
HEX
#106FA2RGB
rgb(16, 111, 162)HSL
hsl(201, 82%, 35%)OKLCH
oklch(0.517 0.113 240)CMYK
cmyk(90%, 31%, 0%, 36%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#0E6492
2#0D5982
3#0B4E72
4#0A4361
5#083851
6#062C41
7#052131
8#031620
9#020B10
Tints
Lighter variations
1#1384C1
2#1699DF
3#2CA8EA
4#4AB4ED
5#68C1F0
6#86CDF3
7#A5DAF6
8#C3E6F9
9#E1F3FC
Tones
Muted variations
1#176D9B
2#1F6B94
3#26698C
4#2D6685
5#35647E
6#3C6277
7#43606F
8#4B5E68
9#525B61
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1F9 #F1F9FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DFF2 #DFF2FC | Light backgroundsTable row hoverSkeleton loading |
| 200 | C3E6 #C3E6F9 | Secondary backgroundsInput backgroundsDividers |
| 300 | 94D3 #94D3F4 | BordersInactive statesPlaceholder text |
| 400 | 5DBC #5DBCEF | Disabled statesSecondary iconsMuted text |
| 500 | 2EA8 #2EA8EA | Primary brand colorCTAsActive elementsLinks |
| 600 | 148C #148CCC | Hover statesFocus ringsPrimary buttons hover |
| 700 | 106F #106FA2 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0B4F #0B4F74 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0733 #07334A | Primary textHigh emphasis contentDark headings |
| 950 | 0520 #05202E | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--teal-50: #F1F9FE;
--teal-100: #DFF2FC;
--teal-200: #C3E6F9;
--teal-300: #94D3F4;
--teal-400: #5DBCEF;
--teal-500: #2EA8EA;
--teal-600: #148CCC;
--teal-700: #106FA2;
--teal-800: #0B4F74;
--teal-900: #07334A;
--teal-950: #05202E;
}