Recolorify
Sign inStart free →
DESIGN7 min read· Jun 16, 2026

The Ultimate Guide to Blue Color Codes, Hex Codes, and Shades of Blue

Blue is the most trusted color in commerce — it anchors fintech, SaaS, healthcare, and tech brands, and it's the safest hue for converting product pages. Whether you're a web designer matching co-brand assets, an e-commerce manager building variant listings, or a developer wiring up a design system, color codes are your shared language. In this guide we break down the hex codes, RGB coordinates, and LAB parameters for the most popular shades of blue, with practical tips on recoloring assets into these exact tones without quality loss.

The Ultimate Guide to Blue Color Codes, Hex Codes, and Shades of Blue

The core blues and their codes

  • Navy blue — #000080 · RGB(0, 0, 128) · deep, authoritative, the default for finance and law.
  • Royal blue — #4169E1 · RGB(65, 105, 225) · vivid and confident, common in tech and sport.
  • Sky blue — #87CEEB · RGB(135, 206, 235) · light and open, used for calm, airy interfaces.
  • Teal — #008080 · RGB(0, 128, 128) · blue-green, modern and distinctive for SaaS brands.
  • Cobalt blue — #0047AB · RGB(0, 71, 171) · saturated and rich, strong for accents and CTAs.
  • Powder blue — #B0E0E6 · RGB(176, 224, 230) · soft pastel for backgrounds and decor.

Why hex alone isn't enough for recoloring

A hex code defines a target color, but it says nothing about lightness. When you recolor a navy jacket to sky blue using a flat RGB swap, you flatten the fabric's folds and shadows along with the hue — and the result looks fake.

This is why perceptually-uniform spaces matter. LAB separates lightness (the L channel — folds, highlights, shadows) from the color itself (A and B). Recoloring in LAB lets you hit an exact blue hex while every shadow and texture detail of the original survives. The same logic applies to OKLCH, which keeps perceived lightness constant as you shift hue.

Matching brand blues across assets

Blue drifts. A logo blue, a button blue, and a product-photo blue that all started as #1D4ED8 can end up three slightly different shades once they pass through compression and ad-hoc edits. The fix is to define each brand blue once — with a name, a hex, and a use case — and recolor every asset to that exact value rather than eyeballing it.

With Recolorify you can paste an exact blue hex and recolor a logo, product photo, or garment to match it precisely, keeping texture intact. That's how you keep a single, consistent brand blue across listings, decks, and campaigns. Explore the full set: red, green, orange, pink, purple, and yellow color codes.