Teal
#0393B0
CyanColor Codes
All color formats for development
HEX
#0393B0RGB
rgb(3, 147, 176)HSL
hsl(190, 97%, 35%)OKLCH
oklch(0.613 0.11 218.4)CMYK
cmyk(98%, 16%, 0%, 31%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#02849E
2#02768D
3#02677B
4#025869
5#014958
6#013B46
7#012C35
8#011D23
9#000F12
Tints
Lighter variations
1#03AED0
2#04CAF1
3#1AD6FC
4#3BDCFC
5#5CE2FD
6#7CE8FD
7#9DEDFE
8#BEF3FE
9#DEF9FF
Tones
Muted variations
1#0B8DA7
2#14879F
3#1D8296
4#257C8D
5#2E7685
6#37707C
7#3F6B73
8#48656B
9#515F62
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0FC #F0FCFF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DCF9 #DCF9FE | Light backgroundsTable row hoverSkeleton loading |
| 200 | BEF3 #BEF3FE | Secondary backgroundsInput backgroundsDividers |
| 300 | 8BEA #8BEAFD | BordersInactive statesPlaceholder text |
| 400 | 4FDF #4FDFFC | Disabled statesSecondary iconsMuted text |
| 500 | 1DD6 #1DD6FC | Primary brand colorCTAsActive elementsLinks |
| 600 | 03B9 #03B9DD | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0393 #0393B0 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0269 #02697E | Text on light backgroundsHeadingsStrong borders |
| 900 | 0143 #014350 | Primary textHigh emphasis contentDark headings |
| 950 | 012A #012A32 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--teal-50: #F0FCFF;
--teal-100: #DCF9FE;
--teal-200: #BEF3FE;
--teal-300: #8BEAFD;
--teal-400: #4FDFFC;
--teal-500: #1DD6FC;
--teal-600: #03B9DD;
--teal-700: #0393B0;
--teal-800: #02697E;
--teal-900: #014350;
--teal-950: #012A32;
}