Back to home
Designers
Color Palette Generator
Generate a 5-shade palette from a base color
Runs locally in your browser
Base color
Palette
#0f12ae#1e21eb#6467f2#afb0f3#a864f2How 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.
How to use
- 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.
Good to know
- 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.