COLOR REFERENCE / #4169E1
Royal blue, decoded for real design work.
Royal Blue Hex Code centers on #4169E1—the standard CSS royal blue—and expands it into practical shades, contrast decisions, palettes, gradients, tokens, and production-ready values.
- HEX
- #4169E1
- RGB
- 65, 105, 225
- HSL
- 225°, 73%, 57%
ROYAL BLUE#4169E1
CSS named color
High-energy cool blue
01 / COLOR IDENTITY
The core value at a glance
Royal blue sits between vivid medium blue and deeper ceremonial blues. In browsers, the named CSS color royalblue resolves to #4169E1.
02 / QUICK SHADE RIBBON
Open 100+ copy-ready shades →Move from frost to midnight.
03 / DESIGN TOKENS
Turn one blue into a usable interface system.
A dependable palette needs more than a hero swatch. Use lighter values for surfaces, the core value for brand emphasis, and darker steps for readable states and depth.
:root {
--royal-50: #EEF2FF;
--royal-300: #90A7F1;
--royal-500: #4169E1;
--royal-700: #2747B8;
--royal-950: #101A3B;
}04 / FEATURED SHADES
Named royal-blue directions
Each card copies its hex value and opens a focused shade detail page.
05 / CONTRAST
Contrast changes with the surface.
#4169E1 is visually bold, but text accessibility depends on the exact foreground/background pair. Check the ratio instead of assuming any blue is automatically safe.
Use contrast checkerRoyal blue on white#4169E1 / #FFFFFF
White on royal blue#FFFFFF / #4169E1
Royal blue on navy#4169E1 / #101A3B
06 / PALETTE RECIPES
See every palette →Combinations with a clear job
Crown & Porcelain
A refined royal-blue system for premium interfaces and editorial hierarchy.
Royal & Gold
A classic blue-and-gold pairing for celebratory, formal, or high-trust visual systems.
Royal & Coral
A lively complementary-feeling set for calls to action, product launches, and social graphics.
Royal & Mint
A clean digital palette that balances confident blue with fresh success-state accents.
07 / WHERE IT WORKS
Royal blue across real contexts
Product interfaces
Use it for selected navigation, primary buttons, links, focus signals, data highlights, and intentional moments of emphasis.
Brand systems
Royal blue communicates confidence and clarity without the heaviness of navy, especially when supported by restrained neutrals.
Editorial graphics
Pair large royal-blue fields with white, cream, gold, or coral to create strong poster and social-media hierarchy.
Data visualization
Reserve the strongest royal value for the focus series, then use lighter tints and quieter supporting hues around it.
08 / CSS RECIPES
Useful snippets, ready to copy
Background
background: #4169E1;
color: #FFFFFF;Border + focus
border: 1px solid #4169E1;
outline: 3px solid #C9D5FA;Royal gradient
background: linear-gradient(135deg,
#2747B8, #4169E1 55%, #7F9BFF);09 / GUIDES
View all guides →Eight deep dives on royal blue
01↗02↗03↗04↗
Royal Blue Hex Code #4169E1: A Complete Practical Guide
Understand the standard royal blue hex code, its RGB and HSL values, visual character, CSS behavior, contrast, and practical use in modern design.
Royal Blue in CSS and Web Design: From Hex Value to Interface System
Use #4169E1 effectively in CSS, components, states, design tokens, responsive interfaces, and dark mode without flattening visual hierarchy.
How to Build a Royal Blue Color Palette That Feels Intentional
Create royal-blue palettes with useful roles, balanced saturation, supporting neutrals, accents, and theme-ready steps instead of random swatches.
Royal Blue Accessibility and Contrast: Practical WCAG Guidance
Learn how #4169E1 behaves with white, black, navy, tints, links, controls, focus states, charts, and accessible interface patterns.
10 / FAQ
Royal Blue Hex Code basics
What is the royal blue hex code?
The standard CSS named color royalblue is #4169E1, equivalent to RGB 65, 105, 225.
Can I copy every shade on this site?
Yes. Every shade swatch includes clipboard functionality, and a “Copied” notification confirms the value was copied.
Is royal blue the same as navy blue?
No. Royal blue is generally brighter and more saturated, while navy sits much closer to black and creates a heavier, quieter impression.
Does the site include an HTML sitemap?
No. The project intentionally includes an XML sitemap for search engines without creating a public HTML sitemap page.