Dodger Blue
#1CAEFD
BlueColor Codes
All color formats for development
HEX
#1CAEFDRGB
rgb(28, 174, 253)HSL
hsl(201, 98%, 55%)OKLCH
oklch(0.717 0.16 240.6)CMYK
cmyk(89%, 31%, 0%, 1%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#03A3FA
2#0291DE
3#027FC2
4#026DA7
5#015B8B
6#01496F
7#013653
8#012438
9#00121C
Tints
Lighter variations
1#33B6FD
2#49BEFD
3#60C6FD
4#77CEFE
5#8DD6FE
6#A4DFFE
7#BBE7FE
8#D2EFFF
9#E8F7FF
Tones
Muted variations
1#27ABF1
2#32A7E6
3#3EA4DB
4#49A0D0
5#549DC4
6#5F9AB9
7#6B96AE
8#7693A3
9#819097
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0FA #F0FAFF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DCF2 #DCF2FF | Light backgroundsTable row hoverSkeleton loading |
| 200 | BDE8 #BDE8FE | Secondary backgroundsInput backgroundsDividers |
| 300 | 8BD6 #8BD6FE | BordersInactive statesPlaceholder text |
| 400 | 4EC0 #4EC0FD | Disabled statesSecondary iconsMuted text |
| 500 | 1CAE #1CAEFD | Primary brand colorCTAsActive elementsLinks |
| 600 | 0291 #0291DE | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0273 #0273B1 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0152 #01527E | Text on light backgroundsHeadingsStrong borders |
| 900 | 0135 #013551 | Primary textHigh emphasis contentDark headings |
| 950 | 0121 #012132 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--dodger-blue-50: #F0FAFF;
--dodger-blue-100: #DCF2FF;
--dodger-blue-200: #BDE8FE;
--dodger-blue-300: #8BD6FE;
--dodger-blue-400: #4EC0FD;
--dodger-blue-500: #1CAEFD;
--dodger-blue-600: #0291DE;
--dodger-blue-700: #0273B1;
--dodger-blue-800: #01527E;
--dodger-blue-900: #013551;
--dodger-blue-950: #012132;
}