Cyan
#1AFFC6
CyanColor Codes
All color formats for development
HEX
#1AFFC6RGB
rgb(26, 255, 198)HSL
hsl(165, 100%, 55%)OKLCH
oklch(0.89 0.176 168.8)CMYK
cmyk(90%, 0%, 22%, 0%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#00FCBD
2#00E0A8
3#00C493
4#00A87E
5#008C69
6#007054
7#00543F
8#00382A
9#001C15
Tints
Lighter variations
1#30FFCB
2#47FFD1
3#5EFFD7
4#75FFDD
5#8CFFE2
6#A3FFE8
7#BAFFEE
8#D1FFF4
9#E8FFF9
Tones
Muted variations
1#25F4C0
2#30E8BA
3#3CDDB4
4#47D1AF
5#53C6A9
6#5EBAA3
7#6AAF9D
8#75A398
9#819892
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0FF #F0FFFB | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DBFF #DBFFF6 | Light backgroundsTable row hoverSkeleton loading |
| 200 | BDFF #BDFFEE | Secondary backgroundsInput backgroundsDividers |
| 300 | 8AFF #8AFFE2 | BordersInactive statesPlaceholder text |
| 400 | 4DFF #4DFFD2 | Disabled statesSecondary iconsMuted text |
| 500 | 1AFF #1AFFC6 | Primary brand colorCTAsActive elementsLinks |
| 600 | 00E0 #00E0A8 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 00B3 #00B386 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0080 #008060 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0052 #00523D | Primary textHigh emphasis contentDark headings |
| 950 | 0033 #003326 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--cyan-50: #F0FFFB;
--cyan-100: #DBFFF6;
--cyan-200: #BDFFEE;
--cyan-300: #8AFFE2;
--cyan-400: #4DFFD2;
--cyan-500: #1AFFC6;
--cyan-600: #00E0A8;
--cyan-700: #00B386;
--cyan-800: #008060;
--cyan-900: #00523D;
--cyan-950: #003326;
}