Blue
#0726DA
BlueColor Codes
All color formats for development
HEX
#0726DARGB
rgb(7, 38, 218)HSL
hsl(231, 94%, 44%)OKLCH
oklch(0.427 0.261 264.7)CMYK
cmyk(97%, 83%, 0%, 15%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#0623C4
2#051FAE
3#051B98
4#041783
5#03136D
6#030F57
7#020C41
8#01082C
9#010416
Tints
Lighter variations
1#082BF5
2#2142F8
3#3D59F9
4#5971FA
5#7489FB
6#90A0FC
7#ACB8FC
8#C8D0FD
9#E3E7FE
Tones
Muted variations
1#112ECF
2#1C35C5
3#263DBA
4#3144AF
5#3B4BA5
6#46539A
7#515A90
8#5B6185
9#66697B
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0F2 #F0F2FF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DCE1 #DCE1FE | Light backgroundsTable row hoverSkeleton loading |
| 200 | BFC8 #BFC8FD | Secondary backgroundsInput backgroundsDividers |
| 300 | 8D9E #8D9EFB | BordersInactive statesPlaceholder text |
| 400 | 526B #526BFA | Disabled statesSecondary iconsMuted text |
| 500 | 2041 #2041F8 | Primary brand colorCTAsActive elementsLinks |
| 600 | 0726 #0726DA | Hover statesFocus ringsPrimary buttons hover |
| 700 | 051F #051FAD | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0416 #04167C | Text on light backgroundsHeadingsStrong borders |
| 900 | 020E #020E4F | Primary textHigh emphasis contentDark headings |
| 950 | 0209 #020931 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--blue-50: #F0F2FF;
--blue-100: #DCE1FE;
--blue-200: #BFC8FD;
--blue-300: #8D9EFB;
--blue-400: #526BFA;
--blue-500: #2041F8;
--blue-600: #0726DA;
--blue-700: #051FAD;
--blue-800: #04167C;
--blue-900: #020E4F;
--blue-950: #020931;
}