Dodger Blue
#10C1D1
CyanColor Codes
All color formats for development
HEX
#10C1D1RGB
rgb(16, 193, 209)HSL
hsl(185, 86%, 44%)OKLCH
oklch(0.741 0.125 205.5)CMYK
cmyk(92%, 8%, 0%, 18%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#0EADBC
2#0D9AA7
3#0B8792
4#09747D
5#086068
6#064D53
7#053A3F
8#03272A
9#021315
Tints
Lighter variations
1#12D9EB
2#2BDFEF
3#45E3F1
4#60E7F3
5#7AEBF5
6#95EFF7
7#AFF3F9
8#CAF7FB
9#E4FBFD
Tones
Muted variations
1#19B9C7
2#23B1BD
3#2DA8B4
4#36A0AA
5#4098A0
6#4A9097
7#53888D
8#5D8083
9#67787A
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1FD #F1FDFE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DEFA #DEFAFD | Light backgroundsTable row hoverSkeleton loading |
| 200 | C1F6 #C1F6FA | Secondary backgroundsInput backgroundsDividers |
| 300 | 92EE #92EEF7 | BordersInactive statesPlaceholder text |
| 400 | 59E6 #59E6F3 | Disabled statesSecondary iconsMuted text |
| 500 | 2ADE #2ADEEF | Primary brand colorCTAsActive elementsLinks |
| 600 | 10C1 #10C1D1 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0C99 #0C99A6 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 096D #096D77 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0646 #06464C | Primary textHigh emphasis contentDark headings |
| 950 | 042C #042C2F | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--dodger-blue-50: #F1FDFE;
--dodger-blue-100: #DEFAFD;
--dodger-blue-200: #C1F6FA;
--dodger-blue-300: #92EEF7;
--dodger-blue-400: #59E6F3;
--dodger-blue-500: #2ADEEF;
--dodger-blue-600: #10C1D1;
--dodger-blue-700: #0C99A6;
--dodger-blue-800: #096D77;
--dodger-blue-900: #06464C;
--dodger-blue-950: #042C2F;
}