Util Tools How color harmonies work
Pleasing palettes are not random; they follow relationships on the color wheel. Starting from one base color, you can derive harmonious companions by rotating the hue by fixed angles. This generator builds those schemes for you, lets you pull colors out of an uploaded image, and exports the result to CSS, SCSS, Tailwind, JSON, or PNG.
The common color schemes
- Complementary: two colors opposite each other on the wheel (180 degrees apart) for high contrast and energy.
- Analogous: colors next to each other on the wheel, which feel calm and cohesive.
- Triadic: three colors evenly spaced (120 degrees apart) for a balanced, vibrant look.
Tints, shades, and tones
A tint is a color mixed with white (lighter), a shade is mixed with black (darker), and a tone is mixed with grey (muted). Building a scale of tints and shades from each base color is how you get the 50-to-900 ramps used in design systems, giving you enough variation for backgrounds, borders, and text while staying on-brand.
Extracting colors from an image
Uploading an image and pulling its dominant colors is a fast way to match a brand photo, product shot, or mood board. The tool samples the image and surfaces a representative palette. As always, check the result with the built-in WCAG contrast checker so any color you plan to use for text remains readable.
최종 업데이트: 2026년 9월