Teal
#08AA8D
CyanColor Codes
All color formats for development
HEX
#08AA8DRGB
rgb(8, 170, 141)HSL
hsl(169, 91%, 35%)OKLCH
oklch(0.659 0.124 174.6)CMYK
cmyk(95%, 0%, 17%, 33%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#07997F
2#068871
3#067762
4#056654
5#045546
6#034438
7#02332A
8#02221C
9#01110E
Tints
Lighter variations
1#0ACAA7
2#0BEAC1
3#21F5CE
4#41F6D5
5#61F8DC
6#80F9E3
7#A0FBEA
8#C0FCF1
9#DFFEF8
Tones
Muted variations
1#10A288
2#189A82
3#20927D
4#298A78
5#318273
6#397A6E
7#417269
8#496964
9#51615E
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0FE #F0FEFC | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DDFD #DDFDF7 | Light backgroundsTable row hoverSkeleton loading |
| 200 | C0FC #C0FCF1 | Secondary backgroundsInput backgroundsDividers |
| 300 | 8FFA #8FFAE6 | BordersInactive statesPlaceholder text |
| 400 | 55F7 #55F7D9 | Disabled statesSecondary iconsMuted text |
| 500 | 24F5 #24F5CE | Primary brand colorCTAsActive elementsLinks |
| 600 | 0AD6 #0AD6B1 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 08AA #08AA8D | Active/pressed statesDark mode accentsSecondary text |
| 800 | 067A #067A64 | Text on light backgroundsHeadingsStrong borders |
| 900 | 044E #044E40 | Primary textHigh emphasis contentDark headings |
| 950 | 0231 #023128 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--teal-50: #F0FEFC;
--teal-100: #DDFDF7;
--teal-200: #C0FCF1;
--teal-300: #8FFAE6;
--teal-400: #55F7D9;
--teal-500: #24F5CE;
--teal-600: #0AD6B1;
--teal-700: #08AA8D;
--teal-800: #067A64;
--teal-900: #044E40;
--teal-950: #023128;
}