Cyan
#1AFFBE
GreenColor Codes
All color formats for development
HEX
#1AFFBERGB
rgb(26, 255, 190)HSL
hsl(163, 100%, 55%)OKLCH
oklch(0.888 0.182 165.9)CMYK
cmyk(90%, 0%, 25%, 0%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#00FCB5
2#00E0A1
3#00C48D
4#00A879
5#008C65
6#007050
7#00543C
8#003828
9#001C14
Tints
Lighter variations
1#30FFC4
2#47FFCB
3#5EFFD1
4#75FFD8
5#8CFFDE
6#A3FFE5
7#BAFFEB
8#D1FFF2
9#E8FFF8
Tones
Muted variations
1#25F4B9
2#30E8B4
3#3CDDAF
4#47D1AA
5#53C6A5
6#5EBAA0
7#6AAF9B
8#75A396
9#819891
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0FF #F0FFFB | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DBFF #DBFFF5 | Light backgroundsTable row hoverSkeleton loading |
| 200 | BDFF #BDFFEC | Secondary backgroundsInput backgroundsDividers |
| 300 | 8AFF #8AFFDE | BordersInactive statesPlaceholder text |
| 400 | 4DFF #4DFFCC | Disabled statesSecondary iconsMuted text |
| 500 | 1AFF #1AFFBE | Primary brand colorCTAsActive elementsLinks |
| 600 | 00E0 #00E0A1 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 00B3 #00B380 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0080 #00805B | Text on light backgroundsHeadingsStrong borders |
| 900 | 0052 #00523A | Primary textHigh emphasis contentDark headings |
| 950 | 0033 #003325 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--cyan-50: #F0FFFB;
--cyan-100: #DBFFF5;
--cyan-200: #BDFFEC;
--cyan-300: #8AFFDE;
--cyan-400: #4DFFCC;
--cyan-500: #1AFFBE;
--cyan-600: #00E0A1;
--cyan-700: #00B380;
--cyan-800: #00805B;
--cyan-900: #00523A;
--cyan-950: #003325;
}