سازندهٔ پالت رنگ

Generate a color palette five different ways

This color palette generator replaces a shelf of separate tools. Hit Generate for a random color palette, dial in a color harmony from a base color, pull colors from an image or photo, expand a single hex code into a full scheme, or turn a color name or word into a repeatable palette. Set the count from 3 to 10, lock the colors you like, and regenerate the rest — no account and nothing leaves your browser.

Click any swatch to copy its value, switch the readout between HEX, RGB, and HSL, and drag swatches to reorder them. Press Space to roll a new palette instantly — the same workflow Coolors popularized, available here without a paywall.

Extract colors from an image, hex code, or name

From an image: Drop in a photo and the tool samples it on a hidden HTML5 canvas using a median-cut algorithm to extract dominant colors — useful for matching a palette to a product shot, a brand photo, or a mood board. The image stays on your device and is never uploaded anywhere. Coolors charges Pro subscribers for this feature; here it's free.

From a hex code: Paste a brand color and keep it as the anchor while the generator builds analogous, complementary, and tint/shade companions around it. From a name: Type any word and a deterministic hash seeds the palette, so the same name always produces the same colors — a reliable offline alternative to AI-based palette generators that give different results each run.

Color harmonies built on real color theory

Harmony mode applies color theory by rotating hue around the color wheel. Complementary colors sit 180° apart for punchy contrast; analogous colors stay within ±30° for a calm, unified feel; triadic uses three hues 120° apart; tetradic uses four at 90°; split-complementary softens the contrast clash at 150°/210°; and monochromatic keeps one hue and varies lightness across the palette.

Each generated color also comes with a full tint and shade scale from 50 to 900 — the lighter and darker steps needed for hover states, border colors, and background variants in a real UI design system.

How UtiloKit compares to Coolors, Adobe Color, and Paletton

Coolors is the most popular palette tool, with an excellent lock-and-regenerate workflow and a large explore community. Coolors Pro ($4/month) gates image extraction, advanced export, and palette history behind a paywall. Native Tailwind export isn't in the free tier. Adobe Color does WCAG accessibility checking and color harmony visualization well, but saving palettes requires a free Adobe account, and it takes more clicks to reach the export step.

Paletton is strong for color theory but shows only four harmony types and doesn't include image extraction. UtiloKit combines the core strengths of all three — Coolors-style locking, Adobe Color's WCAG panel, image extraction, and Tailwind/SCSS export — with no account, no paywall, and no ads on the tool itself.

Lock favorites and keep going

Good palettes come from iteration, not a single generation. Lock a swatch and it stays put. Everything unlocked re-rolls when you press Generate or hit Space. Keep the dominant color you like, shuffle the accents, and narrow in on a set that works — then move straight to export.

You can lock multiple colors at once. Lock your brand primary and a neutral background, then let the tool suggest accents. Lock those accents once you find ones that work, and regenerate the supporting tones. This mirrors how designers build palettes manually, just much faster.

Export to CSS, Tailwind, SCSS, JSON, PNG, and a shareable link

When the palette is ready, export in whatever format your project needs. CSS gives a :root block of custom properties. Tailwind gives a ready-to-paste theme.extend.colors object for tailwind.config.js. SCSS gives $variables compatible with Sass. JSON lists every color in HEX, RGB, and HSL for JavaScript or design token pipelines. Download a PNG swatch sheet for a brand document or presentation. Copy a shareable link that encodes the palette in the URL so a teammate opens exactly what you see.

Built-in WCAG contrast checking

A palette isn't done until the text on it is readable. The contrast panel shows each color's WCAG contrast ratio against white and black text, with AA and AAA pass/fail badges. WCAG 2.1 AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text. Most palette tools skip this step or put it behind a premium tier — here it's built in and runs in real time as you generate or modify swatches.

No sign-up, no upload, nothing leaves your browser. Every palette operation — random generation, image extraction, harmony math, contrast calculation, and export — runs in local JavaScript. Bookmark this free color palette generator for website design, brand identity, illustration, slide decks, and seasonal or wedding palettes.

Color theory and harmony rules: what the color wheel actually tells you

In 1704, Isaac Newton arranged the visible spectrum into a circle — the first color wheel — establishing that hue relationships are angular distances around that circle. Every color harmony a generator offers is just a rule about which angles to combine. Complementary colors sit 180° apart and produce maximum contrast because they share no spectral energy: blue and orange push each other's perceived intensity upward. Sports brands exploit this aggressively — the LA Lakers' purple and gold are near-complements chosen specifically so each color makes the other look brighter under arena lighting.

Analogous harmonies use hues within ±30° of each other, so they share overlapping spectral components and never clash. Nature photography is saturated with analogous schemes: autumn foliage runs orange → amber → yellow; a tropical reef runs cyan → teal → blue-green. Triadic palettes space three hues 120° apart for vibrance with balance — if one hue drifts too intense the other two still stabilize the eye. Split-complementary takes a base color and instead of hitting the exact opposite, flanks it at 150° and 210°, softening the contrast clash while keeping most of the energy. Tetradic (square) schemes pull four colors at 90° intervals and give the richest range, but require one hue to dominate or the result becomes busy. Monochromatic palettes skip hue variation entirely, using only shifts in saturation and lightness on a single hue for a result that is always unified and always elegant — the approach behind most single-brand UI color ramps.

Understanding these rules changes how you use a generator. Rather than regenerating until something looks right by accident, you choose the harmony type that matches the emotional register of the project — calm and nature-aligned (analogous), bold and sporty (complementary), vibrant and playful (triadic) — and then iterate within that structure.

How palette generation algorithms actually work

Under the hood, every color harmony generator is doing hue rotation math. Start with a base hue angle H (0–360°), apply the harmony's rotation offsets to get the companion hues, then assign each color its own saturation and lightness within the HSL or OKLCH color model to fulfill its palette role — primary, secondary, accent, neutral. For a complementary pair, the generator sets H and H+180. For triadic, it produces H, H+120, H+240. Adjusting saturation downward creates muted supporting colors; reducing lightness yields deep shades for text or backgrounds. This is the core of every tool from Coolors to Adobe Color.

Systematic color scales — the kind design systems ship — are generated by tinting and shading: mixing a hue with white to produce lighter stops, mixing with black for darker stops, and mixing with grey to produce tones. Tailwind CSS uses a 10-step scale with stops named 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950. The 500 stop is typically the pure hue; everything lighter is a tint and everything darker is a shade. Generating this scale for each palette color is what turns a 5-swatch palette into a fully functional design-system color set.

A critical issue with HSL-based scales is that HSL's L (lightness) channel is not perceptually uniform: a yellow at L=60 looks far brighter than a blue at L=60, even though the numbers are identical. This is why yellow Tailwind 500 and blue Tailwind 500 look optically mismatched in the same UI element. OKLCH — the color model behind CSS Color Level 4 — separates lightness, chroma, and hue in a perceptually uniform space: equal numerical differences in L translate to equal perceived differences in brightness. Tools generating OKLCH-based scales (like Radix UI's color system) produce ramps that look visually even across all hues at every stop.

Brand color systems and design tokens: from swatch to stylesheet

A single palette hex code is just the start of a brand color system. In print, colors are specified in the Pantone Matching System (PMS) — a physical ink standard where PMS 286 C is the specific blue on a UPS truck regardless of the printer or paper stock. For digital screens, the equivalent is an sRGB hex or RGB triplet: #0032A0 for that same royal blue. For offset printing that isn't Pantone-managed, the color converts to CMYK. The challenge every brand team faces is that a vivid digital blue can shift dramatically when converted to CMYK, because CMYK has a narrower gamut than sRGB — it cannot reproduce highly saturated blues, oranges, or greens. Checking your palette colors against a CMYK gamut map before finalizing brand guidelines prevents ugly surprises on the print run.

Design token architecture turns palette colors into semantic variables. Google Material Design 3 defines roles like primary, on-primary (text that sits on top of primary), primary-container, secondary, tertiary, error, surface, and outline. Each role is a named slot filled by a color from the palette. In code, this maps to CSS custom properties: --color-primary: #3b82f6;, which components reference rather than hardcoding the hex. When the brand color changes, one token update propagates everywhere. Tools like Style Dictionary and Theo compile these token files into platform-specific outputs — CSS variables, Swift UIColor constants, Android XML resources — from a single JSON source of truth.

Dark mode palettes are the clearest proof of why tokens matter over raw colors. In a token system, --color-surface might be #ffffff in the light theme and #1a1a1a in the dark theme — the same semantic role, different value, switched by a single @media (prefers-color-scheme: dark) block or a class toggle. If components had hardcoded #ffffff backgrounds, dark mode would require touching every file. With tokens, the entire theme flips in one rule. When you export this palette generator's output to CSS custom properties, you're getting exactly this foundation: a token layer your components can use regardless of theme context.

Color accessibility: contrast ratios, colorblindness, and palette auditing

WCAG 2.1 (Web Content Accessibility Guidelines) sets minimum contrast ratios between text and its background: 4.5:1 for normal-sized text at AA compliance, 3:1 for large text (18pt+ or 14pt+ bold) or UI component boundaries, and 7:1 for AAA enhanced compliance. These ratios are calculated from the relative luminance of the two colors — a formula derived from how human photoreceptors respond to red, green, and blue light. A ratio of 4.5:1 means the lighter color reflects 4.5 times more light than the darker. Medium blue (#2563EB) on white measures approximately 5.17:1 — passes AA. Amber (#F59E0B) on white measures about 1.97:1 — fails AA comprehensively and must use dark text or be removed from text backgrounds entirely. The proposed APCA (Advanced Perceptual Contrast Algorithm), targeted for WCAG 3.0, replaces the current formula with a more nuanced model that accounts for font weight and polarity (light-on-dark versus dark-on-light behave differently) — it produces fewer false passes for medium-saturation colors that the current formula rates as adequate.

Approximately 8% of males and 0.5% of females have some form of color vision deficiency. The most common type is red-green colorblindness (deuteranopia or protanopia), where the eye cannot distinguish red from green by hue alone and relies on luminance difference instead. A palette that places red error states next to green success states with similar lightness — as is common in traffic-light UI conventions — becomes completely ambiguous for these users. Colorblind-safe palette design ensures that every meaningful distinction in the palette can be perceived through luminance difference or shape cues, not color alone. The standard audit workflow is to run the palette through a deuteranopia and protanopia simulator (many browser devtools include this) and verify that all information-bearing color pairs remain distinguishable in the simulated view.

A practical rule for accessible palette design: at least 60–70% of color pairs in your palette should pass the WCAG AA contrast threshold when one is used as a background and the other as foreground text. This is stricter than it sounds — a palette of five colors has ten possible pairings, and a visually appealing palette often has only three or four high-contrast pairs and several mid-range ones. The built-in contrast panel in this generator surfaces these ratios in real time, letting you identify which swatches can carry text and which are background-only or decorative-only — the essential audit step before shipping any palette to production.