How to use Color Palette Generator
- Enter a base colorType a six-digit HEX code such as #2b46ff into Base color.
- Generate the palettePress Run Color Palette Generator.
- Copy the swatchesEach swatch shows its HEX code and label, from Tint 80% through Base to Shade 80%, followed by the Inverse.
Common uses
- Building hover and pressed states for a button color
- Deriving light backgrounds and dark borders from a brand color
- Starting a simple design-token scale
Frequently asked questions
How do I use Color Palette Generator?
1. Enter a base color: Type a six-digit HEX code such as #2b46ff into Base color. 2. Generate the palette: Press Run Color Palette Generator. 3. Copy the swatches: Each swatch shows its HEX code and label, from Tint 80% through Base to Shade 80%, followed by the Inverse.
How are the colors calculated?
Tints mix the base color with white by 80, 60, 40 and 20 percent, and shades mix it with black by 20, 40, 60 and 80 percent. The mixing is done directly on the RGB values.
What is the Inverse swatch?
Each RGB channel is subtracted from 255, which gives the color’s negative. It is a quick contrast reference, not a full color-harmony scheme.
Which color formats can I enter?
Six-digit HEX or the three-digit shorthand such as #24f, with or without the # sign. RGB and HSL values are not accepted.
Is my color sent to a server?
Only the HEX code is sent to the GigaTools server, which calculates the swatches and returns them. Nothing is saved.