Shades of Blue

What this tool does

You have got one blue. Maybe it is your brand blue, maybe it is a blue you picked because it looked right on the button. Now you need the rest of it. A lighter version for the hover state, a darker one for the text, a soft one for a background that does not fight the rest of the page.

That is the job here. You give it a blue, and it hands you the whole run of that blue, from pale to deep, in even steps. Each step comes with its HEX, RGB, HSL, and HSV codes, ready to drop straight into your CSS or your design tool. Further down the page there is also a plain reference of the named blues, like navy and cobalt and sky, with their codes, because half the people who look for shades of blue want that list too.

How to use it

1. Set your base blue. The tool starts on a blue and shows its Hex. Use Change Color or the Color Picker to set your own, or paste in the exact hex of the blue you already use.
2. Choose how many shades. The Color Shades number sets how many steps to generate, ten by default. Fewer gives you big jumps, more gives you a finer gradient.
3. Read off the codes. Each shade is shown with its HEX, RGB, HSL, and HSV values, so you can copy whichever format your project needs.

The most useful trick is the second one. Paste your own blue in, and you are no longer guessing at a lighter or darker version by eye. You get the real, evenly spaced range of your exact colour.

How it works

Under the hood it uses TinyColor, a small colour library that does the maths of lightening and darkening properly. It takes your base blue, walks it toward white on one side and toward black on the other, and spaces the steps out evenly across that range. Then it converts each step into the four code formats for you.

That even spacing is the point, and it is the part people get wrong by hand. Nudging a colour darker by eye tends to drift the hue and bunch the steps up. Letting the library do it keeps every step a clean move along the same blue.

Shade, tint, and tone are not the same thing

This trips up almost everyone, so it is worth thirty seconds. A shade is a colour mixed with black, so it gets darker. A tint is a colour mixed with white, so it gets lighter. A tone is a colour mixed with grey, so it gets more muted.

By that strict reading, navy is a shade of blue, powder blue is a tint, and steel blue is a tone. In everyday design talk, though, people say "shades of blue" to mean every version of blue at once, light, dark, and muted. This page uses it the loose, everyday way, because that is what you came here looking for. The tool itself gives you the lighter tints and the darker shades of your base in one run.

The named shades of blue, with hex codes

Sometimes you do not want a generated range, you want a specific, recognised blue by name. Here are the ones people reach for most, with a common hex value and where each one tends to sit.

• Navy (#000080): deep and serious, the default for finance, law, and anything that wants to look dependable.
• Royal Blue (#4169E1): vivid and confident, popular in tech and sport.
• Cobalt Blue (#0047AB): a rich, saturated mid blue with roots in paint and ceramics.
• Cerulean (#007BA7): a sky blue with a slight green lean, calm but awake.
• Dodger Blue (#1E90FF): bright and energetic, a strong choice for links and buttons.
• Sky Blue (#87CEEB): light and airy, good for soft backgrounds.
• Light Blue (#ADD8E6): a pale, easy blue that sits quietly behind content.
• Powder Blue (#B0E0E6): paler still, soft and clean.
• Steel Blue (#4682B4): a muted, grey leaning blue that feels grown up and architectural.
• Cornflower Blue (#6495ED): a gentle mid blue, friendly without being loud.
• Midnight Blue (#191970): so dark it reads almost black, useful where pure black is too harsh.
• Teal (#008080) and Turquoise (#40E0D0): where blue tips into green, fresh and a little tropical.

Two honest warnings. First, the CSS keyword "azure" is not the vivid azure you might picture, it is a near white (#F0FFFF), so reach for a hex if you mean the bright one. Second, "slateblue" as a CSS keyword (#6A5ACD) is really quite purple. And in general, the same colour name maps to slightly different hex values across the CSS list, Pantone, and any given brand's spec. That mismatch is the whole reason a generator that works from your exact hex is handy.

What blue does in a design

Blue is the safe pick, in the best sense of the word. It sits at or near the top of nearly every survey of favourite colours, and it carries very few of the conflicting associations that a colour like red or purple drags along. People read it as calm, stable, and trustworthy, which is exactly why banks, tech companies, and hospitals lean on it so heavily.

That reputation does real work on a screen. Light blues feel clean and unstressful, so they make good backgrounds and quiet surfaces in apps and dashboards you stare at for hours. Deep blues feel solid and authoritative, so they carry headings, text, and anything that needs weight. Put a light tint and a dark shade of the same blue side by side and you have instant visual hierarchy, the light one stepping forward, the dark one anchoring it. The catch is that blue is cool, and an all blue layout can feel a little clinical, which is where the next part comes in.

Building a palette from your blue

The shades from this tool give you the spine of a palette, the same blue from light to dark. A common, reliable way to use them is to take a pale tint for backgrounds and surfaces, a mid blue for your main buttons and links, and a deep shade for text and contrast. Three steps of one blue, and the page already looks considered.

To stop it feeling cold, warm it up. Orange is blue's complementary colour, so a touch of it makes a punchy accent, and warm neutrals like beige and cream soften the whole thing without stealing focus. Worth handling with care are warm browns and highly saturated greens like lime and mint, which tend to argue with blue rather than support it. If you want a full multi colour scheme rather than the range of a single blue, that is a different job, and the Blue Color Palettes tool is built for exactly that.

Questions people ask

What is the hex code for navy blue?

The standard web value for navy is #000080. It is one of the CSS named colours, so you can also just write "navy" in your stylesheet and get the same result.

Is there one true blue?

The purest blue on a screen is #0000FF, which is full blue with no red or green. It is intense and a little hard on the eyes at large sizes, which is why most designs use a softer or deeper blue rather than the raw primary.

Can I use my own brand blue?

Yes, that is the best way to use it. Paste your brand's hex in as the base, and the tool builds the lighter and darker steps of that exact colour, which is how you get a matching set for hovers, backgrounds, and text.

Is this the same as a colour palette?

Not quite. This gives you the range of one blue, from light to dark. A palette is a set of different colours chosen to work together. If that is what you are after, the Blue Color Palettes tool handles it.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. TinyColor (Brian Grinstead). Documentation. https://github.com/bgrins/TinyColor
3. Stephen E. Palmer and Karen B. Schloss, An Ecological Valence Theory of Human Color Preference, Proceedings of the National Academy of Sciences (PNAS), 2010. https://www.pnas.org/doi/10.1073/pnas.0906172107