Generated result
{{ summary.primary }}
{{ summary.line }}
{{ badge.label }}
Start from a brand, UI, or accent color such as #2563eb.
Use analogous for close UI families, complementary or split for contrast, and triadic/tetradic for broader accent sets.
Five works well for a UI palette; larger sets are useful for category colors and token libraries.
colors
{{ signedPercent(saturation_adjust) }}
Leave at 0 for a neutral harmony; reduce for calmer UI palettes or increase for sharper accents.
{{ signedPercent(lightness_adjust) }}
Use small shifts to tune swatches for light or dark interfaces.
Generated keeps the base first; hue and lightness are useful when building token ramps.
Example: palette creates --palette-1, --palette-2, and matching RGB/on-color tokens.
Token HEX RGB HSL On color Text contrast Copy
{{ row.token }} {{ row.hex }} {{ row.rgb }} {{ row.hsl }} {{ row.onColor }} {{ row.contrastLabel }}
Foreground Background Ratio Normal text Large/UI Copy
{{ row.foreground }} {{ row.background }} {{ row.ratio }} {{ row.normalLabel }} {{ row.largeLabel }} 
{{ cssOutput }}
Tags: Image, Randomness
CSS Gradient Generator Build CSS gradients with draggable stops, live geometry, modern color-space options, syntax checks, and copy-ready CSS output.
SVG Placeholder Generator Build SVG placeholders with exact dimensions, labels, contrast warnings, preview output, and HTML or CSS snippets for layout handoff.
Image Background Remover Remove simple image backgrounds locally, tune color or edge masking, check warnings and coverage, and download a transparent PNG for photos or logos.
Favicon Generator Turn one logo into favicon PNGs, favicon.ico, HTML links, and manifest icons with local rendering, size checks, previews, and ZIP download.
Customize
Advanced
:

Color choices start to become difficult when a single favorite shade has to support real work. A brand blue may need a soft surface color, a stronger emphasis color, a border shade, several chart colors, and a readable text color. The palette has to feel related without turning every swatch into the same color at a different brightness.

Two questions usually decide whether a palette is useful. Hue harmony asks how colors sit around the color wheel, which is why analogous colors feel close and complementary colors feel more forceful. Readability asks a different question: how much relative luminance separates foreground and background. A vivid purple and a vivid blue can look distinct as blocks of color yet still be weak for small text if their brightness is too similar.

Palette job What usually matters Common failure
Interface family Close hue relationships, controlled saturation, and light-to-dark steps for surfaces, borders, and accents. The colors feel cohesive but have too little contrast for labels or controls.
Accent pair Clear opposition or near-opposition with enough brightness difference for foreground and background use. The pair is colorful but both colors sit at a similar brightness.
Chart categories Enough separation across hue and lightness that adjacent series are easy to tell apart. Several categories collapse into the same visual group when the chart is small.
Design tokens Repeatable names, stable values, and a known text color for each swatch. Nice-looking colors are copied into code without a consistent naming or contrast check.

The basic vocabulary is simple, but each term answers a different question. Hue is the angle around the color wheel, so it separates blue from green or orange. Saturation is the strength of the color, from muted grayish tones to vivid accents. Lightness is the position between dark and light in a color model. Contrast ratio compares two colors by relative luminance and is the number accessibility checks use for text readability.

A seed color moves through harmony and contrast decisions A seed color creates companion hues, then each swatch passes through text contrast and token naming checks. Palette quality is both harmony and readable contrast seed hue family AA light text AA dark text AAA token review pair use swatches need text checks before reuse

Color-wheel harmony is a starting point, not an accessibility guarantee. HSL lightness is not the same as WCAG relative luminance, so two colors with similar HSL values may produce very different black-or-white text contrast. Yellow is a common example: it can look bright enough to dominate a composition while still needing dark foreground text.

A palette also changes when it leaves the swatch board. Tiny labels, disabled controls, dense dashboards, projector screens, thin fonts, and color-vision differences can all make weak contrast easier to notice. Generated swatches are best treated as a structured draft that still needs review inside the final interface, chart, slide, or brand artwork.

How to Use This Tool:

Start with the color that must stay fixed, then choose the relationship you want the companion colors to have with it.

  1. Enter a 3- or 6-digit HEX value in Base color. The text field accepts values such as #2563eb or 2563eb, and the color picker keeps the same seed value in sync.
  2. Choose Harmony mode. Use analogous for close interface families, complementary or split complementary for stronger accents, triadic or tetradic for category sets, and monochrome or shades and tints for ramps.
  3. Set Color count between 3 and 10. Smaller palettes are easier to govern; larger palettes are better for chart categories or early token exploration.
  4. If the warning box appears, fix the HEX value, count, or harmony choice before trusting the output. The tool does not generate a palette from an invalid color or out-of-range count.
  5. Open Advanced when the first palette is close but not quite usable. Saturation adjustment makes companion colors calmer or sharper, lightness adjustment shifts generated companions lighter or darker, and sort order changes how swatches, tables, tokens, and exports are arranged.
  6. Review Palette Swatches first, then use Color Specs for HEX, RGB, HSL, and selected on-color values. Use Contrast Pairs before placing one palette color over another.
  7. Set the CSS variable prefix before copying tokens. The generated CSS, JSON, color tables, swatch SVG, and hue/lightness chart all use the current palette settings.

Interpreting Results:

The summary reports the generated color count, seed color, readable black-or-white on-colors, strongest palette pair, and how many swatches reach the stronger AAA on-color threshold. Treat it as a fast screening view, not proof that the palette is ready for every component.

The swatch view gives each color a token name, HEX value, role label, and recommended dark or light text color. The on-color is whichever of black or white produces the higher contrast on that swatch. That is useful for labels placed directly on the swatch, but it does not prove that two non-black palette colors work as a foreground/background pair.

Result area What it answers How to use the answer
Palette Swatches Which colors were generated, what they are called, and whether black or white text is stronger on each swatch. Copy individual values only after checking whether the color is meant to be a surface, accent, category, or state.
Color Specs The same colors expressed as HEX, RGB, HSL, on-color, text contrast, and role labels. Use it for handoff to design tools, spreadsheets, audits, or a first design-token review.
Contrast Pairs Every foreground/background combination inside the generated palette, sorted by contrast strength. Check real pairings before using one palette color as text, an icon, a focus ring, or a label over another color.
Hue Lightness Map Hue position, lightness, and saturation spread for the generated colors. Look for clusters that may be too close for chart categories or ramps that jump too sharply for interface surfaces.
CSS Tokens and JSON Reusable color values, channel values, on-colors, contrast pairs, and chart rows. Move the palette into a prototype or design system while keeping the contrast evidence attached.

Contrast labels should be read as thresholds. AA pass for normal text starts at 4.5:1, while large text and many non-text UI graphics use 3:1. AAA starts at 7:1 for normal text. A value such as 4.49:1 is still below the normal-text AA boundary.

Sorting changes the display order, not the underlying design decision. Hue order helps inspect category spread, lightness order helps inspect ramps, contrast order puts the strongest on-color swatches first, and generated order keeps the seed-led palette sequence intact.

Technical Details:

The palette is based on sRGB colors entered as 3- or 6-digit HEX values. The seed is expanded to full HEX, converted to RGB, and then represented in HSL so hue offsets, saturation changes, and lightness changes can be applied consistently.

Harmony modes use fixed hue relationships around the seed color. Monochrome and shades-and-tints modes keep the hue fixed and vary lightness more strongly. The seed stays unchanged, while generated companion colors are clamped to practical saturation and lightness ranges so the result does not collapse into near-black, near-white, or gray extremes.

Harmony Rule Core:

Mode Hue behavior Practical interpretation
Analogous Steps near the seed hue on both sides, using close offsets before wider ones. Best for related interface colors and brand-adjacent accents.
Complementary Uses the seed, the opposite hue, and bridge positions around both sides of that relationship. Useful for strong accent pairs, opposing states, and high-attention callouts.
Split complementary Uses two near-opposites instead of only the direct opposite hue. Creates contrast with less visual tension than a pure complementary palette.
Triadic Starts with three major hue positions spaced around the wheel, then adds lighter and darker variants. Good for category colors when a close family would be too subtle.
Tetradic Uses four broad hue positions, including the complement, then adds supporting offsets. Better for broad accent exploration than for a restrained one-brand surface ramp.
Monochrome Keeps hue constant and builds tints and shades from lightness stops. Good for single-hue UI scales, backgrounds, borders, and subtle emphasis.
Shades and tints Keeps hue constant, softens saturation, and spreads colors across defined lightness stops. Useful when the palette needs a clear light-to-dark ramp around the seed color.

Contrast is calculated from relative luminance, not from HSL lightness. Each sRGB channel is first linearized, then red, green, and blue are weighted to reflect their contribution to perceived luminance. The ratio compares the lighter color with the darker color.

Formula Core:

Clinear = { C/12.92 when C≤0.04045 ((C+0.055)/1.055)2.4 otherwise L = 0.2126R+0.7152G+0.0722B contrast ratio = Llighter+0.05 Ldarker+0.05

Channel values are normalized from 0 to 1 before linearization. The resulting contrast ratio ranges from 1:1 for identical luminance to 21:1 for black against white.

Thresholds And Bounds:

Rule Boundary Meaning
Large text or non-text UI contrast 3:1 or higher Often suitable for large text, icons, and graphics, but not enough for normal body text.
Normal text AA contrast 4.5:1 or higher The common minimum target for ordinary text foreground/background pairs.
Normal text AAA contrast 7:1 or higher A stronger target that improves readability but does not replace layout and typography review.
HEX input 3 or 6 hexadecimal digits Short HEX values are expanded to full six-digit form; alpha, named colors, and RGB text are outside this input path.
Palette size 3 to 10 colors Keeps the result small enough to inspect while supporting category palettes and token drafts.
Adjustment ranges Saturation -30% to +30%; lightness -20% to +20% Tunes generated companion colors while preserving the seed color.

CSS token names are normalized so they can be used as custom properties. The generated token set includes each swatch's HEX value, RGB channel values, HSL channel values, and chosen on-color. Numbered tokens are a practical handoff format, but mature design systems usually rename final colors by role, such as surface, border, accent, danger, or chart series.

Privacy And Accuracy Notes:

The palette is generated in the browser from the values currently shown in the form. There is no lookup service, upload step, or account-based storage involved in the color calculation. Copy and download actions use the current browser state.

The contrast checks are standards-based, but they do not simulate every viewing condition. Thin fonts, antialiasing, transparent overlays, image backgrounds, gradients, disabled states, focus rings, projector displays, and color-vision differences can all change the final reading experience.

The color generation model uses sRGB and HSL-style hue and lightness adjustments. It does not claim perceptual uniformity across all hues, and it does not replace manual review in the final artwork, interface, or chart.

Worked Examples:

Building a product-blue interface family

Start with #2563EB, choose analogous mode, and generate five colors. Use the swatches for the first visual pass, then open the pair table before placing a tint behind button text, navigation labels, or form hints.

Testing category colors for a dashboard

For a dashboard that needs many series, try triadic or tetradic mode with seven or eight colors and sort by hue. The hue/lightness chart helps reveal clusters where two series may look too similar once the chart is compressed.

Preparing a token handoff

For a brand orange such as #F97316, use shades and tints with a prefix like brand. Copy the CSS after the contrast review, then rename the numbered tokens into semantic roles once the colors are assigned to real components.

FAQ:

Why does my color show a HEX warning?

The color field accepts 3- or 6-digit HEX values. Remove alpha channels, RGB functions, named colors, and extra characters, then enter a value such as #0ea5e9 or 0ea5e9.

Does an AA on-color make the whole palette accessible?

No. It means black or white text has enough contrast on that individual swatch. Real components still need checks for text size, font weight, states, spacing, and any palette-on-palette combinations.

Why can harmonious colors fail together?

Harmony is based on hue relationships, while contrast is based on relative luminance. Two colors can sit far apart on the color wheel and still be too similar in brightness for readable text.

Why did sorting change the order but not my token names?

Sorting changes the review and export order. Token numbers stay tied to the generated swatches, so a color does not silently get a different token name just because the table was sorted another way.

Can I use alpha colors, OKLCH, or Display P3 values?

No. This workflow is centered on 3- and 6-digit HEX colors in sRGB, with RGB, HSL, contrast, CSS token, and JSON outputs derived from that input.

References: