SmartKitio

Color Palette Generator

Start from one base color and get a five-color palette of darker, lighter, and neighbouring shades for a quick UI or brand mock-up.

Your input stays in your browser. Nothing is uploaded.

About this tool

The base color is converted to HSL. The palette then contains two darker shades (lightness −28 and −14 points), the base color itself, a lighter and slightly more saturated tint (lightness +14, saturation +8), and an accent whose hue is shifted by 30° with lightness +8. Lightness is kept within safe limits so very dark or light bases do not become pure black or white. The palette is a starting point; check text contrast with the WCAG Contrast Checker before using it for UI.

How to use it

  1. Enter a base HEX color or pick one.
  2. Click any swatch to copy its HEX value.

Examples

  • Mid-tone base

    A base with 50% lightness produces shades at 22% and 36%, a tint at 64%, and an accent at 58% lightness with the hue rotated 30°.

FAQ

Can I generate complementary colors?
Not directly. For a complementary color, add 180° to the hue in the HEX/RGB/HSL converter.
Why do some palettes look muddy?
Low-saturation base colors produce low-saturation shades. Start with a more saturated base.
Is anything uploaded?
No.