CSS Named Color Reference

Royal Blue

Royal Blue·#4169E1

Royal Blue is a published CSS named color that balances authority, clarity, and brightness. Use this page to inspect its exact code values, compare adjacent blues, and move it into conversion, palette, or brand-token workflows.

Recommended text colorWhite text
Body text pairing4.85:1
Strongest RoleTrustworthy CTAs, navigation, and enterprise product accents
Generate PaletteOpen Converter

Technical Values

Exact numeric values for cross-tool conversion, token mapping, and accessibility review.

HEX#4169E1Primary token
RGB65, 105, 225Screen values
HSL225, 73%, 57%Hue and lightness
CMYK71, 53, 0, 12Print handoff
LAB48, 26, -65Perceptual reference

Tonal Direction

Scan the ramp from light to dark to judge how Royal Blue behaves across action states, layered surfaces, and supporting accents.

100#DDE4FA
300#A8BAF1
500#6384E6
600#4169E1
800#2F4CA2

Contrast & Interface Preview

Not every foreground and background pairing behaves the same. Use these checks to decide when white text, dark text, or the color itself should take the lead.

White text on this color

Best for reversed buttons, tabs, badges, and filled action surfaces.

4.85:1Body text ready

Dark text on this color

Works for larger headings and selective UI blocks, but not for dense body copy.

3.54:1Large text / UI only

This color on light surface

Use this pairing when Royal Blue becomes the link, icon, border, or emphasis color on very light surfaces.

4.60:1Body text ready
Recommended text colorWhite text

White text reaches 4.85:1 against Royal Blue, which is strong enough for body text and standard action surfaces.

Where This Color Works

  • Use Royal Blue when you need a confident interface blue that reads brighter than navy but steadier than electric accent blues.
  • It works well for links, call-to-action buttons, data highlights, and enterprise product branding where trust matters.
  • Pair it with off-whites, slate neutrals, and cooler cyan accents when building more technical UI systems.

Reference Context

Color Notes

Royal Blue is sourced from the published CSS Standard Colors library and retained here as a searchable reference swatch for product, interface, and branding work.

Hue Family

Trust-building blues for enterprise and SaaS.

Source Library
CSS Named Colors

Related Blues

Blue

Blue

#0000FF·CSS Standard Colors

Cornflower Blue

Cornflower Blue

#6495ED·CSS Standard Colors

Dodger Blue

Dodger Blue

#1E90FF·CSS Standard Colors

Steel Blue

Steel Blue

#4682B4·CSS Standard Colors

Tailwind Blue 500

Tailwind Blue 500

#3B82F6·Tailwind CSS Colors

Palette Starting Points

Deep Sea Odyssey

Open Palette Library

Aurora Coast

Open Palette Library

Graphite Blueprint

Open Palette Library

Implementation Snippets

Reference-ready snippets for CSS variables, utility-first styling, and token exports.

CSS Variables
:root {
  --color-royal-blue: #4169E1;
  --color-royal-blue-rgb: 65 105 225;
}

Drop into a global token file or CSS variable layer.

Utility Class
class="bg-[#4169E1] text-white"
class="hover:bg-[#2F4CA2] ring-1 ring-[#4169E1]"

Direct utility usage for a fast prototype or content block.

JSON Token
{
  "royalBlue": "#4169E1",
  "royalBlueRgb": [65, 105, 225],
  "royalBlueHsl": [225, 73, 57]
}

Useful for design token exports and API-driven theme objects.

Move This Color Into the Workflow

Carry Royal Blue into conversion, brand palette generation, and palette exploration workflows to test how it behaves across interface scenarios.

Generate PaletteBrowse More Colors