Cyan
#06DBB4
CyanColor Codes
All color formats for development
HEX
#06DBB4RGB
rgb(6, 219, 180)HSL
hsl(169, 95%, 44%)OKLCH
oklch(0.795 0.151 173.6)CMYK
cmyk(97%, 0%, 18%, 14%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#05C5A2
2#04AF90
3#04997E
4#03836C
5#036D5A
6#025848
7#024236
8#012C24
9#011612
Tints
Lighter variations
1#06F7CB
2#20F9D1
3#3CFAD7
4#58FBDD
5#74FBE3
6#90FCE8
7#ABFDEE
8#C7FEF4
9#E3FEF9
Tones
Muted variations
1#10D0AD
2#1BC5A6
3#26BB9F
4#30B099
5#3BA592
6#469B8B
7#509084
8#5B867E
9#667B77
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 {
--cyan-50: #F0FFFC;
--cyan-100: #DCFEF8;
--cyan-200: #BEFDF2;
--cyan-300: #8DFCE8;
--cyan-400: #51FBDB;
--cyan-500: #1FF9D1;
--cyan-600: #06DBB4;
--cyan-700: #04AE8F;
--cyan-800: #037C66;
--cyan-900: #025041;
--cyan-950: #013229;
}