Tinker Tools

Color Palette Extractor from Images

Upload any image and extract its dominant colors using K-Means clustering. Export as CSS, SCSS, or Tailwind config. All processing is done locally in your browser.

Preview

Drop your image here or click to browse

Supports PNG, JPEG, WebP, GIF, BMP, SVG

How it works

1. Upload Image

Drag and drop or click to upload any image. Your file stays in your browser and is never sent to any server.

100% Private

2. Extract Colors

K-Means clustering analyzes every pixel to identify the dominant colors. Adjust the count from 3 to 8 to control palette detail.

K-Means Algorithm

3. Copy & Export

Click any swatch to copy its HEX code. Export the full palette as CSS variables, SCSS variables, or Tailwind config.

Multiple Formats

What is a Color Palette Generator?

A color palette generator creates harmonious sets of colors based on color theory rules and mathematical relationships. Designers, developers, and brand strategists use these palettes to establish visual consistency across websites, apps, marketing materials, and product interfaces. The idea is straightforward: instead of picking colors at random and hoping they look good together, you start with one base color and derive the rest using geometric relationships on the color wheel. The result is a palette where every color has a principled reason for being there — and the human eye perceives that underlying structure as harmony, even when the viewer cannot articulate why the combination feels right.

Color theory has formal roots going back to Isaac Newton's 1704 publication Opticks, where he arranged the visible spectrum into a circular diagram — the first color wheel. Modern color theory builds on the work of Johannes Itten and Josef Albers, who formalized the relationships between colors into named harmony types. Complementary colors sit directly opposite each other on the wheel — blue and orange, red and green — and create high contrast that draws attention. Analogous colors sit next to each other — blue, blue-green, and green — and produce a calm, unified feeling. Triadic colors are evenly spaced 120 degrees apart — red, yellow, and blue in the traditional model — and offer vibrant contrast without the tension of a direct complement. Split-complementary schemes replace one of the complement's neighbors, softening the contrast while keeping visual interest. These relationships are not arbitrary aesthetic preferences; they emerge from how human cone cells respond to different wavelengths of light and how the brain processes opponent color signals.

This tool lets you pick a base color using a visual picker or by entering a hex code, then generates palettes following these classic harmony rules. It displays the results in multiple color spaces — HEX, RGB, HSL, and OKLCH — so you can copy values directly into your CSS, design tokens, or brand guidelines. The calculations happen entirely in your browser using mathematical transformations on hue, saturation, and lightness values. No server is involved, and your color choices stay private.

Key Features and Benefits

  • Multiple harmony modes — Generate complementary, analogous, triadic, split-complementary, tetradic (double complementary), and square palettes from a single base color. Each mode applies a different set of angular offsets on the HSL color wheel. Complementary uses a 180-degree offset. Triadic uses 120-degree intervals. Split-complementary uses offsets of 150 and 210 degrees. The tool visualizes these angles on an interactive wheel so you can see the geometric relationship directly.
  • Tint and shade generation — For each color in your palette, the tool produces a scale of 10 tints (lighter variants mixed toward white) and 10 shades (darker variants mixed toward black). This gives you a ready-made scale similar to Tailwind CSS's 50-950 color system or Material Design's color ramp. Having a full scale means you can assign lighter tints to backgrounds, medium values to borders, and dark shades to text — all from one base hue.
  • Perceptual uniformity with OKLCH — Traditional HSL-based generation produces palettes where equal lightness values do not look equally bright to the human eye — a 50% lightness yellow appears much brighter than a 50% lightness blue. The tool offers an OKLCH mode that uses the Oklab perceptual color space, published by Bjorn Ottosson in 2020. In OKLCH, equal lightness values produce colors that genuinely look equally bright. This is critical when building accessible interfaces where contrast ratios must be predictable across hues.
  • Accessibility contrast checking — Every generated color pair is automatically tested against WCAG 2.1 contrast ratio requirements. Normal text needs a ratio of at least 4.5:1 (AA) or 7:1 (AAA). Large text needs 3:1 (AA) or 4.5:1 (AAA). The tool flags which combinations pass and which fail, so you can build an accessible palette from the start rather than discovering contrast failures during an audit weeks later.
  • Export in multiple formats — Copy your palette as CSS custom properties, Tailwind config values, SCSS variables, JSON design tokens, or an ASE file for Adobe tools. The export includes both the base colors and the full tint-shade scale. This means you can go from picking a base color to having a complete, production-ready color system in under a minute.
  • Palette from image — Upload a photograph and the tool extracts the dominant colors using a k-means clustering algorithm. It samples pixels across the image, groups them into k clusters (default k=5), and returns the centroid of each cluster as a palette color. This is useful when you want a website or brand to match the mood of a specific photograph — a product shot, a hero image, or a landscape that defines your visual identity.

How to Generate a Color Palette Online

  1. 1

    Pick your base color

    Use the color picker to select a starting hue, or type a hex code directly. If you already have a brand color — say, #2563EB for a particular shade of blue — enter it here. The base color is the anchor from which all other palette colors are derived. Choosing a color with moderate saturation (40-70%) and medium lightness (40-60%) gives the harmony algorithms the most room to generate distinct, usable variants.

  2. 2

    Select a harmony mode

    Choose from complementary, analogous, triadic, split-complementary, tetradic, or square. If you are unsure, start with split-complementary — it offers strong contrast without the harshness of a straight complement, and it works well for most web and app interfaces. Analogous is a safe choice for calm, editorial designs. Triadic is bold and works best when you want a vibrant, energetic feel.

  3. 3

    Review the generated palette

    The tool displays the palette colors as swatches with their HEX, RGB, HSL, and OKLCH values. Check that the hues look distinct enough to serve different purposes in your design — primary action, secondary accent, neutral background. If two colors look too similar, adjust the base color slightly or try a different harmony mode. The interactive color wheel shows the geometric relationship so you can see why each color was chosen.

  4. 4

    Generate tints and shades

    Expand each color to see its full lightness scale. The lightest tint should work as a subtle background. The darkest shade should be legible as text on a white surface. Check the contrast ratios displayed beside each step. If a particular step fails WCAG AA, you know not to use it for text against the adjacent step. Adjust the base saturation or lightness if the scale does not produce enough passing contrast pairs.

  5. 5

    Export your palette

    Pick your export format — CSS custom properties for web projects, Tailwind config for utility-first frameworks, SCSS for preprocessor workflows, or JSON for design token systems like Style Dictionary. Click export and paste the output directly into your codebase or design tool. The exported file is complete and ready to use without manual adjustments.

Expert Tips for Color Palette Creation

Start with function, not aesthetics. Before you open a color picker, list the roles your colors need to fill: primary action, secondary action, success state, error state, warning state, neutral text, neutral background. Each role has specific contrast requirements and emotional associations. A red error state needs to be unmistakably red — not a warm orange that could be confused with a warning. A primary action blue needs enough saturation to stand out against neutral grays without vibrating against adjacent elements. Defining roles first prevents the common mistake of building a beautiful palette that falls apart when applied to a real interface.

Understand the difference between HSL and perceptually uniform color spaces. In HSL, lightness is a simple mathematical average of the max and min RGB channel values. This means HSL lightness has no relationship to how bright a color actually appears. A yellow at HSL(60, 100%, 50%) looks dramatically brighter than a blue at HSL(240, 100%, 50%), even though both have the same lightness value. OKLCH and CIELAB solve this by modeling human perception. When you need a set of colors that look equally prominent — say, category labels in a chart — generate them in OKLCH at a constant L value. The visual uniformity is immediately obvious when you place the colors side by side.

Study existing design systems before building your own. Material Design 3 uses a tonal palette system with 13 tonal steps per hue, generated using the HCT (Hue, Chroma, Tone) color space developed by Google. Tailwind CSS defines 11 shades per hue (50 through 950) and hand-tunes them for practical utility rather than strict mathematical regularity. Apple's Human Interface Guidelines use dynamic system colors that adapt to light and dark modes. Each system made deliberate trade-offs between mathematical purity and real-world usability. Reading their documentation — and inspecting their actual color values — teaches you more about palette construction than any abstract color theory tutorial.

Test your palette in context, not in isolation. A swatch grid on a white background tells you almost nothing about how the colors will perform in a real layout. Build a simple test page with a header, a card, a button, a form field, a success banner, and an error message. Apply your palette and check it in both light and dark modes. View it on a phone screen in direct sunlight. Run it through a color blindness simulator — roughly 8% of men and 0.5% of women have some form of color vision deficiency, most commonly deuteranomaly, which reduces sensitivity to green. If your success and error states are distinguished only by green versus red hue, they will be invisible to a deuteranomalous user. Add a secondary signal — an icon, a pattern, a border style — so color is not the sole differentiator.

Brand color selection is a strategic decision, not a design exercise. The color you choose will appear on every page, every email, every invoice, and every ad for years. Test it against competitors — if three of the top five players in your market use blue, choosing blue means blending in. Check how the color reproduces in print, where CMYK gamut limitations can shift hues. Verify it works at small sizes — a 16x16 favicon in your brand color needs to be recognizable at a glance. Run the hex value through accessibility tools to confirm you can pair it with white or black text at WCAG AA. A gorgeous purple that fails contrast with white text is a liability, not an asset. Make the pragmatic choice first, then refine toward beauty.

Related Tools

Color Converter

Convert palette colors between HEX, RGB, HSL, OKLCH, and other formats for different tools

Gradient Generator

Build CSS gradients using your palette colors for backgrounds, buttons, and banners

Color Contrast Checker

Verify WCAG contrast ratios for every text-background combination in your palette

A color palette is the foundation of your visual identity, but it only works when the colors are applied correctly. Converting between color formats ensures consistency across design tools, code, and print workflows. Generating gradients from your palette colors adds depth and dimension to flat layouts. And checking contrast ratios guarantees that your palette meets accessibility standards for every user — including the 300 million people worldwide with color vision deficiency. These tools work together to take you from a single base color to a complete, accessible, production-ready color system without leaving your browser.

Frequently Asked Questions

Recommended Tools

Image Resizer

Resize images instantly in your browser. Adjust width, height, and format with aspect ratio lock.

Image Compressor

Compress images with adjustable quality. Reduce file size while preserving visual quality.

Color Converter

Convert colors between HEX, RGB, HSL, and HSB formats with a live color preview.