Dodger Blue
#14C0CC
CyanColor Codes
All color formats for development
HEX
#14C0CCRGB
rgb(20, 192, 204)HSL
hsl(184, 82%, 44%)OKLCH
oklch(0.737 0.123 202.9)CMYK
cmyk(90%, 6%, 0%, 20%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#12ADB8
2#109AA3
3#0E868F
4#0C737B
5#0A6066
6#084D52
7#063A3D
8#042629
9#021314
Tints
Lighter variations
1#17D8E6
2#2FDEEA
3#49E2ED
4#63E6F0
5#7DEAF2
6#97EEF5
7#B1F3F7
8#CBF7FA
9#E5FBFC
Tones
Muted variations
1#1DB8C3
2#27B0BA
3#30A8B1
4#39A0A7
5#42989E
6#4B9095
7#55888C
8#5E8083
9#677879
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1FD #F1FDFE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DFFA #DFFAFC | Light backgroundsTable row hoverSkeleton loading |
| 200 | C3F5 #C3F5F9 | Secondary backgroundsInput backgroundsDividers |
| 300 | 94EE #94EEF4 | BordersInactive statesPlaceholder text |
| 400 | 5DE5 #5DE5EF | Disabled statesSecondary iconsMuted text |
| 500 | 2EDE #2EDEEA | Primary brand colorCTAsActive elementsLinks |
| 600 | 14C0 #14C0CC | Hover statesFocus ringsPrimary buttons hover |
| 700 | 1099 #1099A2 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0B6D #0B6D74 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0746 #07464A | Primary textHigh emphasis contentDark headings |
| 950 | 052C #052C2E | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--dodger-blue-50: #F1FDFE;
--dodger-blue-100: #DFFAFC;
--dodger-blue-200: #C3F5F9;
--dodger-blue-300: #94EEF4;
--dodger-blue-400: #5DE5EF;
--dodger-blue-500: #2EDEEA;
--dodger-blue-600: #14C0CC;
--dodger-blue-700: #1099A2;
--dodger-blue-800: #0B6D74;
--dodger-blue-900: #07464A;
--dodger-blue-950: #052C2E;
}