Util Tools logo Util Tools
Developer Tools

Free Color Palette Generator Online

Generate harmonious color palettes from a base color, extract colors from an image, or roll a random scheme. Export to CSS, SCSS, Tailwind, JSON, or PNG - with a built-in WCAG contrast checker.

  • 100% free
  • No signup
  • Runs in your browser

Accessibility - contrast ratios

Contrast ratio between every pair (one color as text on the other as background). WCAG AA needs 4.5:1 for normal text. Cells below the threshold are flagged.

Color theory basics

Monochromatic:
one hue, varied lightness - calm and cohesive.
Analogous:
neighbors on the wheel (±30°) - harmonious, natural.
Complementary:
opposite hues (180°) - high contrast, energetic.
Triadic:
three hues 120° apart - vibrant yet balanced.
Tetradic:
two complementary pairs - rich, needs a dominant color.
Tints & shades:
a hue mixed toward white (tint) or black (shade).
Guide

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.

Last updated: July 2026

Frequently Asked Questions

What is a complementary color palette?
A complementary palette uses two colors directly opposite each other on the color wheel (180° apart), such as blue and orange. This creates high contrast and visual energy, commonly used for call-to-action buttons against a calmer background.
What is the difference between a tint and a shade?
A tint is created by mixing a color with white, making it lighter. A shade is created by mixing a color with black, making it darker. Both retain the original hue but adjust lightness in opposite directions.
What is an analogous color palette?
An analogous palette uses colors that sit next to each other on the color wheel, typically within 30 degrees. This creates a harmonious, cohesive look often found in nature-inspired designs.
How do I extract colors from an image?
Upload your image in "From Image" mode. The tool analyzes pixel data using color clustering to identify the most dominant and visually distinct colors, returning a palette that represents your image’s color scheme.
What is a triadic color scheme?
A triadic scheme uses three colors evenly spaced around the color wheel (120° apart), like red, yellow, and blue. It offers strong visual contrast while maintaining more balance than complementary schemes.
How do I check if my color palette is accessible?
Use the contrast checker built into this tool. WCAG AA requires a minimum 4.5:1 contrast ratio for normal text and 3:1 for large text. Avoid using low-contrast color pairs for any readable text.