Blue Color (#0000FF)

#0000FFrgb(0, 0, 255)

Blue is a CSS named color defined as hex code #0000FF. Blue is the pure blue of the sRGB screen: the blue channel at full strength with nothing else. It is very saturated but surprisingly dark, so white text has strong contrast on it while black text does not.

Color Overview & Formats

CSS: blueLuminance: 0.0722
HEX
#0000FF
RGB
rgb(0, 0, 255)
HSL
hsl(240, 100%, 50%)
Blue (#0000FF) Color Format Conversions
FormatSyntax / ValuesNotesAction
HEX#0000FF6-digit hex web code
RGBrgb(0, 0, 255)Red, Green, Blue channels (0-255)
HSLhsl(240, 100%, 50%)Hue (240°), Saturation (100%), Lightness (50%)
HSV / HSBhsv(240, 100%, 100%)Hue, Saturation (100%), Value/Brightness (100%)
CMYKcmyk(100%, 100%, 0%, 0%)Digital mathematical approximation (non-print)
OKLCHoklch(0.452 0.313 264.1)Perceptually uniform color space (CSS Color 4 approximation)
CSS Implementation & Quick Steps
background-color: #0000FF; /* or blue */
  1. Select color format: Choose the desired format (HEX #0000FF, RGB, or HSL).
  2. Copy the code: Click the copy button or press Tab+Enter to store in clipboard.
  3. Pair with white text: White text on Blue reaches 8.59:1 (WCAG AAA).

What Colors Go With Blue?

These 6 colors all go well with Blue (#0000FF), and each one is a standard CSS named color. The ratio is the WCAG 2.2 contrast of that color on Blue: at 4.5:1 or above it works for text; below that, use it for backgrounds and accents.

White

#FFFFFF
8.59:1Text-safe

The natural text color on blue: clean and strongly readable.

Ivory

#FFFFF0
8.52:1Text-safe

A softer, warmer alternative to white on blue.

Yellow

#FFFF00
8:1Text-safe

The classic high-energy complement, used in sports and signage.

Gold

#FFD700
6.13:1Text-safe

A warmer, more refined accent than pure yellow.

Light Gray

#D3D3D3
5.74:1Text-safe

A calm neutral for secondary text and dividers.

Orange

#FFA500
4.35:1Background / accent

A vivid complement for playful, high-contrast designs.

Harmonious Palettes & Tints

The palettes below are algorithmically generated across standard intervals based on Blue (HSL 240°). Each group offers full palette copy and live preview:

Complementary Harmony

Hue rotated 180 degrees on the HSL wheel (240° to 60°), keeping the original saturation and lightness.

Blue
#0000FF
Complement (60°)
#FFFF00
Live UI Component Mockup
Component Header SampleWhite text on Blue: 8.59:1 (WCAG AAA).
Button style preview

Analogous Harmony

Hues 30 degrees either side (210° and 270°), keeping the original saturation and lightness.

Analogous (210°)
#007FFF
Blue
#0000FF
Analogous (270°)
#7F00FF
Live UI Component Mockup
Component Header SampleWhite text on Blue: 8.59:1 (WCAG AAA).
Button style preview

Triadic Harmony

Hues spaced evenly by 120 degrees (0° and 120°), keeping the original saturation and lightness.

Blue
#0000FF
Triadic (0°)
#FF0000
Triadic (120°)
#00FF00
Live UI Component Mockup
Component Header SampleWhite text on Blue: 8.59:1 (WCAG AAA).
Button style preview

Tints & Shades

Mixed with white (tints) and black (shades) in sRGB at 60% and 30%.

Tint 60%
#9999FF
Tint 30%
#4D4DFF
Blue
#0000FF
Shade 30%
#0000B3
Shade 60%
#000066
Live UI Component Mockup
Component Header SampleWhite text on Blue: 8.59:1 (WCAG AAA).
Button style preview

WCAG 2.2 Text Readability & Contrast Check

Under WCAG 2.2 criteria, regular body text requires at least 4.5:1 (AA) and large text requires at least 3.0:1. The table below displays calculated contrast ratios:

Text Contrast Ratios on Blue (#0000FF)
Foreground ColorContrast RatioNormal Text (AA)Large Text (AA)Normal Text AAA (>= 7.0:1)
Pure Black (#000000)
2.44:1FailFailFail
Pure White (#FFFFFF)
8.59:1PassPassPass
Dark Charcoal (#212529)
1.80:1FailFailFail
Mid Gray (#666666)
1.50:1FailFailFail

Interactive Contrast Tester

Enter text foreground and background colors to verify WCAG legibility:

Calculated Ratio:
8.59:1
Normal: Pass AAALarge: Pass AAA
Large Heading Sample (18pt Bold)

This is sample body text rendered directly to verify contrast and readability.

Blue Background Download

Download standard 1920x1080 solid desktop wallpaper or generate mobile wallpaper:

Blue 1920x1080 solid color background wallpaper previewStandard Wallpaper: 1920x1080 PNG (#0000FF)

Download Options

All wallpaper files precisely match the W3C standard color value:

Download 1920x1080 PNG

CSS Standard & Usage Notes

blue = #0000ff (rgb(0, 0, 255))
W3C CSS Color 4

UI Design & Accessibility Guidelines

Use it for links, primary buttons and strong accents; it is too intense for large backgrounds. On Blue, white text passes WCAG AAA at every size (8.59:1); black text fails even for large text (2.44:1).

Published: · Modified: · Editorial: SwatchAtlas Editorial Team

Frequently Asked Questions (FAQ)

Can I use black text on Blue?

No. Black text on Blue has a WCAG 2.2 contrast ratio of only 2.44:1, below the 3:1 minimum even for large text.

Can I use white text on Blue?

Yes. White text on Blue has a WCAG 2.2 contrast ratio of 8.59:1, passing both AA (4.5:1) and AAA (7:1) at every text size.

What colors go with Blue?

White, Ivory, Yellow, Gold, Light Gray and Orange all go well with Blue. White (8.59:1), Ivory (8.52:1), Yellow (8:1), Gold (6.13:1) and Light Gray (5.74:1) have enough contrast for text on Blue; Orange works better as a background or accent.

What is the hex code for blue?

The CSS named color blue is #0000FF, which is RGB(0, 0, 255). The short form #00F is the same color.