12 Different Shades of Blue (+ HEX codes)
Explore all shades of blue, from lighter to darker shades. See HEX codes, shade names, and blue color palettes. Click any shade to copy its HEX code.
Blue is the most-used colour in software and the most trusted in branding, partly because it is the one almost nobody dislikes. It recedes, which makes it a safe background.
Its risk is coldness: add a warm accent, or pick a blue with a little green in it for approachability.
- titan white#ebebff
- periwinkle#d2d2ff
- melrose#babaff
- malibu#8989ff
- cornflower blue#7070ff
- dodger blue#5858ff
- blue ribbon#4040ff
- blue#2727ff
- dark blue#0000dd
- navy blue#000094
- stratos#00004a
- black russian#00001a
Blue: HEX & RGB Codes
blue has the following primary color codes:
HEX: #ebebff
RGB: (235, 235, 255).
Explore a wide range of blue shades using our interactive color picker. Click any color to copy its HEX code and use it in your project!
Explore tints of blue
Titan White
#ebebff
Titan White
#ebebff
Titan White
#f0f0ff
Titan White
#f0f0ff
Titan White
#f5f5ff
Titan White
#f5f5ff
Titan White
#f5f5ff
Titan White
#fafaff
Titan White
#fafaff
White
#ffffff
Explore shades of blue
Violet
#090934
Bunting
#15154c
Cloud Burst
#252565
East Bay
#3b3b81
Butterfly Bush
#55559b
Wild Blue Yonder
#7474b4
Blue Bell
#9494cc
Periwinkle Gray
#bdbde5
blue in HEX, RGB, HSL and CMYK
| HEX | #0000FF | |
|---|---|---|
| RGB | rgb(0, 0, 255) | |
| HSL | hsl(240, 100%, 50%) | |
| CMYK | cmyk(100%, 100%, 0%, 0%) |
Tints and shades of blue
Tints add white and shades add black, keeping the hue. Use them for hover states, borders and backgrounds that still belong to the same colour.
Tints (lighter)
#2727ff
#4e4eff
#7575ff
#9c9cff
#c4c4ff
#ebebff
Shades (darker)
#0000d8
#0000b1
#00008a
#000063
#00003b
#000014
Colours that work with blue
Complementary
#0000FF #ffff00
Opposite on the colour wheel. Maximum contrast — use it for accents, not for half the page.
Analogous
#007fff #0000FF #7f00ff
Neighbours on the wheel. Calm and cohesive, the safest way to build a palette.
Triadic
#0000FF #ff0000 #00ff00
Three colours evenly spaced. Lively and balanced; let one dominate.
Text on blue
Measured against WCAG: 4.5:1 for body text, 3:1 for large text. Test your own pair in the Contrast Checker
blue shade chart
Right-click to save the chart, or copy the individual codes above.