What is the true hex code for pure blue?

The hex code for pure RGB screen blue is #0000FF, with RGB values of rgb(0, 0, 255) and HSL values of hsl(240, 100%, 50%). In user interfaces, softer modern blues such as #2563EB or #1D4ED8 are widely favored for legibility.

What is the hex code for royal blue?

Royal Blue is conventionally represented by the web color hex code #4169E1 (RGB: 65, 105, 225). In modern design systems like Tailwind CSS, Blue 600 (#2563EB) serves as an updated royal blue.

Why is blue the most popular color for website interfaces?

Blue is universally associated with security, intelligence, reliability, and calm. Furthermore, blue is rarely affected by common forms of color blindness (such as deuteranomaly or protanomaly), making it an inherently accessible choice for primary action buttons.

📘 Color Family Encyclopedia

Blue Color Codes: Hex Chart, Shades & UI Palettes

Blue is the cornerstone of modern interface architecture. From trust-building corporate navbars to vibrant SaaS action buttons, discover popular blue HEX codes, RGB/HSL conversions, 50-950 Tailwind shades, and accessibility contrast standards.

Popular Blue Hex Color Codes

Click any swatch to copy its HEX code directly to your clipboard:

Copy HEX

Royal Blue (Tailwind 600)

#2563EB

RGB: 37, 99, 235
HSL: 221°, 83%, 53%

Copy HEX

Dodger Blue

#1E90FF

RGB: 30, 144, 255
HSL: 210°, 100%, 56%

Copy HEX

Navy Blue

#000080

RGB: 0, 0, 128
HSL: 240°, 100%, 25%

Copy HEX

Sky Blue

#87CEEB

RGB: 135, 206, 235
HSL: 197°, 71%, 73%

Copy HEX

Cobalt Blue

#0047AB

RGB: 0, 71, 171
HSL: 215°, 100%, 34%

Copy HEX

Steel Blue

#4682B4

RGB: 70, 130, 180
HSL: 207°, 44%, 49%

Copy HEX

Midnight Blue

#191970

RGB: 25, 25, 112
HSL: 240°, 64%, 27%

Copy HEX

Cyan Blue (Tailwind 500)

#06B6D4

RGB: 6, 182, 212
HSL: 189°, 94%, 43%

Blue Shades Scale (50 to 950)

Standard 11-step design system scale calculated for modern UI applications. Light tints (50–200) serve as table backgrounds and alert containers, core mid-tones (500–600) power interactive buttons, and deep dark shades (800–950) provide high-contrast text and dark mode surfaces.

100

200

300

400

500

600

700

800

900

950

Want custom shades for any brand hex? Use our interactive Color Shades Generator.

Harmonious UI Palette Ideas with Blue

Fintech Enterprise Indigo

Professional corporate palette combining Navy base, Royal Blue accent, and crisp light borders.

Ocean SaaS Energy

High-conversion pairing balancing vibrant Blue 600 primary action buttons with Emerald green indicators.

Blue & Amber Warmth

Complementary contrast scheme pairing deep Navy text with striking Amber warning and notification badges.

How to Use Blue in Modern CSS

/* 1. Define Design Tokens in :root */ :root { --color-blue-50: #eff6ff; --color-blue-500: #3b82f6; --color-blue-600: #2563eb; --color-blue-700: #1d4ed8; --color-blue-950: #172554; } /* 2. Accessible Primary Button with Focus Rings */ .btn-primary { background-color: var(--color-blue-600); color: #ffffff; padding: 10px 22px; border-radius: 8px; font-weight: 700; transition: background-color 0.2s ease, box-shadow 0.2s ease; } .btn-primary:hover { background-color: var(--color-blue-700); } .btn-primary:focus-visible { outline: 3px solid var(--color-blue-500); outline-offset: 2px; }

Accessibility and WCAG Contrast Considerations

When designing with blue, ensure your text passes WCAG 2.1 Level AA (4.5:1 ratio):

White text on Blue: Royal Blue #2563EB achieves a 4.56:1 contrast ratio on white text (Level AA passed). For enhanced Level AAA compliance, use Blue 700 #1D4ED8 (5.8:1) or Navy #1E3A8A (9.4:1).
Blue text on Light Background: Never use Sky Blue #87CEEB or Light Blue for body text against a white background—it fails contrast severely (1.5:1). Instead, use Blue 800 (#1E40AF) or Blue 900 (#1E3A8A).
Test your custom combinations live with our WCAG Color Contrast Checker.

Need to Convert Between HEX, RGB & HSL?

Use our instant bidirectional color converter with live contrast calculation.

Open Color Converter →

Frequently Asked Questions About Blue Color Codes

What is the hex code for pure blue in CSS? +

The hex code for pure RGB screen blue is #0000FF (RGB: 0, 0, 255). However, for digital UI design, modern designers prefer #2563EB or #1D4ED8 because pure blue is overly saturated for prolonged viewing.

What is the difference between Sky Blue and Navy Blue? +

Sky Blue (#87CEEB) has a high lightness value (73%) and low contrast against white, making it ideal for decorative badges or subtle backgrounds. Navy Blue (#000080) has low lightness (25%) and exceptional 12:1 contrast against white, making it ideal for primary typography and dark surfaces.

How can I extract blue shades from an image? +

You can use our free, 100% private Image to Palette Generator. Drag and drop any landscape, photo, or screenshot, and the tool will automatically quantize pixels and display the dominant blue hex codes with instant copy buttons.