Skip to content
SocialTools

Color Palette Generator

Enter one base hex color and get its RGB and HSL values plus complementary, analogous, and triadic schemes.

Social SuiteDesign
HEX
#6366f1
RGB
99, 102, 241
HSL
239°, 84%, 67%
Valid
Yes
Base
#6366f1
Complement
#f2ef64
-30°
#64adf2
Base
#6366f1
+30°
#a864f2
Base
#6366f1
+120°
#f26467
+240°
#67f264

Runs in your browser. Nothing you enter is uploaded.

What it does

Start with one color, typed as a six-digit hex code or chosen with the color picker, and this generator rotates its hue around the color wheel to build three classic schemes. Complementary adds the color opposite on the wheel, analogous adds neighbors 30 degrees either side, and triadic adds colors at 120 and 240 degrees. Saturation and lightness stay the same as your base.

It is useful when you have one brand or accent color and need companions for buttons, highlights, or social graphics. The stats row also converts the base into RGB and HSL, and a single button copies all three formats at once.

How to use it

  1. 1

    Type a six-digit hex code into Base color (HEX), or pick one with the color swatch.

  2. 2

    Read the HEX, RGB, and HSL values in the stats row.

  3. 3

    Click Copy color values to copy all three formats as text.

  4. 4

    Scroll through the Complementary, Analogous, and Triadic palettes and click Copy on any swatch.

What you get

Base color values (HEX, RGB, HSL) and three palettes of lowercase hex swatches: complementary (2 colors), analogous (3), and triadic (3), each with a copy button.

When to use it

Accent color for a brand
Take your main brand hex and use its complementary color for call-to-action buttons that stand out.
Harmonious graphic backgrounds
Use the analogous trio for quote cards or carousel slides that feel related but not identical.
Chart and tag colors
The triadic set gives three evenly spaced hues, useful for distinguishing categories in a chart or UI.

Example

Input

#E4572E

Output

RGB: 228, 87, 46 | HSL: 14°, 77%, 54%
Complementary: #e4572e, #2fbae4
Analogous: #e42f60, #e4572e, #e4b42f
Triadic: #e4572e, #2fe45a, #5a2fe4

Every generated swatch keeps the base's 77% saturation and 54% lightness; only the hue moves.

Tips

  • Because lightness is kept constant, generated colors can differ a lot in perceived brightness. Yellows look lighter than blues at the same HSL lightness.
  • Test text and background pairs with the color contrast checker before using them for copy.
  • Use the base color for most of a design and the complement sparingly, for buttons or highlights.
  • Shorthand codes like #fff and 8-digit codes with alpha are not accepted; enter all six digits.

Questions

How are the complementary and triadic colors calculated?

The base is converted to HSL and its hue is rotated: 180 degrees for the complement, plus or minus 30 for analogous, and 120 and 240 for triadic. Saturation and lightness stay unchanged.

Can I enter an RGB or HSL value as the starting color?

The input takes a six-digit hex code or a pick from the color swatch. RGB and HSL are shown as outputs. To get a hex from RGB values, use a picker or convert it first.

Why does the base color shift slightly in the palette swatches?

Hue, saturation, and lightness are rounded to whole numbers before rotation, so rotated colors can land one or two units off where exact math would put them. The Base swatch itself is your exact input.

Can I generate shades and tints of one color here?

No. The generator only rotates hue. Lighter and darker variations of the same hue are not produced.

Related tools