Teal
#0A6476
CyanColor Codes
All color formats for development
HEX
#0A6476RGB
rgb(10, 100, 118)HSL
hsl(190, 84%, 25%)OKLCH
oklch(0.465 0.08 216.4)CMYK
cmyk(92%, 15%, 0%, 54%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#095A6A
2#08505E
3#074652
4#063C46
5#05323B
6#04282F
7#031E23
8#021417
9#010A0C
Tints
Lighter variations
1#0D8198
2#109FBC
3#13BDDF
4#2CCDED
5#4FD5F0
6#72DDF3
7#95E6F6
8#B9EEF9
9#DCF7FC
Tones
Muted variations
1#106070
2#155C6B
3#1A5965
4#205560
5#25525B
6#2A4E55
7#304A50
8#35474A
9#3A4345
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1FC #F1FCFE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DEF7 #DEF7FC | Light backgroundsTable row hoverSkeleton loading |
| 200 | C2F0 #C2F0FA | Secondary backgroundsInput backgroundsDividers |
| 300 | 93E5 #93E5F6 | BordersInactive statesPlaceholder text |
| 400 | 5BD8 #5BD8F1 | Disabled statesSecondary iconsMuted text |
| 500 | 2CCD #2CCDED | Primary brand colorCTAsActive elementsLinks |
| 600 | 12AF #12AFCE | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0E8B #0E8BA4 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0A63 #0A6375 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0740 #07404B | Primary textHigh emphasis contentDark headings |
| 950 | 0428 #04282F | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--teal-50: #F1FCFE;
--teal-100: #DEF7FC;
--teal-200: #C2F0FA;
--teal-300: #93E5F6;
--teal-400: #5BD8F1;
--teal-500: #2CCDED;
--teal-600: #12AFCE;
--teal-700: #0E8BA4;
--teal-800: #0A6375;
--teal-900: #07404B;
--teal-950: #04282F;
}