colorcodekit

Color Codes › Shades of Blue

Shades of blue

Q: What are the shades of blue?

Shades of blue are made by mixing blue with black, producing progressively darker versions. Tints mix with white for lighter versions, and tones mix with grey for muted versions.

Q: What is the hex code for blue?

A common blue is #3B82F6 (rgb(59, 130, 246)), but blue spans a whole range — see the full set of shades and tints on this page.

A full palette of blue — shades (toward black), tints (toward white) and tones (toward grey) — each with its hex and RGB code. Click any swatch to copy.

#3B82F6

Shades of blue

Blue mixed with black — darker and deeper.

#3B82F6

rgb(59, 130, 246)

#3676E0

rgb(54, 118, 224)

#306AC9

rgb(48, 106, 201)

#2B5FB3

rgb(43, 95, 179)

#26539D

rgb(38, 83, 157)

#204786

rgb(32, 71, 134)

#1B3B70

rgb(27, 59, 112)

#152F59

rgb(21, 47, 89)

#102343

rgb(16, 35, 67)

#0B182D

rgb(11, 24, 45)

#050C16

rgb(5, 12, 22)

#000000

rgb(0, 0, 0)

Tints of blue

Blue mixed with white — lighter and softer.

#3B82F6

rgb(59, 130, 246)

#4D8DF7

rgb(77, 141, 247)

#5F99F8

rgb(95, 153, 248)

#70A4F8

rgb(112, 164, 248)

#82AFF9

rgb(130, 175, 249)

#94BBFA

rgb(148, 187, 250)

#A6C6FB

rgb(166, 198, 251)

#B8D2FC

rgb(184, 210, 252)

#CADDFD

rgb(202, 221, 253)

#DBE8FD

rgb(219, 232, 253)

#EDF4FE

rgb(237, 244, 254)

#FFFFFF

rgb(255, 255, 255)

Tones of blue

Blue mixed with grey — muted and subtle.

#3B82F6

rgb(59, 130, 246)

#4182EB

rgb(65, 130, 235)

#4882E1

rgb(72, 130, 225)

#4E81D6

rgb(78, 129, 214)

#5481CB

rgb(84, 129, 203)

#5A81C0

rgb(90, 129, 192)

#6181B6

rgb(97, 129, 182)

#6781AB

rgb(103, 129, 171)

#6D81A0

rgb(109, 129, 160)

#738095

rgb(115, 128, 149)

#7A808B

rgb(122, 128, 139)

#808080

rgb(128, 128, 128)

Shades, tints and tones explained

Starting from a base blue (#3B82F6), a shade adds black, a tint adds white, and a tone adds grey. Together they give you a coherent blue palette — useful for hover states, backgrounds, borders and accessible text.

Want a different starting blue? Open the colour picker, choose your exact blue, and it will generate fresh shades and tints, or convert any of the codes above to OKLCH, HSL or CMYK.

What are the shades of blue?

Blue mixed with increasing amounts of black, giving progressively darker versions. Tints use white, tones use grey.

What is the hex code for blue?

A common blue is #3B82F6, but blue spans the whole range shown above.

Popular colours

Sage green Navy blue Teal Coral Burgundy Terracotta Mint green Shades of blue Shades of pink All colour codes →

Color tools

Color Picker →

Pick visually, get every code.

Converter →

Convert between any formats.

Contrast Checker →

WCAG AA/AAA pass-fail.

Named Colors →

All 140 CSS colours.