Click anywhere outside the gray box to close.
This tool aims to simplify two things - choosing a color scheme and having the color values (ex. HEX #77835f) easily accessible.
#Colors - Enter the number of color boxes/swatches you want displayed (max 144). Or enter row and column values seperated by an x (ex. 8x4).
Format - Choose your color system, Hexadecimal or RGB.
Color Style - Select the type of colors you want to generate - gradients, random light, random dark, or just completely random.
Generate - Clicking this button will yield a new set of colors. However, it will not affect any color swatches you have locked (see below for locking instructions).
Upload (⏏) - Make changes to a previously created palette by uploading it back into the picker, you can then make any alterations you desire.
Save (▼) - Creates an HTML file of your finalized color scheme. The file will save directly to your computer, you can then open it locally, or save it to your own domain.
- Unlocks/locks the entire row of colors. When locked, colors cannot be changed. Note: adjusting the number of swatches, and generating new colors, does not affect any locked swatches. Also, locked swatches can be individually unlocked at any time.
↺ - Generates new colors for all unlocked swatches in the given row.
Color Picker - Click on a swatch to bring up the color picker. To change the color, you can use the selector, or edit the color values directly.
Moving Swatches - When the color picker is active, using the arrow keys will allow you to swap the current swatch with another.
Undo - If you have made changes to your current swatch, but have yet to close the picker, clicking undo will revert your changes.
Save - Clicking this button will save your current selected color. Or simply click anywhere outside the area of the color picker.
- You can create gradients (shades) of any color by clicking this icon on a given swatch. The gradients will be darker to the left of that swatch, and lighter to the right. Any locked swatches in a row will be skipped.
Note: if you want all lighter shades of a particular color, simply paste the color values in the color picker of the swatch farthest left, and hit the gradients icon. For all darker shades, paste the color values in the swatch farthest right.
Saved Palette Functions
Once your file is open in your browser, clicking any swatch will automatically save the color values to your clipboard (values are ready to paste).
Copy Format - The button in the top left corner represents the format in which they will be copied (RGB or Hex), or selecting the third option (Text) will display the values directly on the color swatches.
Edit - This button allows you to edit a palette's colors by bringing them back into the color palette generator. The button's functionality depends on the type of palette.
Personal Palettes - Clicking edit will bring up a pop-up displaying all your palette's colors in RGB format. To edit, copy the colors, then go to ColorPerf and paste them into the upload pop-up window.
ColorPerf Palettes - Clicking the edit button on any ColorPerf.com palette (archives or our favs) will be automatically copied into the palette generator.