About this color palette generator
Generate a sequence of shades and tints around a selected base color. The palette moves from black through the base toward white, providing a starting point for backgrounds, borders and tonal interface states.
The generator interpolates red, green and blue channel values. With an odd count, the middle swatch equals the base color exactly. Each result is shown as a six-digit hexadecimal code with a matching visual swatch.
RGB interpolation is not perceptually uniform and does not automatically produce accessible text pairings. An even swatch count samples around the base rather than including it exactly. Check important foreground and background combinations with a contrast calculator before use.
Using Color Palette Generator starts with the Base color and Number of shades controls. Base #336699 with a count of 3 produces #000000, #336699 and #ffffff. Select Generate palette to update the result below the controls. Read the output together with the color palette generator limitations described here before using it in a document, project or decision. Change one input at a time when comparing alternatives so that you can identify which change affected the result.
Which controls should I check first?
The Color Palette Generator form labels its controls as Base color; Number of shades; Result. Use those labels to keep the source and settings separate. A sample argument that selects a mode is not additional source text. Choose the setting matching your intended operation before copying a result, and change it explicitly when comparing another mode. The labels describe what this form accepts; the worked examples below demonstrate only the stated supplied values.
How should I interpret this specific operation?
The palette interpolates channel values between black, the chosen base and white. With an odd count, the middle position is exactly the base color. This is a mechanical gradient of channel values, not a perceptually uniform or accessibility-tested palette. Check neighboring colors and text contrast in the destination layout, especially when similar-looking steps need to remain distinguishable.
Worked helper values
These values come from the reproducible calculation examples supplied with this tool. Each row identifies the complete supplied arguments and the returned value. A visible ↵ denotes a line break and ⇥ denotes a tab in text examples. Settings appear alongside source data so that a different mode is not mistaken for an identical input. These are helper calculations, not observations of a live device, fetched target, image decoder, browser preview or downloaded file. Use the stated method above to relate the returned fields to the actual operation.
| Supplied values | Calculated return value |
|---|---|
| #336699; 3 | ["#000000", "#336699", "#ffffff"] |
What is a channel calculation and what is a visual judgment?
A palette, gradient or contrast calculation follows the explicit channel rule above. That creates a reproducible result, but the purpose of the color choice still needs visual inspection. A contrast ratio is a measured relationship between the supplied opaque colors; a gradient declaration describes a transition; a palette is a sequence of colors. Keep the type of result attached to its value. A smooth-looking transition does not establish readable text, and a high contrast pair does not establish that every part of a multi-color layout uses that pair.
How should I inspect the destination background?
Check the colors in the element where they will be used, with its real dimensions, text and surrounding background. A translucent overlay can change the visible colors, so a comparison of two unblended color values can miss the actual result. A gradient also exposes several backgrounds under a text label rather than just one endpoint. Inspect the least favorable area where text appears. The numerical example is useful for understanding the calculation, while the destination preview checks how the chosen values are combined in that particular layout.
Why do exact color values matter?
Keep six-digit HEX values or the full declaration alongside a saved design choice. A screenshot can change through display settings and image compression, and sampling it may yield values that differ from the original token. For a palette, preserve order as well as each value. For a gradient, preserve angle and stops. For contrast, preserve which foreground and background were compared. A short label such as blue or light gray is not sufficient to reproduce the same calculation. Source values make later comparisons traceable when a theme changes.
What does interpolation leave out?
Interpolating channel values describes a numerical path between colors. It does not guarantee equal perceived steps, meaningful categories or appropriate emphasis in a chart. Check neighboring colors under the conditions where users need to distinguish them. A palette containing black, a base and white can be useful for a simple exploration, but the midpoint rule alone does not create a complete design system. Choose semantic roles and inspect actual text and shapes separately. Keep the mathematical sequence as one ingredient of the design rather than interpreting it as an automatically approved visual hierarchy.
How do I use color palette generator?
Base #336699 with a count of 3 produces #000000, #336699 and #ffffff.
What does color palette generator support?
The generator interpolates red, green and blue channel values. With an odd count, the middle swatch equals the base color exactly. Each result is shown as a six-digit hexadecimal code with a matching visual swatch.
What are the limits of color palette generator?
RGB interpolation is not perceptually uniform and does not automatically produce accessible text pairings. An even swatch count samples around the base rather than including it exactly. Check important foreground and background combinations with a contrast calculator before use.