Color Palette Generator

Generate a 5-shade palette from a base color

Runs locally in your browser

HEX

#0f12ae

#1e21eb

#6467f2

#afb0f3

#a864f2

How it works

Generates a cohesive five-shade palette from a single base HEX color—lighter tints and darker shades for backgrounds, borders, and hover states.

Who it's for: UI designers, frontend developers, and marketers building landing pages and brand mockups

Derives five related shades from one picker or HEX input.

Displays each swatch with its HEX code for direct use in CSS or design tools.

Updates instantly when you change the base color.

Pick a base color with the color picker or type a HEX value (e.g., #3B82F6).
Review the five generated shades for primary, hover, background, and text-on-color uses.
Click to copy individual HEX codes or the full palette.
Apply colors in your CSS variables, Tailwind config, or Figma styles.

Check contrast ratios against WCAG guidelines before using lighter shades for body text.
Export a screenshot of swatches if you need to share with stakeholders who do not use HEX.

More calculators in the same category