Blue
#2432F5
BlueColor Codes
All color formats for development
HEX
#2432F5RGB
rgb(36, 50, 245)HSL
hsl(236, 91%, 55%)OKLCH
oklch(0.479 0.276 267.5)CMYK
cmyk(85%, 80%, 0%, 4%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#0B1BF1
2#0A18D6
3#0915BC
4#0812A1
5#060F86
6#050C6B
7#040950
8#030636
9#01031B
Tints
Lighter variations
1#3A46F6
2#505BF7
3#666FF8
4#7B84F9
5#9198FA
6#A7ADFB
7#BDC1FC
8#D3D6FD
9#E9EAFE
Tones
Muted variations
1#2E3BEA
2#3944E0
3#434DD5
4#4E56CB
5#585FC0
6#6268B6
7#6D71AC
8#777AA1
9#828397
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;
}