Teal
#005780
BlueColor Codes
All color formats for development
HEX
#005780RGB
rgb(0, 87, 128)HSL
hsl(199, 100%, 25%)OKLCH
oklch(0.434 0.097 238.7)CMYK
cmyk(100%, 32%, 0%, 50%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#004E73
2#004666
3#003D59
4#00344D
5#002C40
6#002333
7#001A26
8#00111A
9#00090D
Tints
Lighter variations
1#0071A6
2#008BCC
3#00A6F2
4#1AB6FF
5#40C2FF
6#66CFFF
7#8CDBFF
8#B3E7FF
9#D9F3FF
Tones
Muted variations
1#065579
2#0D5273
3#13506C
4#194E66
5#204B60
6#264959
7#2D4753
8#33444D
9#394246
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0FA #F0FAFF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DBF4 #DBF4FF | Light backgroundsTable row hoverSkeleton loading |
| 200 | BDEA #BDEAFF | Secondary backgroundsInput backgroundsDividers |
| 300 | 8ADA #8ADAFF | BordersInactive statesPlaceholder text |
| 400 | 4DC6 #4DC6FF | Disabled statesSecondary iconsMuted text |
| 500 | 1AB6 #1AB6FF | Primary brand colorCTAsActive elementsLinks |
| 600 | 0099 #0099E0 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 007A #007AB3 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0057 #005780 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0038 #003852 | Primary textHigh emphasis contentDark headings |
| 950 | 0023 #002333 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--teal-50: #F0FAFF;
--teal-100: #DBF4FF;
--teal-200: #BDEAFF;
--teal-300: #8ADAFF;
--teal-400: #4DC6FF;
--teal-500: #1AB6FF;
--teal-600: #0099E0;
--teal-700: #007AB3;
--teal-800: #005780;
--teal-900: #003852;
--teal-950: #002333;
}