Teal
#009EB3
CyanColor Codes
All color formats for development
HEX
#009EB3RGB
rgb(0, 158, 179)HSL
hsl(187, 100%, 35%)OKLCH
oklch(0.641 0.111 211.2)CMYK
cmyk(100%, 12%, 0%, 30%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#008EA1
2#007E8F
3#006E7D
4#005F6B
5#004F59
6#003F47
7#002F36
8#002024
9#001012
Tints
Lighter variations
1#00BBD4
2#00D8F5
3#17E4FF
4#38E8FF
5#59ECFF
6#7AF0FF
7#9CF3FF
8#BDF7FF
9#DEFBFF
Tones
Muted variations
1#0997AA
2#1290A1
3#1B8998
4#24828F
5#2D7B86
6#36757D
7#3E6E74
8#47676B
9#506062
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0FD #F0FDFF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DBFB #DBFBFF | Light backgroundsTable row hoverSkeleton loading |
| 200 | BDF7 #BDF7FF | Secondary backgroundsInput backgroundsDividers |
| 300 | 8AF1 #8AF1FF | BordersInactive statesPlaceholder text |
| 400 | 4DEA #4DEAFF | Disabled statesSecondary iconsMuted text |
| 500 | 1AE4 #1AE4FF | Primary brand colorCTAsActive elementsLinks |
| 600 | 00C6 #00C6E0 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 009E #009EB3 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0071 #007180 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0048 #004852 | Primary textHigh emphasis contentDark headings |
| 950 | 002D #002D33 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--teal-50: #F0FDFF;
--teal-100: #DBFBFF;
--teal-200: #BDF7FF;
--teal-300: #8AF1FF;
--teal-400: #4DEAFF;
--teal-500: #1AE4FF;
--teal-600: #00C6E0;
--teal-700: #009EB3;
--teal-800: #007180;
--teal-900: #004852;
--teal-950: #002D33;
}