Color Palette Generator From One Color: Step-by-Step Guide
Reviewed by the OnlineFree.app team · Updated
Key points
- One seed hex produces harmony swatches, tints, shades, contrast badges, and export code on a single screen.
- The base field accepts #RGB and #RRGGBB, with or without the hash, and normalizes to six uppercase digits.
- AA targets 4.5:1 and AAA targets 7:1, pairing each swatch with white or near-black text.
- Palette size runs from 3 to 8 swatches; tints and shades run from 0 to 10 steps.
- Exports cover CSS custom properties, JSON, and Tailwind theme tokens with one Copy button.
What does the Color Palette Generator From One Color do?
The Color Palette Generator From One Color converts a single seed hex into a working color system: harmony swatches, a tints-and-shades strip, WCAG contrast badges, and copy-ready CSS, JSON, or Tailwind tokens. You supply one brand color and leave with the rest of the palette in under a minute.
The tool opens with #4F46E5, the Analogous rule, five swatches, five tint/shade steps, and the AA contrast target, so even an untouched page produces a usable indigo set. Everything lives on one page at OnlineFree.app — open the Color Palette Generator From One Color, paste your hex, and the swatch grid, contrast panel, and export block update together.
Step 1: enter and validate your base hex
The base color field accepts hex only, in #RGB or #RRGGBB form, with or without the leading hash, in any letter case. Whatever you type is normalized to six uppercase digits, so #4f4 and #44FF44 and 44ff44 all resolve to a clean, copyable value. A native color picker sits beside the text field when you would rather eyeball the seed than paste a code.
Common mistakes are easy to spot because they are rejected inline with a red hint: rgb(79, 70, 229), hsl() strings, CSS variable names, named colors like indigo, 4-digit #RGBA, and 8-digit hex with an alpha channel. When input fails validation, the last valid palette stays on screen, so a typo never wipes the work you already have.
If a client hands you a color as a screenshot or a Pantone chip, sample it once, then keep the hex in the field rather than re-sampling. Small sampling differences of a few units per channel are enough to shift a computed complement noticeably.
Choose a harmony rule that matches the job
Six rules are available: Complementary, Analogous, Triadic, Split-complementary, Tetradic, and Monochrome. Each rotates the hue wheel around your seed while keeping saturation and lightness stable, which is why the results read as a family rather than a random assortment.
The geometry is standard color theory: complementary sits 180° opposite, analogous steps about 30° either side, triadic lands at 120° intervals, split-complementary takes the two hues at roughly 150° and 210°, and tetradic spaces four hues around the wheel. Monochrome stays on one hue and varies lightness instead.
The palette size slider runs from 3 to 8 swatches (default 5). Use three for a tight brand mark or a single call-to-action pairing, five for a general UI, and six to eight when you need distinct roles such as background, surface, border, muted text, accent, and hover states.
Tints, shades, and why OKLCH is shown
The tints-and-shades slider runs from 0 to 10 steps (default 5) and produces lighter and darker variants of each harmony color. Tints mix toward white, shades mix toward black, and setting the slider to 0 hides the strip entirely when you only want the pure hues.
Every swatch prints HEX, HSL, and OKLCH side by side. OKLCH is defined in the W3C CSS Color Module Level 4 and separates perceptual lightness (L), chroma (C), and hue (H), so you can hold hue constant and step lightness evenly.
This matters because HSL lightness is not perceptual: two colors at HSL L 50% can look very different in brightness, especially across blues and yellows. If you are building a ramp for text or chart series, copy the OKLCH values and step L in even increments; keep the HSL values for tools that still expect them.
How do you check WCAG contrast for each swatch?
The contrast panel lists every swatch with its best text color — white or near-black — plus the actual ratio and a pass/fail badge measured against your chosen target. AA requires 4.5:1 for normal text and AAA requires 7:1, matching WCAG 2.1 Success Criterion 1.4.3; the Off setting simply hides the badges.
Ratios run from 1:1 for identical colors to 21:1 for pure black on pure white, so a badge reading 3.8:1 tells you the pairing is close but still short of AA. Flip a failing pair by keeping the swatch as the background and switching the text color, or nudge the swatch lighter or darker using the tint strip.
Two honest limitations: the ratio is computed against the flat swatch fill only, not gradients, background images, hover overlays, or reduced opacity; and the toggle tests 4.5:1 and 7:1, not the 3:1 large-text threshold (18pt, or 14pt bold). Check those combinations in your real interface, and verify any number you plan to put in an accessibility report.
Export CSS, JSON, or Tailwind tokens
Three output formats share one read-only code block, and it regenerates every time you change the seed color, harmony rule, palette size, tint steps, or contrast target. A Copy button takes the whole snippet, and clicking any swatch copies just that hex with a toast confirmation.
CSS variables paste into a :root block for plain stylesheets, the JSON object suits design-token pipelines and JavaScript theme objects, and the Tailwind snippet drops into theme.extend.colors. Read the generated names before committing: renaming --color-base to --brand-primary across a codebase after the fact is the most common follow-up chore.
Exports cover light values only, so generate a second palette for dark mode rather than inverting the first, and re-check contrast against your actual dark surface. If you want this logic wired into an internal system with your own token names, OnlineFree.app also runs custom PRD builds.
Frequently asked questions
Is the Color Palette Generator From One Color free to use?
Yes. As of 2026 the Color Palette Generator From One Color runs on OnlineFree.app as a free browser page with no account and no install. You can enter a hex, switch harmony rules, test contrast, and copy CSS, JSON, or Tailwind output without a signup step or a paywall in front of the export block.
Which color formats can I type into the generator?
Only hex: #RGB and #RRGGBB, with or without the hash, in uppercase or lowercase. The tool normalizes input to six uppercase digits. Named colors, rgb(), hsl(), 4-digit #RGBA, and 8-digit hex with alpha are rejected with an inline red hint, and the previous valid palette stays visible so you can correct the typo.
Does the tool tell me if my palette passes WCAG contrast?
Yes. The contrast panel pairs each swatch with white or near-black text and shows the measured ratio plus a pass or fail badge for AA (4.5:1) or AAA (7:1). It measures flat swatch fills only, so gradients, images, opacity, and the 3:1 large-text threshold still need a manual check in your interface.
What is the difference between harmony rules and tints and shades?
Harmony rules rotate hue around your base color, producing complementary, analogous, triadic, split-complementary, tetradic, or monochrome sets at similar saturation and lightness. Tints and shades keep the hue and mix toward white or black across 0 to 10 steps, which gives you the light and dark variants a UI needs for backgrounds, borders, and hover states.
Can I export the palette as Tailwind tokens?
Yes. The export block offers CSS custom properties, a JSON object, and a Tailwind theme snippet, all built from the palette currently on screen and refreshed after every change. Choose the Tailwind format, copy it into theme.extend.colors, then rename the generated keys to match your project's naming convention before shipping.