Color Palette Generator
Generates a hex palette in the browser from a base color and a swatch count. Shades keep the hue and step lightness, always including the base; complementary adds the 180-degree hue and in-between hues when count is greater than 2. Output is lowercase #rrggbb plus CSS custom properties as text. This is not a design system, not a Figma plugin, and not an image exporter.
Color palette generator
Client-side only. The base color and count are not sent to a server. This is a hex palette generator, not a design system, not an image exporter, and not a Figma plugin. Input is not sent.
How to use
- Enter a base hex color with a leading #, such as #ff0000, and a swatch count from 2 to 12.
- Choose shades (lightness steps of the same hue) or complementary (180-degree hue, with in-between hues when count is greater than 2).
- Read the hex list and CSS custom properties as text. Copy uses the clipboard on this device only. Nothing is sent to a server.
Results
Hex list
#3d0000
#9e0000
#ff0000
#ff6161
#ffc2c2CSS custom properties
--color-1: #3d0000;
--color-2: #9e0000;
--color-3: #ff0000;
--color-4: #ff6161;
--color-5: #ffc2c2;Text only. Swatches use a CSS background-color from a validated hex value. Client-side only. Not sent. Not a design system, image exporter, or Figma plugin.
Runs in your browser. Nothing is uploaded.
Frequently asked questions
How do shades work?
Shades keep the base hue and saturation and step lightness from darker to lighter. The swatch count is an integer from 2 to 12 (default 5). The palette always includes the base color. For the worked example, base #ff0000 with five shades produces five lowercase hex values, and the middle swatch is #ff0000.
What hex and CSS custom properties does this produce?
Accepted input is #rgb or #rrggbb with a leading #. Output is lowercase six-digit hex, plus CSS custom properties as text such as --color-1: #ff0000;. You copy that text. Named colors, rgb(), and anything that is not a hex color fail closed.
How does complementary mode work?
Complementary keeps saturation and lightness and rotates hue by 180 degrees. The complement of #ff0000 is #00ffff. When the count is 2, the palette is the base and that complement. When the count is greater than 2, hues are stepped between the base and the complement.
Is this a Figma plugin, design system, or image exporter?
No. This page is a hex palette generator. It is not a Figma plugin, not a design-system product, and not an image exporter. There is no PNG or SVG download, no Figma API, and no design tokens. Optional swatches only set a CSS background-color from an already-validated hex value.
Is this client-side? Do I need an account?
Yes, it is client-side only. There is no signup. The base color and count never leave the browser. Tallymill does not save what you enter. Refreshing the page clears the form.