Color Palette - Tool Guide

Enter a hex color code (e.g. #b94283) to generate a 21-step palette in 10% increments - 10 lighter shades, the current color, and 10 darker shades. Each step is shown in an HTML table with its percentage, HEX value, and color swatch, handy for design picking and color schemes

Features

The Color Palette tool generates lighter and darker shades of any color. Enter a hex color code (e.g. #b94283) and the tool automatically computes 21 steps in 10% increments - 10 lighter shades, the current color, and 10 darker shades. The result is shown as an HTML table where every swatch includes its step percentage, hex value, and a solid color preview, handy for design picking and building color schemes.

For example, entering #b94283 yields a full gradient from pure white (100%) down to your color (0%), then on to pure black (100%). Whether you are assembling a palette, deriving shades of the same hue, or choosing readable text-on-background colors, you can do it in one click.

How It Works

The tool uses two core steps: "mix toward white" (tint) and "scale toward black" (shade). On the lighter side, your color is blended with white by percentage (the larger p, the closer to white); on the darker side, each RGB channel is scaled proportionally toward black (the larger p, the closer to black).

Taking #b94283 (RGB 185,66,131) as an example: adding 50% white gives #dca1c1, while scaling 50% toward black gives #5d2142 - matching the Tailwind-style scales used by design tools. Every channel is rounded to 0-255 and converted back to six-digit hex, so the results are stable and reproducible with no third-party dependencies.

Use Cases

Design picking: derive a full set of matching shades from a primary color to build a palette quickly
Dark/light themes: generate paired light and dark variants of a primary color with readable contrast
Swatch display: prepare clearly graded gradients for products, brands, or charts
Learning: intuitively understand how colors fade toward white and toward black

FAQ

Q: Is the # prefix required?: A: No. HEX values are recognized with or without the # prefix, and 3- or 4-digit abbreviations are supported (for example, #0FF equals #00FFFF).
Q: How is an 8-digit HEX handled?: A: For an 8-digit HEX (e.g. #b94283FF), the first six digits are used as RGB and the alpha is ignored, since the palette only cares about light and dark variations.
Q: How many swatches are generated?: A: 21. Ten lighter shades (100% to 10%), the current color (0%, marked with a blue border), and ten darker shades (10% to 100%).
Q: What does the percentage mean?: A: It indicates how much the color has been lightened toward white or darkened toward black. 100% is pure white or pure black, and 0% is the original color you entered.

Examples

Enter a hex color:

Input: #b94283
Output: a 21-step palette as an HTML table
  ┌────────┬────────┬────────┬────────┬────────┬────────┐
  │100% white│ 90%  │ 80%    │ 70%    │ 60%    │ 50%    │
  │#ffffff │#e7c4d7 │#dcafca │#d19abd │#c685af │#bb71a2 │
  ├────────┼────────┼────────┼────────┼────────┼────────┤
  │ 40%    │ 30%    │ 20%    │ 10%    │ 0% current│ 10%  │
  │#b05c95 │#a54788 │#9a327b │#8f1e6e │#b94283 │#a73b76 │
  ├────────┼────────┼────────┼────────┼────────┼────────┤
  │ 20%    │ 30%    │ 40%    │ 50%    │ 60%    │ 70%    │
  │#943569 │#822e5c │#6f284f │#5d2142 │#4a1a34 │#381427 │
  ├────────┼────────┼────────┼────────┼────────┼────────┤
  │ 80%    │ 90%    │100% black│      │        │        │
  │#250d1a │#12070d │#000000 │        │        │        │
  └────────┴────────┴────────┴────────┴────────┴────────┘

Related Tools

This tool pairs with Color Converter, Image Color Picker, and Image to ICO Icon, the color-handling family: the converter swaps colors between color models, the image color picker samples colors from images, the palette generates light and dark shades from a single color, and Image to ICO Icon turns an image into site icons. In design and development, it is often used alongside ASCII Lookup and Base64 Encode.