Blue occupies roughly 180° to 260° of the colour wheel, running from cyan-leaning ocean tones at one end to violet-leaning indigo at the other. The palettes here sit between 189° and 239°. Copy the HEX codes from any scheme below, or use the generator to build a harmonious blue palette around a base colour of your own.
Ocean Blue is the widest set, jumping from a violet-blue #03045E to a pale cyan #CAF0F8. Classic Blue holds one hue (198°–206°) and changes only lightness, which is the safest structure for a brand ramp. Sky Blue is that same ramp with the dark end removed.
#03045E#0077B6#00B4D8#90E0EF#CAF0F8#012A4A#013A63#01497C#2A6F97#61A5C2#CAF0F8#ADE8F4#90E0EF#48CAE4#00B4D8Anchored to a blue base — press Space or Generate to roll more schemes. Click a swatch to copy its HEX, lock one to keep it while the rest re-roll, then export as CSS, JSON or HEX.
Drag in the colour area or the hue bar, or type a HEX / RGB value, then build a scheme anchored to it.
Blue is the default trust colour for finance, SaaS and healthcare, so the differentiator is usually what sits beside it: orange or amber for a warm complement, gray for a neutral system, navy for depth without adding a second hue. Keep the pale tints for surfaces and the #01497C end for text — see royal blue for a more saturated version of the same idea.
:root block with each colour as a custom property (--color-1, --color-2 and so on), or copy a single HEX straight from any swatch above. The Classic Blue row above is a second ready-made option — #012A4A, #61A5C2 and the three steps between them — if you would rather not generate at all. The generator itself rolls around #0077B6, the base blue for this page. Use Copy JSON for an array or Copy HEX for a comma-separated line if custom properties are not how your project stores colour.More palettes: Periwinkle palette · Lavender palette · Gray palette · all colours