Teal
#037C66
CyanColor Codes
All color formats for development
HEX
#037C66RGB
rgb(3, 124, 102)HSL
hsl(169, 95%, 25%)OKLCH
oklch(0.524 0.099 174.4)CMYK
cmyk(98%, 0%, 18%, 51%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#03705C
2#036352
3#025747
4#024B3D
5#023E33
6#013229
7#01251F
8#011914
9#000C0A
Tints
Lighter variations
1#04A285
2#05C7A3
3#06ECC2
4#1FF9D1
5#45FAD9
6#6AFBE1
7#8FFCE8
8#B4FDF0
9#DAFEF7
Tones
Muted variations
1#097662
2#0F705E
3#156A5B
4#1B6457
5#215E53
6#28584F
7#2E524B
8#344C47
9#3A4644
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0FF #F0FFFC | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DCFE #DCFEF8 | Light backgroundsTable row hoverSkeleton loading |
| 200 | BEFD #BEFDF2 | Secondary backgroundsInput backgroundsDividers |
| 300 | 8DFC #8DFCE8 | BordersInactive statesPlaceholder text |
| 400 | 51FB #51FBDB | Disabled statesSecondary iconsMuted text |
| 500 | 1FF9 #1FF9D1 | Primary brand colorCTAsActive elementsLinks |
| 600 | 06DB #06DBB4 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 04AE #04AE8F | Active/pressed statesDark mode accentsSecondary text |
| 800 | 037C #037C66 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0250 #025041 | Primary textHigh emphasis contentDark headings |
| 950 | 0132 #013229 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--teal-50: #F0FFFC;
--teal-100: #DCFEF8;
--teal-200: #BEFDF2;
--teal-300: #8DFCE8;
--teal-400: #51FBDB;
--teal-500: #1FF9D1;
--teal-600: #06DBB4;
--teal-700: #04AE8F;
--teal-800: #037C66;
--teal-900: #025041;
--teal-950: #013229;
}