Blue
#4103DD
PurpleColor Codes
All color formats for development
HEX
#4103DDRGB
rgb(65, 3, 221)HSL
hsl(257, 97%, 44%)OKLCH
oklch(0.434 0.266 277.3)CMYK
cmyk(71%, 99%, 0%, 13%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#3B03C7
2#3403B1
3#2E029B
4#270285
5#21026F
6#1A0158
7#140142
8#0D012C
9#070016
Tints
Lighter variations
1#4904F9
2#5D1EFC
3#713AFC
4#8556FC
5#9A72FD
6#AE8EFD
7#C2ABFE
8#D6C7FE
9#EBE3FF
Tones
Muted variations
1#460ED2
2#4A19C7
3#4F24BC
4#542FB2
5#593AA7
6#5D459C
7#625091
8#675A86
9#6B657B
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F4F0 #F4F0FF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E6DC #E6DCFE | Light backgroundsTable row hoverSkeleton loading |
| 200 | D0BE #D0BEFE | Secondary backgroundsInput backgroundsDividers |
| 300 | AC8B #AC8BFD | BordersInactive statesPlaceholder text |
| 400 | 804F #804FFC | Disabled statesSecondary iconsMuted text |
| 500 | 5C1D #5C1DFC | Primary brand colorCTAsActive elementsLinks |
| 600 | 4103 #4103DD | Hover statesFocus ringsPrimary buttons hover |
| 700 | 3403 #3403B0 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 2502 #25027E | Text on light backgroundsHeadingsStrong borders |
| 900 | 1801 #180150 | Primary textHigh emphasis contentDark headings |
| 950 | 0F01 #0F0132 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--blue-50: #F4F0FF;
--blue-100: #E6DCFE;
--blue-200: #D0BEFE;
--blue-300: #AC8BFD;
--blue-400: #804FFC;
--blue-500: #5C1DFC;
--blue-600: #4103DD;
--blue-700: #3403B0;
--blue-800: #25027E;
--blue-900: #180150;
--blue-950: #0F0132;
}