Color Palette Generator
Generate five RGB shade variants from a hex color
Base color
Enter a 3- or 6-digit HEX color, with or without #, such as #3a7 or 22c55e. Spaces, alpha values, and other text are not accepted. Valid input updates the palette immediately.
Five RGB shades
#00a13a#10b34c#22c55e#34d770#46e982Some shifted channels were clipped to 0 or 255, so their actual change may be smaller than the labeled offset.
How are these shades generated?
The five shades add −36, −18, 0, +18, and +36 to each R, G, and B channel, clipping the results to 0–255. The middle shade is the base color. These are simple RGB shifts, not complementary or triadic palettes, HSL lightness adjustments, or perceptually uniform steps.
Colors near black or white can produce duplicate shades. Check contrast separately before using them for text, buttons, or backgrounds; this tool does not guarantee accessible combinations. Copy CSS exports five variables, --palette-1 through --palette-5.
Colors are calculated locally on this page. Input color values are not saved to browser storage or sent to analytics. Copying places the result on your system clipboard.
Related tools
The full guide also includes pitfalls, worked examples, snippets, FAQs, and related tools for checking results or troubleshooting.
About this tool
Enter a three- or six-digit HEX color, with or without #. The tool adds −36, −18, 0, +18 and +36 to each RGB channel, clipping results to 0–255, to produce five shade variants. It does not calculate complementary, triadic or tetradic harmonies, and equal RGB steps are not perceptually uniform. Invalid or empty input clears the palette instead of substituting a default color. Near black or white, clipping can produce repeated shades. Check actual text/background combinations with the contrast checker before using them in an interface.
Production Snippets
RGB offset example
text
Base RGB: 51, 102, 153
Offsets: -36, -18, 0, +18, +36
#336699 → #0f4275, #215487, #336699, #4578ab, #578abdScenario Recipes
Check a five-step shade scale
Goal: See exactly how channel offsets affect the base color.
- Enter #336699, or its shorthand #369.
- Compare the five displayed shades with the example below.
- Copy a shade and check it against the actual text or background color.
Result: #336699 → #0f4275, #215487, #336699, #4578ab, #578abd
Frequently Asked Questions
Which color formats can I enter?
Three- or six-digit hexadecimal colors such as #369, 369 or #336699. Named colors, rgb(), hsl(), and alpha-channel HEX are not supported here.
Does this generate complementary colors?
No. It changes every RGB channel by the same fixed amount to create shade variants. This is not a color-harmony or perceptually uniform palette algorithm.
Why do some shades repeat?
Channel values are clipped to 0–255. For black, the two negative steps and the base color all stay #000000; the repeated results are expected.
Are these shades automatically accessible?
No. Accessibility depends on the exact foreground/background pair and its use. Check text contrast separately; a generated shade is not a WCAG pass.
What happens with an invalid color?
The palette is cleared and an error explains the supported HEX formats. A previous valid palette is not presented as the result of invalid input.
Keep browsing