Teal
#00B39B
CyanColor Codes
All color formats for development
HEX
#00B39BRGB
rgb(0, 179, 155)HSL
hsl(172, 100%, 35%)OKLCH
oklch(0.686 0.126 178.6)CMYK
cmyk(100%, 0%, 13%, 30%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#00A18B
2#008F7C
3#007D6C
4#006B5D
5#00594D
6#00473E
7#00362E
8#00241F
9#00120F
Tints
Lighter variations
1#00D4B7
2#00F5D4
3#17FFE0
4#38FFE4
5#59FFE9
6#7AFFED
7#9CFFF2
8#BDFFF6
9#DEFFFB
Tones
Muted variations
1#09AA94
2#12A18E
3#1B9887
4#248F81
5#2D867A
6#367D73
7#3E746D
8#476B66
9#506260
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0FF #F0FFFD | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DBFF #DBFFFA | Light backgroundsTable row hoverSkeleton loading |
| 200 | BDFF #BDFFF6 | Secondary backgroundsInput backgroundsDividers |
| 300 | 8AFF #8AFFEF | BordersInactive statesPlaceholder text |
| 400 | 4DFF #4DFFE7 | Disabled statesSecondary iconsMuted text |
| 500 | 1AFF #1AFFE0 | Primary brand colorCTAsActive elementsLinks |
| 600 | 00E0 #00E0C2 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 00B3 #00B39B | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0080 #00806F | Text on light backgroundsHeadingsStrong borders |
| 900 | 0052 #005247 | Primary textHigh emphasis contentDark headings |
| 950 | 0033 #00332C | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--teal-50: #F0FFFD;
--teal-100: #DBFFFA;
--teal-200: #BDFFF6;
--teal-300: #8AFFEF;
--teal-400: #4DFFE7;
--teal-500: #1AFFE0;
--teal-600: #00E0C2;
--teal-700: #00B39B;
--teal-800: #00806F;
--teal-900: #005247;
--teal-950: #00332C;
}