White text 16.0:1
Blue covers everything from the palest Alice Blue to deep Prussian Blue.
Below you'll find 37 named shades of blue with HEX, RGB, HSL and CMYK codes - click any code to copy it.
Need your own scale? The generator further down turns any blue into a full 50-950 palette.
Alice Blue - lightest37 shades sorted light to darkdarkest - Oxford Blue
Download all 37 shades of blue
Photoshop, Illustrator, InDesign, AffinityA Tailwind-style scale built from Blue (#0000FF), evenly spaced in OKLCH lightness. Paste any other blue to build its own scale, or click a swatch for its codes and contrast.
Something went wrong. Please try again.
Still having trouble? Please contact us and we'll be happy to help!
Hmm, that doesn't look like a color yet. Try #3399cc, rgb(51, 153, 204), hsl(200, 60%, 50%) or a name like Cobalt.
#0000FFrgb(0, 0, 255)hsl(240, 100%, 50%)cmyk(100%, 100%, 0%, 0%)Tints mixed with white
Shades mixed with black
Tones mixed with gray
Click any swatch to see its codes and contrast. Tints, shades and tones are simple RGB mixes, the classic way painters and print designers make them.
:root {
--brand-50: #f4f7fc;
--brand-100: #e1e9f8;
--brand-200: #c6d6f6;
--brand-300: #9fbcf8;
--brand-400: #6999ff;
--brand-500: #3f78ff;
--brand-600: #134fff;
--brand-700: #0000ff;
--brand-800: #052fb5;
--brand-900: #072b90;
--brand-950: #081f5d;
}Next: blend 50 into 950 in the Gradient Generator, test every pair in the Accessible Color Palette, check 900 on 100 with the Contrast Checker or find matching colors on the Color Wheel.
Using the same color wheel maths as our Color Wheel, these are the harmonies for Blue (#0000FF). Click a group to open it on the wheel.
#FFFF00 Yellow
Analogous
Next-door neighbors - calm and harmonious
#0080FF Azure#8000FF Violet
Triadic
Three evenly spaced hues - bold and balanced
#FF0000 Red#00FF00 Lime
Split complementary
The two neighbors of the opposite - contrast with less tension
#FF8000 UT Orange#80FF00 Chartreuse
Blue is linked with calm, trust and stability. Surveys in many countries regularly name it the most popular favorite color, which is one reason banks, tech companies and healthcare brands lean on it so heavily.
It was not always cheap. In the Renaissance, ultramarine was ground from lapis lazuli and could cost more than gold, so painters saved it for the most important parts of a picture.
Chemistry changed that. Prussian Blue, made in Berlin in the early 1700s, was one of the first modern synthetic pigments, and cobalt and synthetic ultramarine followed in the 1800s.
See blue in complete, ready-made palettes - each one with codes and downloads.
Want a palette built around one exact blue? Start from it in the AI Color Palette Generator or pull colors from a photo with the Image Color Picker.
Blue is #0000FF, which is rgb(0, 0, 255) and hsl(240, 100%, 50%). For print it is about 100% cyan, 100% magenta, 0% yellow and 0% black. It is also a CSS color keyword, so you can simply write blue in your stylesheet.
There is no fixed number - any blue can be made lighter, darker or more muted. This page lists 37 named shades, from Alice Blue (#F0F8FF) to Oxford Blue (#002147). The generator on this page makes a full 50-950 scale and unlimited tints, shades and tones from any blue.
Blue (#0000FF) has a contrast ratio of 8.59:1 on white, which passes WCAG AAA for normal text. On black it reaches 2.44:1, so use it as text on light backgrounds, or put white text on it. Test any pair with the Contrast Checker.
Among common named blues, Oxford Blue (#002147), Navy (#000080) and Dark Blue (#00008B) are the darkest. Very dark blues read almost like black, which makes them a softer alternative to pure black for text and dark themes.
Navy (#000080) is a very dark, slightly muted blue named after naval uniforms. Royal Blue (#4169E1) is much lighter and brighter, with a hint of purple. See all the dark ones on shades of navy blue.
Turquoise sits between blue and green. It has its own page - see shades of turquoise - and the in-between teal tones are on shades of teal.