Palette Generator dominant-baseline="middle">#0000FF

Blend two colors or pick from the Color Wheel to create Complementary, Triadic, Tetradic, and Shades palettes.

Complementary Colors

#0000FF#FFFF00#FF0000#00FFFF

Palette

#0000FF
#5000AE
#6D0091
#8A0074
#A70057
#C4003A
#E1001D
#FF0000

Palettes examples

Here are some examples generated using this Palette Generator:

Color wheel palette

#0000FF#8000FF#FF00FF#FF0080#FF0000#FF8000#FFFF00#80FF00#00FF00#00FF80#00FFFF#0080FF

Rainbow color palette

[ #0000ff, #ff00cc, #ff6600, #66ff00, #00ffcc, #0000ff]

Orange red palette

[ #ffd500, #ffbe00, #ff8f00, #ff5f00, #ff2f00, #ff0000]

Blue green palette

[ #0000ff, #06619d, #098975, #0bb04e, #0ed727, #11ff00]

Blue yellow palette

[#0000ff, #63609b, #8a8674, #b1ab4d, #d8d126, #fff700]

Blue light-blue palette

[#0000ff, #005aff, #0082ff, #00aaff, #00d2ff, #00fbff]

What is Palettes generator?

The Palette Generator creates color palettes using the following methods:

1. All Colors (Rainbow / RGB) – Uses the color wheel to generate a palette.
2. Blending Two Colors – Blends the "From" color with the "To" color.
3. Darker Shades – Starts from the "From" color and generates progressively darker shades.
4. Lighter Shades – Starts from the "From" color and generates progressively lighter shades.

You can obtain different shades by using the "Blending Two Colors" method and combining different shades of the same color.

Additionally, you can adjust the palette size, decay/growth rate, and other options to create a variety of color gradients. This tool is especially useful for designers and developers looking to create custom color schemes for their projects.

What is a color wheel?

A color wheel is a visual representation of colors arranged in a circle, showing their relationships. This palette generator uses the color wheel to create complementary, triadic, and tetradic color palettes.

What is a complementary color?

A complementary color is opposite the original color on the color wheel.
The combination of the two colors creates a high contrast.
This tool generates the complementary color for the selected 'From' and 'To' colors. It can also create a full complementary colors palette based on your selection. For black, the complementary color is white, and vice versa.

What is a Tetradic color scheme?

A square color scheme uses four colors positioned at equal distances around the color wheel:
One base color, plus colors at 90, 180, and 270 degrees.
In contrast, a rectangular color scheme uses two pairs of complementary colors:
One base color, plus colors at 60, 180, and 240 degrees.
This tool generates a square color palette based on the selected 'From' color.

What is a triadic color scheme?

A triadic color scheme uses three colors positioned at equal distances around the color wheel:
One base color, plus colors at 120 and 240 degrees.
This tool generates a triadic color palette based on the selected 'From' color.

How to use the Palettes generator?

1. Select the 'From' and 'To' colors using the color picker.
2. Adjust the palette size, decay/growth rate, and other options as needed.
3. After the adjustment, the color generator will generate the palette.
4. Copy the color codes or print the results as needed.

Buttons

Swap colors: Swap the 'From' and 'To' colors.
Complementary Palette: Generate a complementary color palette.
Rainbow: Generate a color palette using the color wheel.
Tetradic: Generate a tetradic color palette, which consists of four colors on the color wheel. Triadic: Generate a triadic color palette. The palette has a size of four, as it starts and ends with the same color.
Copy colors: Copy the color codes to the clipboard as array.
Download SVG: Download the color wheel as an SVG file.
Roll the wheel: Spin the color wheel for fun.

Options

  1. Method - The method used to generate the color palette.
    - Blending - Mix the 'From' color with the 'To' color.
    - Rainbow - Generate a color palette using the color wheel.
  2. Palette Shape: The arrangement of colors in the palette.
    - Rectangular: Colors are arranged in a linear layout.
    - Color wheel: Colors are arranged in a circular layout.
    - Color Circles: Each color is represented by a small circle, and the circles are arranged in a circular layout.
  3. Palette Size: The number of colors in the palette.
  4. Color Format: The format of the color codes, Hex, RGB, or HSL.
  5. Decay/Growth rate: The rate at which the colors change from the 'From' color to the 'To' color.
    - Equal rate (0) - means an equal difference between two sequential colors.
    This is good when the 'From' color and the 'To' color have similar strength.
    - Decay - the difference between color-1 and color-2 is bigger than the difference between color-2 and color-3, and it continues to decrease.
    This is good when the 'From' color is stronger than the 'To' color.
    - Growth - the difference between color-1 and color-2 is smaller than the difference between color-2 and color-3, and it continues to increase.
    This is good when the 'To' color is stronger than the 'From' color.
  6. Font size: The size of the color codes displayed in the palette.
    Size 0 means no text.
  7. Border width: The width of the border around each color in the palette.
    Size 0 means no border.
  8. Border color: The color of the border around each color in the palette.
  9. Width and height: The width and height of a color in the color palette.
[ #0000FF, #5000AE, #6D0091, #8A0074, #A70057, #C4003A, #E1001D, #FF0000]