One palette, every tool
Most color work is a chain, not a single step: find colors, check that text stays readable on them, build the lighter and darker steps a real interface needs, then write the CSS.
These tools are links in that chain. Every one of them reads the palette from the address bar, so a link you copy carries your colors with it, and every one of them remembers the last palette you worked on in this browser. Open the shade generator from the generator and your colors are already there. Send a palette to the contrast checker and it lines up all of the pairs for you. Nothing is retyped, and no color drifts by a digit on the way.
If you would rather start from a picture, the image color picker takes any photo or screenshot and hands the colors back to the rest of the set. If you already know your brand color, start at the shade generator instead and work outwards.
Which tool do I need?
All five read and write the same palette, so there is no wrong door. If you are not sure where to start, pick the description below that sounds most like the job in front of you.
Start at the palette generator when you have nothing yet
You need colors and you have no starting point: a new side project, a rebrand, a slide deck that has to look like something. The generator builds 2 to 8 colors around a harmony rule, so the set hangs together instead of being five colors you happened to like. Lock the ones that work, press Generate again for the rest, and export when the row looks right.
Start at the image color picker when the colors already exist somewhere
A product photo, a screenshot of an app you admire, a scan of a book cover, a frame from a video. The picker reads the pixels, pulls out the colors that actually dominate the image, and lets you click any single pixel to grab it exactly. It is also the quickest way to answer "what blue is that?" without guessing.
Start at the shade generator when you already know your one color
Brand colors usually arrive as a single hex. An interface needs far more than one: a page wash, a card background, a border, a hover state, a disabled state, text that still reads on all of them. The shade generator turns your one color into a full 50 to 950 ramp with even perceived steps, and hands it back as Tailwind theme values or CSS variables.
Go to the contrast checker before you ship anything
This is the check, not the creative step. Put your text color and background in, and you get the WCAG ratio with the AA and AAA verdicts for both normal and large text. Send a whole palette instead and you get a grid of every pair at once, which is the fast way to find the one combination in your design system that quietly fails.
Go to the gradient generator when a flat color is not enough
Hero sections, buttons, cards, empty states. Drop your palette into a linear, radial or conic gradient, move the stops until the blend reads the way you want, and copy a CSS rule you can paste straight into a stylesheet. It also tells you whether text can survive on top of the result.
Free, and it all runs in your browser
There is no account, no export limit and no upload step. The color math, the image reading and the exports all happen on your own device, which is why the tools keep working on a slow connection and why the photo you drop into the picker never reaches a server. Palettes you save stay in this browser's local storage until you clear them.
Every tool is keyboard operable, works in light and dark, and shows contrast ratios floored rather than rounded up, so a pair that reads 4.49 never gets to call itself AA.
Share a palette by link
Every tool keeps your colors in the address bar. Copy the address, send it to whoever needs it, and the page opens on exactly what you were looking at.
There is no account, no saved project and no link shortener in the middle. The colors are written into the address itself, so the link keeps working for anyone who opens it, and it still works in a year. It is also the simplest way to put a palette into a ticket, a commit message or a chat with a client.
You never have to build one of these by hand. But the format is plain enough to read, and to edit, so here it is.
The colors: ?c=
One key does most of the work, and every page on this site understands it:
https://instantpalette.com/?c=1b3a4b-3e7c8c-a8dadc-f1faee-e63946
Two to eight colors, each a six-digit hex code with no #, joined by hyphens. Upper or lower case both work, and three-digit shorthand such as f00 is accepted. Swap / for any other tool and the same colors open there instead.
What each tool adds
Beside ?c=, each tool writes a few keys of its own. A tool ignores keys that belong to another one, so nothing collides.
| Tool | Its own keys | What they carry |
|---|---|---|
| Palette generator | h, lk, bh | The harmony mode, which colors are locked, and the hue the set was built around. Modes are written in lower case: random, complementary, analogous, triadic, split-complementary, monochromatic. In lk, one digit per color, and a 1 means locked. |
| Contrast checker | fg, bg, a | The text color, the background behind it, and the text opacity as a whole number from 10 to 100. This is the one tool that reads a pair rather than a palette, so ?c= is optional here. |
| Shade generator | m, lt, dk, ix | The method (oklch, hsl or mix), how light step 50 goes, how dark step 950 goes, and how much color is kept at the ends. It accepts a single color as well as a set. |
| Gradient generator | g, sp, a, p, op | The gradient type (linear, radial, conic or mesh), the blend space (srgb, oklab or oklch), the angle in degrees, and where each stop sits and how opaque it is. |
| Image color picker | none | Only ?c=, because the image itself never leaves your device and so cannot travel in a link. The colors it pulled out do. |
Three you can try right now
Five colors, in analogous mode, with the second one locked:
https://instantpalette.com/?c=1b3a4b-3e7c8c-a8dadc-f1faee-e63946&h=analogous&lk=01000
A text color on a background, ready to check:
https://instantpalette.com/contrast-checker?fg=1b3a4b&bg=f2e8cf
One brand color, turned into a full ramp by the HSL method:
https://instantpalette.com/shade-generator?c=4f7cac&m=hsl
Nothing you type here can break the page. A color that is not valid hex is skipped, and if fewer than two survive the tool quietly falls back to the palette you had last. A key it does not recognize, or a value outside the range it allows, falls back to that tool's normal setting. So a link that was trimmed by an email client still opens something sensible rather than an error.
Questions
How does a palette move between the tools?
Two ways, and they work together. Every tool keeps your colors in the address bar, so the link you copy carries them; and every tool remembers the last palette you worked on in this browser, so the next tool you open already has it. The links on this page pick the palette up automatically, which is why they sometimes look longer than the plain address.
Can I link straight to a specific palette?
Yes, and you already are. The address bar carries your colors as you work, so copying it is all a share takes. The format is ?c= followed by two to eight six-digit hex codes joined by hyphens, and every page on the site reads it, so you can point the same colors at any tool by changing the path. Each tool adds a few keys of its own for its settings. There is a full description, with examples you can try, in share a palette by link above.
Do I need an account, and is there a limit?
No account, no sign-in, no export limit. Everything here is free to use, including the CSS, SCSS, Tailwind, JSON and PDF exports. The site is paid for by the ads on the page.
Can I use these colors in a commercial project?
Yes. A color and a set of colors are not copyrightable, so anything you generate here is yours to use in client work, products or anything else, with no attribution required. The only thing to check separately is whether a color is part of someone else's registered trade dress, which is a trademark question rather than a palette one.
What happens to an image I open in the picker?
It stays on your device. The picker reads the file with your browser's own canvas, so the pixels never travel to a server and there is nothing to delete afterwards. That also means it keeps working offline, and that a screenshot with something confidential in it is no more exposed than it was on your disk.
Which color format should I export?
Hex is the safe default and works everywhere. RGB is useful when you need to set an alpha value alongside it. HSL is easier to edit by hand, because you can nudge lightness without touching hue. OKLCH is the modern choice: its lightness axis matches how bright a color actually looks, which is why shade ramps built in it feel evenly spaced. Every tool here can show all four.
Do the contrast numbers make my site accessible?
They cover the color part of it. WCAG asks for 4.5:1 between normal text and its background for AA and 7:1 for AAA, with 3:1 allowed for large text, meaning 24px or 18.66px bold. The ratios here are floored rather than rounded up, so 4.49 never gets to call itself AA. Focus order, labels, motion and keyboard support are separate checks that no color tool can do for you.
Are my saved palettes stored anywhere I can lose them?
They live in this browser's local storage on this device, not in an account. Clearing site data clears them, and they do not follow you to another browser or phone. If a palette matters, export it, or copy the link from the address bar, which contains the colors on its own.
Can I use the tools on a phone?
Yes. Every tool is built for touch as well as a mouse, and the sliders, swatches and stop handles are sized for a finger. The image picker can take a photo straight from the camera roll, and a pinch-zoom lets you land on the exact pixel you want.
New to color theory?
The guide covers when to use each harmony, what colors signal in different industries, and how to check a palette for color blindness. About a 12-minute read.