Teal
#0C736D
CyanColor Codes
All color formats for development
HEX
#0C736DRGB
rgb(12, 115, 109)HSL
hsl(177, 81%, 25%)OKLCH
oklch(0.502 0.084 188.3)CMYK
cmyk(90%, 0%, 5%, 55%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#0B6863
2#0A5C58
3#08514D
4#074542
5#063A37
6#052E2C
7#042321
8#021716
9#010C0B
Tints
Lighter variations
1#10968F
2#13B9B0
3#17DBD1
4#2FE9E0
5#52EDE5
6#75F0EA
7#97F4EF
8#BAF8F5
9#DCFBFA
Tones
Muted variations
1#116E6A
2#166965
3#1C6460
4#215F5C
5#265A57
6#2B5452
7#304F4E
8#354A49
9#3B4544
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1FE #F1FEFD | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DFFC #DFFCFA | Light backgroundsTable row hoverSkeleton loading |
| 200 | C3F9 #C3F9F6 | Secondary backgroundsInput backgroundsDividers |
| 300 | 95F4 #95F4EF | BordersInactive statesPlaceholder text |
| 400 | 5DEE #5DEEE7 | Disabled statesSecondary iconsMuted text |
| 500 | 2FE9 #2FE9E0 | Primary brand colorCTAsActive elementsLinks |
| 600 | 15CB #15CBC2 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 11A2 #11A29A | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0C73 #0C736E | Text on light backgroundsHeadingsStrong borders |
| 900 | 084A #084A47 | Primary textHigh emphasis contentDark headings |
| 950 | 052E #052E2C | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--teal-50: #F1FEFD;
--teal-100: #DFFCFA;
--teal-200: #C3F9F6;
--teal-300: #95F4EF;
--teal-400: #5DEEE7;
--teal-500: #2FE9E0;
--teal-600: #15CBC2;
--teal-700: #11A29A;
--teal-800: #0C736E;
--teal-900: #084A47;
--teal-950: #052E2C;
}