Royal Blue
#527FFA
BlueColor Codes
All color formats for development
HEX
#527FFARGB
rgb(82, 127, 250)HSL
hsl(224, 94%, 65%)OKLCH
oklch(0.629 0.19 266)CMYK
cmyk(67%, 49%, 0%, 2%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#3267F9
2#124FF8
3#0741E1
4#0638C1
5#052FA1
6#042581
7#031C60
8#021340
9#010920
Tints
Lighter variations
1#638BFA
2#7498FB
3#86A5FB
4#97B2FC
5#A8BFFC
6#BACCFD
7#CBD8FD
8#DCE5FE
9#EEF2FE
Tones
Muted variations
1#5A83F1
2#6386E9
3#6B8AE0
4#738ED8
5#7C92D0
6#8496C7
7#8D9ABF
8#959EB7
9#9DA2AE
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0F4 #F0F4FF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DCE5 #DCE5FE | Light backgroundsTable row hoverSkeleton loading |
| 200 | BFCF #BFCFFD | Secondary backgroundsInput backgroundsDividers |
| 300 | 8DAB #8DABFB | BordersInactive statesPlaceholder text |
| 400 | 527F #527FFA | Disabled statesSecondary iconsMuted text |
| 500 | 205A #205AF8 | Primary brand colorCTAsActive elementsLinks |
| 600 | 073F #073FDA | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0532 #0532AD | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0424 #04247C | Text on light backgroundsHeadingsStrong borders |
| 900 | 0217 #02174F | Primary textHigh emphasis contentDark headings |
| 950 | 020E #020E31 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--royal-blue-50: #F0F4FF;
--royal-blue-100: #DCE5FE;
--royal-blue-200: #BFCFFD;
--royal-blue-300: #8DABFB;
--royal-blue-400: #527FFA;
--royal-blue-500: #205AF8;
--royal-blue-600: #073FDA;
--royal-blue-700: #0532AD;
--royal-blue-800: #04247C;
--royal-blue-900: #02174F;
--royal-blue-950: #020E31;
}