Cyan
#0FD2B5
CyanColor Codes
All color formats for development
HEX
#0FD2B5RGB
rgb(15, 210, 181)HSL
hsl(171, 87%, 44%)OKLCH
oklch(0.773 0.141 177.8)CMYK
cmyk(93%, 0%, 14%, 18%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#0DBDA2
2#0CA890
3#0A937E
4#097E6C
5#07695A
6#065448
7#043F36
8#032A24
9#011512
Tints
Lighter variations
1#10EDCC
2#29F0D2
3#44F2D8
4#5FF4DD
5#79F6E3
6#94F8E9
7#AFF9EE
8#CAFBF4
9#E4FDF9
Tones
Muted variations
1#18C8AE
2#22BEA7
3#2CB5A0
4#36AB99
5#3FA192
6#49978C
7#538D85
8#5D847E
9#667A77
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1FE #F1FEFC | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DEFD #DEFDF8 | Light backgroundsTable row hoverSkeleton loading |
| 200 | C1FB #C1FBF2 | Secondary backgroundsInput backgroundsDividers |
| 300 | 91F7 #91F7E8 | BordersInactive statesPlaceholder text |
| 400 | 58F3 #58F3DC | Disabled statesSecondary iconsMuted text |
| 500 | 28F0 #28F0D2 | Primary brand colorCTAsActive elementsLinks |
| 600 | 0FD2 #0FD2B5 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0CA7 #0CA790 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0877 #087767 | Text on light backgroundsHeadingsStrong borders |
| 900 | 054C #054C42 | Primary textHigh emphasis contentDark headings |
| 950 | 0330 #033029 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--cyan-50: #F1FEFC;
--cyan-100: #DEFDF8;
--cyan-200: #C1FBF2;
--cyan-300: #91F7E8;
--cyan-400: #58F3DC;
--cyan-500: #28F0D2;
--cyan-600: #0FD2B5;
--cyan-700: #0CA790;
--cyan-800: #087767;
--cyan-900: #054C42;
--cyan-950: #033029;
}