Skip to content
Categories
Color Palette Generator
Generate shade variations plus complementary, analogous, and triadic color palettes from a base color.
Overview
- Generates a harmonious color palette from a single base color, using the HSL color space.
- Produces 9 lightness variations (light to dark), along with complementary, analogous, and triadic colors based on their relationship on the color wheel.
Usage
- Enter the base color (in #RRGGBB or rgb(r, g, b) format).
- Click the "Generate palette" button.
- The shade variations, complementary, analogous, and triadic colors are displayed, each with a copy option.
Example
Input
#3366CC
Output
9 lightness variations, plus complementary, analogous, and triadic colors
Use Cases
- Building a set of button or background color variations based on a brand color
- Checking complementary or analogous color candidates when choosing an accent color for a design
- Getting color candidates for situations that need multiple distinct colors, such as data visualization or tag categories
FAQ
How are the shade variations calculated?
They keep the base color's hue and saturation fixed, and vary the lightness in 10% steps from 10% to 90%, producing 9 colors.
What are analogous and triadic colors?
Analogous colors sit at ±30 degrees from the base color on the color wheel, and triadic colors sit at ±120 degrees — both are well-known harmonious color combinations.
Can I enter a color in HSL format?
Currently, #RRGGBB and rgb(r, g, b) formats are supported.
Notes
- The generated palette is based on a mechanical calculation in the HSL color space. Always confirm the final choice by checking the actual appearance.
- All calculation happens entirely in your browser, and the color values you enter are never sent anywhere.
Related Tools
Calculate the contrast ratio between a foreground and background color and check it against the WCAG AA/AAA criteria.
Generate linear-gradient or radial-gradient CSS from colors and positions.
Extract the dominant colors from an image as a color palette.