Blue
#0B19D5
BlueColor Codes
All color formats for development
HEX
#0B19D5RGB
rgb(11, 25, 213)HSL
hsl(236, 90%, 44%)OKLCH
oklch(0.41 0.263 265.2)CMYK
cmyk(95%, 88%, 0%, 16%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#0A16C0
2#0914AB
3#081195
4#070F80
5#060C6B
6#040A55
7#030740
8#02052B
9#010215
Tints
Lighter variations
1#0D1CF0
2#2634F4
3#414DF5
4#5C66F6
5#7780F8
6#9299F9
7#AEB3FB
8#C9CCFC
9#E4E6FE
Tones
Muted variations
1#1521CB
2#1F2AC1
3#2A33B7
4#343CAD
5#3E44A3
6#484D99
7#52568E
8#5C5F84
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 | 9097 #9097F9 | BordersInactive statesPlaceholder text |
| 400 | 5560 #5560F6 | Disabled statesSecondary iconsMuted text |
| 500 | 2533 #2533F4 | Primary brand colorCTAsActive elementsLinks |
| 600 | 0B19 #0B19D5 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0914 #0914AA | Active/pressed statesDark mode accentsSecondary text |
| 800 | 060E #060E79 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0409 #04094E | Primary textHigh emphasis contentDark headings |
| 950 | 0306 #030630 | 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: #9097F9;
--blue-400: #5560F6;
--blue-500: #2533F4;
--blue-600: #0B19D5;
--blue-700: #0914AA;
--blue-800: #060E79;
--blue-900: #04094E;
--blue-950: #030630;
}