Figma color wheel
Want to find the perfect complementary or analogous colors to match royal blue?
Skip to main content
Everything you need to know about royal blue to inspire your next design.
Royal blue is a deep, vibrant shade between blue and violet on the color wheel. This rich color combines sophistication with a hint of purple undertone, projecting elegance and depth.

Shades
Tints
Tones
Hues
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Regal blue
Magically Moonlit
Sapphire Serenade
Royal blue is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #305CDE
- RGB value: 18.8% red, 36.1% green and 87.1% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.
Here are a few ways to use royal blue in your designs:
Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.
For variations within the same vibrant and regal spectrum as royal blue, consider:
To complement royal blue's dignified tones, consider pairing it with:
Other colors worth considering include deep red for a bold, impactful statement, silver for a sleek, contemporary vibe, and light gray for a soft, muted contrast that allows royal blue to shine.
While royal blue is versatile, it may clash with:
Royal blue embodies royalty, luxury, and sophistication. Its historical association with authority and elegance extends to amulets and garments, signifying safety and protection. It even carries spiritual connotations of divinity, wisdom, and joy.
In color psychology, royal blue connects deeply with trust and reliability. Its richness implies stability and confidence, while its ties to the sky and sea bring calmness and tranquility.
Royal blue's UI/UX design versatility allows it to express power, authority, peace, or trustworthiness. This builds user confidence through the color’s association with credibility and professionalism, making it a strong choice for finance and healthcare interfaces.
Royal blue, named after Queen Charlotte in the late 18th century, was originally a deep, vivid hue reserved for the aristocracy. It symbolized significance and prestige. Over time, however, the color's perception shifted. By the 1950s, a brighter version gained favor, culminating in standardizing a luminous shade as 'royalblue' in the digital age (1987). This choice by the World Wide Web Consortium highlights the color's adaptability, evolving alongside societal preferences and technological advancements.
Contrast 5.66
#305CDE
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Fail | |
Pass | Pass | |
Pass | Pass |
Contrast 3.71
#305CDE
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Pass | Fail | |
Pass | Fail |
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #305CDE, known as royal blue, has RGB values of R:48, G:92, B:222 and CMYK values of C:0.78, M:0.59, Y:0, K:0.13.
| VALUE | CSS | |
|---|---|---|
| HEX | 305CDE | #305CDE |
| RGB DECIMAL | 48, 92, 222 | rgb(48,92,222) |
| RGB PERCENTAGE | 18.8, 36.1, 87.1 | rgb(18.8%,36.1%,87.1%) |
| CMYK | 78, 59, 0, 13 | |
| HSL | 224.8°, 72.5, 52.9 | hsl(224.8,72.5%,52.9%) |
| HSV (OR HSB) | 224.8°, 78.4, 87.1 | |
| WEB SAFE | 3366CC | #3366CC |
| CIE-LAB | 43.588, 31.494, -70.497 | |
| XYZ | 18.228, 13.555, 70.759 | |
| xyY | 0.178, 0.132, 13.555 | |
| CIE-LCH | 43.588, 77.212, 294.072 | |
| CIE-LUV | 43.588, -16.872, -106.036 | |
| HUNTER-LAB | 36.817, 23.944, -88.176 | |
| BINARY | 00110000, 01011100, 11011110 | |
| iOS - SwiftUI | Color(red: 48/255, green: 92/255, blue: 222/255) | |
| iOS - UIKit | UIColor(red: 48/255.0, green: 92/255.0, blue: 222/255.0, alpha: 1.0) | |
| Android - Compose | Color(0xFF305CDE) |
Want to find the perfect complementary or analogous colors to match royal blue?
Learn more about the color blue.
Learn more about pastel blue.