Skip to main content Everything you need to know about royal blue to inspire your next design. Copy Hex: #305CDE Copy RGB: 48,92,222 Copy HSB: 225, 78%, 87% Copy HSL: 225, 72%, 53% Pick palette settings Copy Hex: #305CDE Copy Hex: #59B5F7 Copy Hex: #274AB3 Copy Hex: #182E6F What color is royal blue? 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. Color variations Copy Hex: #305CDE Copy Hex: #214DCF Copy Hex: #1D43B5 Copy Hex: #193A9B Copy Hex: #153081 Copy Hex: #102668 Copy Hex: #0C1D4E Copy Hex: #081334 Copy Hex: #305CDE Copy Hex: #456CE1 Copy Hex: #597CE5 Copy Hex: #6E8DE8 Copy Hex: #829DEB Copy Hex: #97ADEE Copy Hex: #ABBDF2 Copy Hex: #C0CDF5 Copy Hex: #305CDE Copy Hex: #2F5AD0 Copy Hex: #3A62C5 Copy Hex: #4669B9 Copy Hex: #516FAE Copy Hex: #5D74A2 Copy Hex: #687997 Copy Hex: #747C8B Copy Hex: #305CDE Copy Hex: #30B3DE Copy Hex: #3096DE Copy Hex: #3079DE Copy Hex: #303FDE Copy Hex: #3E30DE Copy Hex: #5B30DE Copy Hex: #7830DE Color harmonies Copy Hex: #305CDE Copy Hex: #DEB230 Copy Hex: #305CDE Copy Hex: #DE5B30 Copy Hex: #B3DE30 Copy Hex: #305CDE Copy Hex: #1E45BA Copy Hex: #5F81E5 Copy Hex: #305CDE Copy Hex: #5B30DE Copy Hex: #30B3DE Copy Hex: #305CDE Copy Hex: #DE305C Copy Hex: #5CDE30 Copy Hex: #305CDE Copy Hex: #DE30B3 Copy Hex: #DEB230 Copy Hex: #30DE5B Custom palettes Copy Hex: #305CDE Copy Hex: #59B5F7

Copy Hex: #274AB3 Copy Hex: #182E6F Magically Moonlit Copy Hex: #305CDE Copy Hex: #DEC331 Copy Hex: #DE9931 Copy Hex: #444B5E Sapphire Serenade Copy Hex: #305CDE Copy Hex: #31C9DE Copy Hex: #6DB3E8 Copy Hex: #2D23B8 What does royal blue look like on digital screens? 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. How should I effectively use royal blue in UI design? Here are a few ways to use royal blue in your designs: Command attention. Royal blue's vibrancy makes it ideal for call-to-action buttons, links, logos, or navigation elements. Build trust. Royal blue can reinforce trust and reliability—great for finance, healthcare, and technology brands. Evoke emotion and atmosphere. Use royal blue in backgrounds or gradients on splash screens and landing pages to evoke a sense of depth, stability, and sophistication. Use for data visualization. Apply royal blue in charts, graphs, and progress bars. Its clarity and visual appeal help differentiate and highlight important information. 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. What are similar colors to royal blue? For variations within the same vibrant and regal spectrum as royal blue, consider: Cobalt blue (#0047AB) possesses a slightly deeper hue with an intense depth reminiscent of the striking appeal of royal blue. Sapphire blue (#0F52BA) offers a gemstone-inspired richness, balancing brightness and depth that mirrors royal blue's allure. Dodger blue (#1E90FF) is lighter and more luminous, capturing the spirited vibrancy characteristic of royal blue. Persian blue (#1C39BB) blends the deep majesty of royal blue with a hint of purple, adding a touch of exotic elegance. What colors go with royal blue? To complement royal blue's dignified tones, consider pairing it with: Gold (#EFBF04) enriches the royal palette with its luxury, emphasizing the luxuriousness of royal blue. Ivory (#FFFFE3) provides a soft, warm contrast, offering a classic elegance that beautifully highlights the depth of royal blue. Charcoal gray (#4A4A4A) introduces a modern, sophisticated contrast, grounding the vibrancy of royal blue with its neutral stability. Salmon pink (#FA8072) adds a gentle warmth, creating a harmonious balance with the coolness of royal blue for a vibrant yet sophisticated look. Pastel green (#80EF80) for a refreshing and uplifting contrast that emphasizes royal blue's richness with a touch of spring freshness. 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. What colors conflict with royal blue? While royal blue is versatile, it may clash with: Kelly green (#4CBB17) can be too bright and may overpower the sophistication of royal blue, leading to a visually jarring combination. Orange (#FFA500) presents a stark, vibrant contrast that can detract from royal blue's regal essence, making the palette feel overly aggressive. Hot pink (#FF69B4) , while playful, may compete too strongly with royal blue, potentially clashing and overshadowing its majestic quality. Neon yellow (#FFFF00) has a striking luminosity that could overwhelm and diminish the deep elegance of royal blue. Dark brown (#654321) , though neutral, might be too earthy and could dull the vibrant, royal essence of the blue, leading to a less harmonious pairing. What does royal blue symbolize? 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. What’s the history of royal blue? 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 checker How you design, align, and build matters. Do it together with Figma. How you design, align, and build matters. Do it together with Figma. Color simulations Copy Hex: #305CDE Copy Hex: #4343BF Copy Hex: #305CDE Copy Hex: #413DB7 Copy Hex: #305CDE Copy Hex: #32A669 Copy Hex: #305CDE Copy Hex: #5E5E5E Color conversion 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. Figma color wheel Want to find the perfect complementary or analogous colors to match royal blue? Learn more about the color blue. Learn more about pastel blue.