Using the Color Palette Generator
This tool helps you explore color harmonies and create a balanced color scheme for your website or application. A good color palette is essential for establishing brand identity and creating a pleasant user experience.
- Pick a Base Color. Use the color picker to select the main color for your brand or design.
- Choose a Harmony. Select a color harmony type from the buttons. Each option uses a different rule from color theory to generate a palette based on your chosen color.
- Copy a Color. The palette will be displayed as a series of swatches. Simply click on any swatch to copy its hexadecimal (hex) color code to your clipboard.
Understanding Color Harmonies
Color harmony refers to the theory of combining colors in a way that is pleasing to the eye. The color wheel is the classic tool for visualizing the relationships between different hues. Your base color's position on this wheel determines where the other colors in a given harmony will be selected from.
This generator uses your base color's position on this wheel to create palettes based on standard harmonies.
| Harmony | Description |
|---|---|
| Complementary | Colors that are directly opposite each other on the color wheel. This combination is high-contrast and high-impact. |
| Analogous | Colors that are directly next to each other on the color wheel. This creates a serene and comfortable design with low contrast. |
| Triadic | Three colors that are evenly spaced, forming an equilateral triangle on the wheel. This combination is vibrant and well-balanced. |
| Tetradic | Four colors arranged into two complementary pairs, forming a rectangle on the wheel. This is a rich scheme that offers a lot of variety. |
| Monochromatic | Variations in the saturation and lightness of a single hue (your base color), without changing its position on the wheel. |
| Shades | Variations in the lightness (from dark to light) of a single hue. Excellent for creating depth and subtle variation. |
Tips for Applying a Color Palette
Once you have a palette, a common technique for applying it is the 60-30-10 rule. This is a classic interior design principle that works very well for web and UI design.
- 60% Primary/Dominant Color. This will be the main color for your design, often used for backgrounds and large areas.
- 30% Secondary Color. This color is used to create contrast and should be used about half as much as the primary color. It is good for secondary elements like cards or info boxes.
- 10% Accent Color. This is your most vibrant color, used for small but important elements that you want to draw the user's attention to, such as call-to-action buttons, links, or icons.
Color Accessibility
It is very important to ensure that your chosen color combinations have sufficient contrast, especially for text. The Web Content Accessibility Guidelines (WCAG) recommend a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Use an online contrast checker tool to verify that your foreground (text) and background colors are accessible to users with visual impairments.