Color tools

Blue color codes

Blue color codes for #0000FF — HEX, RGB, HSL, HSV, shades, named blues, and copy-ready CSS. Free online tool — no sign-up. Runs locally in your browser.

Loading tool…

Loading Preparing tool…

How to use

Follow these steps for a clear answer.

Explore the base color

Review HEX, RGB, HSL, and HSV for pure blue, then browse shades, tints, tones, and hues.

Pick a variation or named shade

Click a generated strip or a CSS named blue (navy, dodgerblue, skyblue, …) to load codes and harmonies.

Copy for CSS

Copy HEX, rgb(), hsl(), or the keyword—and check contrast on white and black.

Color formulas

Core relationships used by this color tool.

CSS blue#0000FF = rgb(0, 0, 255) = hsl(240°, 100%, 50%)

Shadesame H/S, lower L (mix toward black)

Tintsame H/S, higher L (mix toward white)

ComplementH + 180° (yellow for pure blue)

iHSV (or HSB) keeps hue with saturation and value; HSL uses lightness. Pure blue is web-safe and one of the original HTML named colors.

Example colors

Common picks with formula and result.

Pure blue

CSS keyword

color: blue;

#0000FF · rgb(0, 0, 255)

Navy

Darker blue

background-color: navy;

#000080 · hsl(240, 100%, 25%)

Dodger blue UI

Bright accent

#1E90FF

Links, buttons, highlights

Complement pair

Blue + yellow

#0000FF · #FFFF00

High-contrast accent pair

Blue color family specification

Version 1.0.0

Definition: Blue is a primary additive color in the RGB model. The CSS keyword blue is pure blue light at full intensity (#0000FF / rgb(0, 0, 255) / hsl(240, 100%, 50%)). Designers use blue families—navy, sky, royal, steel, and related named shades—to suggest calm, trust, and clarity on screens.
What it calculates: Blue family variations (shades, tints, tones, hues), named CSS blues, harmony sets, HEX/RGB/HSL/HSV codes, and contrast vs white/black.
Inputs: Selected variation chip, named shade, or harmony swatch
Section mode (variations, named shades, harmonies)
Outputs: HEX, RGB, HSL, HSV
Optional CSS keyword
Contrast ratios on white and black
Formula: Shades/tints/tones adjust HSL L or S from base H; harmonies offset H on the hue circle
Blue evokes sky and water—often read as calm, trustworthy, and professional in UI. Use lighter blues for soft surfaces, mid blues for interactive accents, and navy/midnight for text or headers. Culture and brand context still matter; pair with neutrals or a warm complement when you need energy.

For full keyword search across all hues, use HTML color codes. For palette generation, try the color scheme generator or color wheel.

:root { --blue: #0000ff; --blue-accent: #1e90ff; /* dodgerblue */ --blue-ink: #000080; /* navy */ } .banner { background-color: var(--blue-accent); color: #ffffff; }
Popular CSS blues: Name HEX RGB Feel
aliceblue #F0F8FF 240, 248, 255 Near-white wash
lightblue #ADD8E6 173, 216, 230 Soft sky
skyblue #87CEEB 135, 206, 235 Open sky
dodgerblue #1E90FF 30, 144, 255 Bright UI accent
royalblue #4169E1 65, 105, 225 Rich mid blue
steelblue #4682B4 70, 130, 180 Muted professional
blue #0000FF 0, 0, 255 Pure primary
mediumblue #0000CD 0, 0, 205 Deep primary
darkblue #00008B 0, 0, 139 Ink blue
navy #000080 0, 0, 128 Classic dark
midnightblue #191970 25, 25, 112 Night sky
i Related cool hues (cyan, teal, indigo, lavender) appear in Named shades when useful for blue-adjacent palettes.
Assumptions: Base keyword blue = #0000FF in sRGB.
Named list uses CSS Color Module keywords in/near the blue family.
Tool runs locally; nothing is uploaded.
Units: HEX: #RRGGBB
RGB: 0–255
HSL/HSV: hue degrees; S/L/V percent
Boundary conditions: Lightness/saturation steps stay within visible ranges (~0–100%).
Hue offsets wrap modulo 360°.
Example: blue → navy #000080; complementary → yellow #FFFF00
Validation cases: blue → #0000FF
navy → #000080
complement of #0000FF → #FFFF00
#0000FF on #FFFFFF → contrast ≈ 8.6:1 (AA pass)
Sources: CSS Color Module named colors (blue family)
Classical shade/tint/tone and hue-harmony geometry
WCAG relative-luminance contrast
Calculation version: 1.0.0

Name	HEX	RGB	Feel
aliceblue	#F0F8FF	240, 248, 255	Near-white wash
lightblue	#ADD8E6	173, 216, 230	Soft sky
skyblue	#87CEEB	135, 206, 235	Open sky
dodgerblue	#1E90FF	30, 144, 255	Bright UI accent
royalblue	#4169E1	65, 105, 225	Rich mid blue
steelblue	#4682B4	70, 130, 180	Muted professional
blue	#0000FF	0, 0, 255	Pure primary
mediumblue	#0000CD	0, 0, 205	Deep primary
darkblue	#00008B	0, 0, 139	Ink blue
navy	#000080	0, 0, 128	Classic dark
midnightblue	#191970	25, 25, 112	Night sky

Frequently asked questions

Key distinctions behind the tool.

What is the hex code for blue?

The CSS named color blue is #0000FF, equal to rgb(0, 0, 255) and hsl(240, 100%, 50%).

What is the difference between blue and navy?

Blue is pure blue at full brightness. Navy (#000080) keeps the same hue but is much darker (about 25% lightness), so it often works better for text or chrome on light backgrounds.

What colors go with blue?

Neutrals (white, gray, silver) keep blue dominant. Complements near yellow/orange add energy; beige or peach softens a palette. Always check text contrast.

Is pure blue good for body text?

On white, #0000FF often passes WCAG AA, but darker blues (navy, darkblue) are usually more comfortable for long reading. Avoid blue text on black—contrast is typically too low.

How do I use blue in CSS?

Use color: blue;, color: #0000FF;, or color: rgb(0, 0, 255); on any property that accepts a <color> value, including background-color and border-color.