Color palette generator

Create lighter and darker shades from a HEX color and copy the palette.

#RGB / #RRGGBB

Your files are processed here, on your device

We do not send your file or text contents to a processing server. No account is needed and there is no daily operation quota. Individual tools have size limits to protect your device’s memory.

A connection is needed to load the site and its resources. Hosting may receive technical visit data. Favorites store only tool identifiers in this browser.

How we handle your data →

How to use this tool

  1. Enter a 3- or 6-digit HEX code.
  2. Choose a shade count and create the palette.
  3. Review the swatches and copy or download the codes.

An example you can verify

Prepare a shade family for a visual composition.

Example input

#254F42

SettingsNumber of colors: 5.

Expected result

#C9D3D0
#779189
#254F42
#173129
#091411

The middle color matches the input. Endpoints mix 75% white or black; check contrast before pairing with text.

Color palette generator: uses and practical guidance

Creating a palette from a base colour supplies lighter and darker variants for exploring a composition. The tool generates a tonal scale, rather than automatically selecting complementary colours or producing a complete visual identity. The base remains the central reference while other samples move towards lighter or darker appearances. Choose a supported odd quantity so that reference stays in the middle of the collection and can be recognized alongside its variants.

Variants can help test surfaces, borders and accents, but assigning each a role requires inspecting the complete design. A sample suitable for a background may be unsuitable for small text. Perceived brightness also depends on neighbouring colours and the display. Do not choose a variant merely because it occupies a particular position in the scale. Review the actual combination where it will be shown, including the size and weight of accompanying lettering.

The palette does not automatically calculate contrast ratios or guarantee accessibility. Use understandable labels or shapes when states need distinction rather than relying only on colour. Review text and background pairs with an appropriate contrast tool. Tonal generation also does not establish equivalence with printing inks or professional profiles; these codes describe screen oriented colour representations. A satisfactory preview does not guarantee every physical reproduction will look the same.

Check the central colour and copy complete codes. Save the palette with each sample’s intended role so another editor does not confuse a border with a background. Color converter provides RGB or HSL notation for a particular value. Grayscale image explores tonal information in a picture but does not automatically apply this palette to its pixels. Test resources together before considering the visual choice complete.

A practical check before using the result

A design trial can assign variants to background, border and accent, displaying them together. Inspect actual lettering against each background before selecting. Save codes with their roles to preserve the same combination across pages. Review the whole composition rather than treating palette position as a guarantee of adequate contrast.

Continue your task

Download the result or copy the text before opening another tool. Then load or paste it into the next step; content is not transferred automatically.

Prepare a color palette

Create shades from a HEX color and get their RGB and HSL values.

  1. Create the shadesHere
  2. Convert a color
Settings and limits

Enter a 3- or 6-digit HEX color and choose 3, 5, 7 or 9 colors. The original stays in the middle. Lighter colors mix RGB channels with white and darker colors with black, up to 75%. Visual swatches and downloadable HEX codes are included.

Frequently asked questions

Do these colors guarantee accessible text contrast?

No. This palette is a visual starting point. Check contrast for every text/background combination before using it in an interface.

Are my data stored on a server?

No. Content and files are processed in your browser without an account. Closing the page loses unsaved results.