Dodger Blue
#14AACC
CyanColor Codes
All color formats for development
HEX
#14AACCRGB
rgb(20, 170, 204)HSL
hsl(191, 82%, 44%)OKLCH
oklch(0.683 0.121 219.4)CMYK
cmyk(90%, 17%, 0%, 20%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#1299B8
2#1088A3
3#0E778F
4#0C667B
5#0A5566
6#084452
7#06333D
8#042229
9#021114
Tints
Lighter variations
1#17C0E6
2#2FC8EA
3#49CFED
4#63D6F0
5#7DDDF2
6#97E4F5
7#B1EAF7
8#CBF1FA
9#E5F8FC
Tones
Muted variations
1#1DA5C3
2#279FBA
3#3099B1
4#3993A7
5#428D9E
6#4B8895
7#55828C
8#5E7C83
9#677679
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1FB #F1FBFE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DFF6 #DFF6FC | Light backgroundsTable row hoverSkeleton loading |
| 200 | C3EF #C3EFF9 | Secondary backgroundsInput backgroundsDividers |
| 300 | 94E3 #94E3F4 | BordersInactive statesPlaceholder text |
| 400 | 5DD4 #5DD4EF | Disabled statesSecondary iconsMuted text |
| 500 | 2EC8 #2EC8EA | Primary brand colorCTAsActive elementsLinks |
| 600 | 14AA #14AACC | Hover statesFocus ringsPrimary buttons hover |
| 700 | 1088 #1088A2 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0B61 #0B6174 | Text on light backgroundsHeadingsStrong borders |
| 900 | 073E #073E4A | Primary textHigh emphasis contentDark headings |
| 950 | 0527 #05272E | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--dodger-blue-50: #F1FBFE;
--dodger-blue-100: #DFF6FC;
--dodger-blue-200: #C3EFF9;
--dodger-blue-300: #94E3F4;
--dodger-blue-400: #5DD4EF;
--dodger-blue-500: #2EC8EA;
--dodger-blue-600: #14AACC;
--dodger-blue-700: #1088A2;
--dodger-blue-800: #0B6174;
--dodger-blue-900: #073E4A;
--dodger-blue-950: #05272E;
}