Random

Color Palette Generator

Generate complementary, analogous, triadic, tetradic, and split-complementary palettes from a hex color. Copy the hex lines. Runs in your browser.

Color Palette Generator

Build hue schemes from one hex color.

ShareX LinkedIn Facebook

Base color

Palette type

Output actions

Ready to copy output once your result appears.

Base color and hue schemes

Color Palette Generator turns one hex color into a fixed hue scheme. Complementary, analogous, triadic, tetradic, and split-complementary each rotate the hue and keep the saturation and lightness of the base. The page shows swatches and a text list of labels plus hex. It does not invent a random palette, export CSS variables, or score contrast.

How to build a palette

1Type a hex color such as #3B82F6, or use the color picker. Three-digit and six-digit hex both work. The picker writes an uppercase six-digit value.
2Choose Complementary, Analogous, Triadic, Tetradic, or Split-complementary. Triadic is selected when the page opens.
3Click Generate palette. Read the swatches, then use Copy output for the label-and-hex lines. Changing the scheme after a successful click updates the swatches immediately; Copy output updates on the next click.

What it is good for

• Seeing the opposite hue, the neighbors, or the even steps around one brand hex.
• Copying a short list of hex values into a ticket or a design note.
• Checking that a gray base stays gray, because hue rotation cannot create chroma that was not there.

Example

Input

#3B82F6 with Triadic selected

Output

Base: #3C83F6
+120°: #F63C83
+240°: #83F63C

The typed base is converted to HSL, rounded to whole numbers, and converted back. #3B82F6 becomes hue 217, saturation 91, lightness 60, and the base swatch is #3C83F6.

What the five schemes change

Every swatch starts from the same saturation and lightness. Only the hue moves, and it moves by a fixed number of degrees on a 360-degree wheel. Complementary is the base plus the color 180 degrees away, labeled Base and Complement. Analogous is the hue 30 degrees lower, the base, and the hue 30 degrees higher, labeled -30°, Base, and +30°. Triadic is the base, plus 120, and plus 240. Tetradic is the base, plus 90, plus 180, and plus 270. Split-complementary is the base, plus 150, and plus 210. Degrees wrap with modulo 360, so a hue of 350 plus 30 lands at 20.

The labels in the copied text are those names, not role names such as background or accent. A triadic result is three lines. A tetradic result is four. Complementary is the only scheme with two. Nothing on the page lets you add a neutral, lighten a single swatch, or lock one swatch while you edit another. If you need HSL or RGB written out as numbers, that conversion is a separate step on the color converter.

Options for the base color

The text field accepts a leading # or a bare hex string. A three-digit value is expanded by doubling each digit, so #abc is treated as #aabbcc. A six-digit value is read as written. The match is case-insensitive. Eight-digit hex, named colors such as blue, rgb(), and hsl() text are rejected by the parser. There is no error sentence when the parser rejects the field: Generate palette simply does not replace the swatches.

The color picker sits beside the text field and is labeled Color picker. It can only hold a six-digit hex, so while the text is invalid or only three digits the picker still displays #3B82F6 without writing that fallback into the text field. Choosing a color in the picker replaces the text with uppercase #RRGGBB. The scheme buttons are Complementary, Analogous, Triadic, Tetradic, and Split-complementary. They do not have a separate saturation control or a lightness slider.

Jobs this palette is meant for

Use it when you already have one hex and you want the textbook wheel around it: a complement for a contrasting action, an analogous pair for a quiet range, or a triad when three hues should sit evenly apart. The copied lines are plain text, one swatch per line, so they drop into a note, a commit message, or a design comment without an image.

It is a poor fit when the deliverable is a CSS custom-property block, a Tailwind config, or a contrast table. Those outputs are not produced here. Pair the hex list with the CSS beautifier only after you have written the declarations yourself. The beautifier indents a stylesheet; it does not receive these swatches automatically.

Rounding, gray, and the copy buffer

Hue, saturation, and lightness are rounded to integers before the hex is rebuilt. That is why the base swatch can differ from the characters you typed by one or two steps in a channel. #3B82F6 is the sample above. If you need the original digits preserved as a token, keep them in your source file. This page is showing the hex of the rounded HSL, including for the swatch labeled Base.

A gray has equal red, green, and blue, so saturation is 0 and the hue is stored as 0. Rotating hue 0 by 120 degrees still has saturation 0, so every swatch is the same gray. Black and white behave the same way. The scheme buttons still switch, and the labels still change, but the hex values do not.

Copy output reads the last string passed when Generate palette succeeded. After that click, a new scheme or a still-valid hex refreshes the swatches at once, and the copy buffer stays on the previous lines until you click again. An invalid hex hides the swatches and leaves the previous copy buffer in place. There is no download button on this tool.

Rules and limitations

Schemes and degree steps are fixed: complementary 180; analogous −30, 0, +30; triadic 0, 120, 240; tetradic 0, 90, 180, 270; split-complementary 0, 150, 210. Saturation and lightness are copied from the base. Output hex is uppercase and always six digits.

Accepted input is 3-digit or 6-digit hex, with or without one leading #. Alpha is not read. The page does not check WCAG contrast, does not name colors, and does not emit CSS, SCSS, or JSON.

Common problems

If the base hex looks slightly different from what you pasted, the cause is integer HSL rounding, not a second color you failed to type. Compare the note on the sample: #3B82F6 is stored as 217, 91, 60 and painted as #3C83F6.

If every swatch matches, the base is gray or otherwise at zero saturation. Add chroma in another editor, then paste the new hex here. If Copy output lags the swatches, click Generate palette again.

Frequently asked questions

Why is the base swatch not the hex I typed?

The field is converted to hue, saturation, and lightness, each rounded to a whole number, then converted back to hex. #3B82F6 rounds to 217, 91, 60 and comes back as #3C83F6. The swatch labeled Base is that rebuilt hex.

What is the difference between triadic and tetradic?

Triadic places three hues 120 degrees apart: the base, +120°, and +240°. Tetradic places four hues 90 degrees apart: the base, +90°, +180°, and +270°. Both keep the base saturation and lightness.

Can I type a three-digit hex?

Yes. Each digit is doubled, so #abc is read as #aabbcc. Named colors, rgb() text, hsl() text, and eight-digit hex are not accepted, and a rejected value does not show an error line.

Does a gray base produce different hues?

No. Saturation stays 0, so rotating the hue still paints the same gray for every label. Black and white do the same.

Is my input uploaded or saved?

This tool processes input in your browser and does not save its input or output to local storage. Copy and download are user actions. The site uses analytics for page and action metadata and may use ads and production error reporting; see the Privacy Policy for those services.

About this tool

Maintained by Toolbench. For large or deeply nested files, split the input into smaller batches and verify representative results before using them in an import or application. Report reproducible problems through Contact.

Next steps