Cyan
#04DCBF
CyanColor Codes
All color formats for development
HEX
#04DCBFRGB
rgb(4, 220, 191)HSL
hsl(172, 96%, 44%)OKLCH
oklch(0.801 0.146 178.6)CMYK
cmyk(98%, 0%, 13%, 14%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#04C6AC
2#04B099
3#039A86
4#038473
5#026E60
6#02584C
7#014239
8#012C26
9#001613
Tints
Lighter variations
1#05F8D8
2#1FFADD
3#3BFBE1
4#57FCE6
5#73FCEA
6#8FFDEE
7#ABFDF2
8#C7FEF7
9#E3FEFB
Tones
Muted variations
1#0FD1B7
2#1AC6AF
3#25BCA7
4#30B1A0
5#3AA698
6#459B90
7#509188
8#5B8680
9#657B78
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0FF #F0FFFD | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DCFE #DCFEFA | Light backgroundsTable row hoverSkeleton loading |
| 200 | BEFE #BEFEF5 | Secondary backgroundsInput backgroundsDividers |
| 300 | 8CFD #8CFDEE | BordersInactive statesPlaceholder text |
| 400 | 50FB #50FBE5 | Disabled statesSecondary iconsMuted text |
| 500 | 1EFA #1EFADD | Primary brand colorCTAsActive elementsLinks |
| 600 | 04DC #04DCBF | Hover statesFocus ringsPrimary buttons hover |
| 700 | 04AF #04AF98 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 037D #037D6D | Text on light backgroundsHeadingsStrong borders |
| 900 | 0250 #025046 | Primary textHigh emphasis contentDark headings |
| 950 | 0132 #01322B | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--cyan-50: #F0FFFD;
--cyan-100: #DCFEFA;
--cyan-200: #BEFEF5;
--cyan-300: #8CFDEE;
--cyan-400: #50FBE5;
--cyan-500: #1EFADD;
--cyan-600: #04DCBF;
--cyan-700: #04AF98;
--cyan-800: #037D6D;
--cyan-900: #025046;
--cyan-950: #01322B;
}