Or start from an image
JPG, PNG or WebP · up to 15 MB · processed in this browser, never uploaded.
Keep your brand color. Build the roles around it.
Changing theme regenerates the roles. Use Undo to restore your edits.
One saved palette on this browser. No account or cloud storage.
Make room for
your next idea.
See how your colors work together on text, surfaces, and a primary action.
Primary actionA clear direction.
Checks apply to these pairs at the normal-text AA threshold of 4.5:1. A palette does not certify a whole page. Button and card text use black or white for contrast.
Inspect exported code
Find your way in
Stuck before the first color?
Start with a mood, image, or color. Add one useful constraint, compare three palette directions, and turn creative block into a small design move.Explore harmonies & fine-tune colors
New Image Colors
Drop in a photo, screenshot or moodboard — HueWiz finds its strongest colors and builds a 5-role palette. Processed locally; nothing is uploaded.
New Palette Mixer
Starts from your picked color and builds a 5-role palette (surface, primary, secondary, accent, ink) — tune it with sliders or jump to a preset.
Playground
Spin through the match wheel, drop in any colors, edit them freely, and see how they feel together.
Harmony score
Each segment is your picked color rotated around the color wheel. The score runs from 0 to 100 and combines classic harmony angles with a contrast bonus. It is a design suggestion, not a probability or a WCAG pass result. Click a segment or row to copy its hex — or hit + to drop it into the playground below.
Color guides & tutorials
New to color? These free, jargon-free guides cover everything from the color wheel to building a palette and keeping your colors readable.
How to generate a color palette
Start with a hex code in the color picker, or choose a photo in Image Colors. Compare matching hues, assign colors to your design, then check the text and background pairs you will actually use.
Build a palette from an image
Choose a JPG, PNG or WebP photo, screenshot or moodboard. Image Colors analyzes it in your browser and suggests surface, primary, secondary, accent and ink roles. Select an extracted color to open it in the Mixer, or send the suggested roles to the Playground.
Refine the colors and copy CSS
Use the Palette Mixer to adjust the palette and inspect its preview. Choose Copy as CSS to copy the five named color roles. Read the step-by-step palette guide for a worked example.
Color harmony and readable text are different checks
Complementary hues sit opposite each other on the color wheel; this does not guarantee enough contrast for text. Check each foreground and background combination. A harmony score is a design heuristic, not a measured probability or an accessibility result. See the WCAG contrast guide for text thresholds and exceptions.
About HueWiz
HueWiz is a free, browser-based color matcher and palette generator built for designers, developers and anyone choosing colors for a project. Pick any color with the HSV picker or paste a hex code, and HueWiz instantly builds matching palettes — complementary, analogous, triadic, split-complementary, tetradic and monochromatic — with copy-ready hex, RGB and HSL values for every swatch.
Each palette is generated from established color-harmony relationships on the color wheel, so the suggestions are grounded in color theory rather than guesswork. The Pop accents section ranks vivid, high-contrast accent colors by their WCAG contrast ratio, making it easy to find an accent that brings your base color to life while staying readable. The Playground's match wheel goes a step further: it rotates your picked color into eight positions around the color wheel and scores each pairing with a heuristic harmony score, blending classic harmony angles with contrast. All color math runs locally in your browser — nothing is uploaded.
Image Colors and the Palette Mixer are the newest additions. Image Colors clusters a photo, screenshot or moodboard's pixels in the OKLab color space — a model built to match human perception — to find its strongest, most distinct colors and infer a 5-role palette (surface, primary, secondary, accent, ink). The Palette Mixer takes that same 5-role structure, built from whatever color you've picked, and lets you tune it in OKLCH with sliders for contrast, creativity, vibrance, temperature, harmony, brightness, accent energy and brand fidelity — plus presets and a live AA/AAA accessibility check. Both run entirely in your browser, same as the rest of HueWiz.
How does color matching work?
Colors are matched by rotating the base hue around the color wheel. A complement sits 180° away for an opposing hue; analogous colors sit about 30° apart for a calm, cohesive feel; triadic colors are spaced 120° apart for a balanced, vibrant scheme. HueWiz applies these rotations automatically and shows each result with full color codes.
What's the difference between hex, RGB and HSL?
Hex and RGB describe the same color through red, green and blue channels — hex in base-16 (for example #3B82F6) and RGB in decimal (59, 130, 246). HSL describes a color by hue, saturation and lightness, which often makes relationships between colors easier to reason about. HueWiz shows all three for every color so you can copy whichever your project needs.
Read the contrast badges correctly
HueWiz uses the WCAG relative-luminance contrast ratio, not APCA. For ordinary text, AA requires at least 4.5:1 and AAA requires 7:1. Large text can meet AA at 3:1: that means at least 24 CSS pixels at normal weight, or approximately 18.67 pixels in bold. A badge applies only to the two colors being compared; it does not certify an entire palette or page. Displayed ratios are rounded, but pass/fail decisions use the unrounded value.
For example, white on #777777 is about 4.48:1, so it fails normal-text AA even if a one-decimal display reads 4.5. Black on white is 21:1. Recheck text over images, gradients or transparent backgrounds after compositing, and distinguish error and success states with text or icons as well as color. Read the W3C contrast guidance for exceptions and definitions.
Is HueWiz free to use?
Yes — HueWiz is completely free with no sign-up required. Ad serving and session recording are currently disabled. The color tools remain free to use.