Teal
#0F9EA3
CyanColor Codes
All color formats for development
HEX
#0F9EA3RGB
rgb(15, 158, 163)HSL
hsl(182, 83%, 35%)OKLCH
oklch(0.636 0.106 198.9)CMYK
cmyk(91%, 3%, 0%, 36%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#0E8F93
2#0C7F83
3#0B6F72
4#095F62
5#084F52
6#063F41
7#053031
8#032021
9#021010
Tints
Lighter variations
1#12BCC2
2#15D9E0
3#2BE5EB
4#49E9EE
5#67ECF1
6#86F0F4
7#A4F4F7
8#C2F8F9
9#E1FBFC
Tones
Muted variations
1#17979C
2#1E9195
3#258A8D
4#2D8386
5#347C7E
6#3C7577
7#436E6F
8#4A6768
9#526061
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1FD #F1FDFE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DEFB #DEFBFC | Light backgroundsTable row hoverSkeleton loading |
| 200 | C2F8 #C2F8F9 | Secondary backgroundsInput backgroundsDividers |
| 300 | 94F2 #94F2F5 | BordersInactive statesPlaceholder text |
| 400 | 5CEB #5CEBF0 | Disabled statesSecondary iconsMuted text |
| 500 | 2DE5 #2DE5EB | Primary brand colorCTAsActive elementsLinks |
| 600 | 13C7 #13C7CD | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0F9E #0F9EA3 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0B71 #0B7175 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0748 #07484B | Primary textHigh emphasis contentDark headings |
| 950 | 042D #042D2F | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--teal-50: #F1FDFE;
--teal-100: #DEFBFC;
--teal-200: #C2F8F9;
--teal-300: #94F2F5;
--teal-400: #5CEBF0;
--teal-500: #2DE5EB;
--teal-600: #13C7CD;
--teal-700: #0F9EA3;
--teal-800: #0B7175;
--teal-900: #07484B;
--teal-950: #042D2F;
}