Royal Blue
A bold and energetic royal blue
Royal Blue is a bold, highly saturated tone that demands attention. Because of its intensity, it works best as an accent color for calls to action or UI highlights. White text sits comfortably on top, ensuring readable contrast for users. The hex code for this color is #4169e1. It pairs effectively with neutral, cool grays to ground its energy in professional technology interfaces.
About Royal Blue
High-noon sky in a parade banner
What does royal blue mean?
Royal blue is commonly tied to trust, formality, and confidence. Its strong saturation and mid brightness give it a bold, electric presence that reads as assertive rather than soft or muted.
Where you see royal blue
- blue raspberry candy
- ribbons on award rosettes
- scrubs
- school pennants
- hyacinth petals
- pool lane ropes
What it works for
Use it for buttons, links, and headings when a blue needs to stand out instead of fading into standard corporate palettes.
What colors go with royal blue?
Coral #ff7f50Coral sits across the wheel as a warm counterweight to this cool blue.Gold #ffd700Gold adds warm shine and makes the blue read as richer.Mint #98ff98Mint cools the palette further and lightens the overall feel.Peach #ffe5b4Peach is soft and warm, so the blue keeps its boldness without overpowering.Mustard #ffdb58Mustard's earthy yellow grounds the blue in something less digital.Cream #fffdd0Cream gives the blue room to breathe as the clear focal color.
Questions about Royal Blue
What is the hex code for Royal Blue?
Royal Blue is #4169e1. In RGB that is rgb(65, 105, 225), in HSL hsl(225, 73%, 57%) and in CMYK 71%, 53%, 0%, 12%.
How should I use Royal Blue #4169e1 in UI design?
Use #4169e1 sparingly as an accent color for primary buttons or status indicators where you need to draw the eye immediately. Because of its high saturation, it can overwhelm a layout if used for large backgrounds or body text.
Is Royal Blue readable on white or black?
Royal Blue has a 4.84:1 contrast ratio on white and 4.33:1 on black. WCAG asks for 4.5:1 for body text and 3:1 for large text, so on white it works for body text and on black it works only for large text (24px, or 18.5px bold). Try other pairs in the contrast checker.