Blue
#0A18D6
BlueColor Codes
All color formats for development
HEX
#0A18D6RGB
rgb(10, 24, 214)HSL
hsl(236, 91%, 44%)OKLCH
oklch(0.41 0.265 265.1)CMYK
cmyk(95%, 89%, 0%, 16%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#0915C1
2#0813AB
3#071196
4#060E81
5#050C6B
6#040956
7#030740
8#02052B
9#010215
Tints
Lighter variations
1#0B1BF2
2#2533F5
3#404CF6
4#5B66F7
5#777FF9
6#9299FA
7#ADB2FB
8#C8CCFC
9#E4E5FE
Tones
Muted variations
1#1421CC
2#1F29C2
3#2932B8
4#333BAD
5#3D44A3
6#474D99
7#52568F
8#5C5F85
9#66677A
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0F1 #F0F1FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DDDF #DDDFFD | Light backgroundsTable row hoverSkeleton loading |
| 200 | C0C4 #C0C4FC | Secondary backgroundsInput backgroundsDividers |
| 300 | 8F96 #8F96FA | BordersInactive statesPlaceholder text |
| 400 | 555F #555FF7 | Disabled statesSecondary iconsMuted text |
| 500 | 2432 #2432F5 | Primary brand colorCTAsActive elementsLinks |
| 600 | 0A18 #0A18D6 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0813 #0813AA | Active/pressed statesDark mode accentsSecondary text |
| 800 | 060D #060D7A | Text on light backgroundsHeadingsStrong borders |
| 900 | 0409 #04094E | Primary textHigh emphasis contentDark headings |
| 950 | 0205 #020531 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--blue-50: #F0F1FE;
--blue-100: #DDDFFD;
--blue-200: #C0C4FC;
--blue-300: #8F96FA;
--blue-400: #555FF7;
--blue-500: #2432F5;
--blue-600: #0A18D6;
--blue-700: #0813AA;
--blue-800: #060D7A;
--blue-900: #04094E;
--blue-950: #020531;
}