How do I generate a palette from a photo?

Open a JPG, PNG, WebP, or GIF and click the color that should lead. The palette grows from that pixel: eleven shades toward black, eleven tints toward white, plus complementary, triadic, tetradic, analogous, and monochromatic harmonies. Copy the values you need. A contrast checker is on the same page.

Why did I get these colors and not a summary of the whole photo?

The ramps follow the pixel you selected. Click the hue you care about, and the shades, tints, and harmonies are built from it. A different click, on a shadow or a highlight, builds a different palette. Use the magnifier, 11 by 11 at 10 times, so the pixel is the color you meant to sample.

What harmonies are included?

Complementary, triadic, tetradic, analogous, and monochromatic, all from the selected pixel. Complementary is the strong partner. Analogous stays nearby. Monochromatic stays in the hue. Triadic and tetradic open the set up. Pair any of them with the shade and tint ramps, then check contrast before you put text on a color.

How do I check if two colors are readable together?

Use the WCAG contrast checker on the same page. Test the text color against the background you plan to use, including a shade or a tint from the ramp. If the pair is weak, step darker or lighter on the ramp and test again. Copy the pair that passes for the size of type you have in mind.

Which images can I sample?

JPG, PNG, WebP, and GIF. The sampling runs locally. Open the photo, click with the magnifier, and copy. A GIF still gives you the pixel you clicked. If the edge of a logo looks muddy, click one pixel inward, where the color is solid, and let the palette rebuild from that cleaner sample.

Can I sample a different color in the same photo?

You can copy a full palette from the pixel you clicked, including the shade ramp, the tint ramp, and the harmonies. The next click samples a different pixel and builds that pixel's palette instead. Move the magnifier, click the new color, and copy again. The checker stays on the page for each pair you want to test.

Color Picker Cluster

Color Palette: shades from the color you picked

Selected color

HEX

HSL

Advanced pickers

Image canvas sampling · Interactive color board · Multi-format output

Image sampler

Drop image to sample colors

JPG, PNG, WebP, GIF

Color board

Hue217°

Color formats

HEX

RGB

HSV

HSL

CMYK

Color variations

Shades mix pure black · Tints mix pure white · Click to copy & apply

Shades (black mix)

Tints (white mix)

Color harmonies

Theory-based palettes from your selected hue

Harmony wheel

WCAG contrast checker

Background uses your globally selected color · Evaluate text readability

Text color (HEX)

Contrast ratio

3.68

Normal text

Fail

Small text

Fail

Large text

Pass AA

The quick brown fox jumps over the lazy dog

Sample body text on your selected background. Large text is typically 18pt+ regular or 14pt+ bold.

100% client-side · Canvas pixel sampling · No uploads

Need the main tool? Color Picker

Written by Safaat Rahman Siham, Founder & Developer at Convertify4u. Contact us.

You want a palette you can copy after you click a color in the photo. Open the picture, click the pixel that should lead, and take the shades, tints, and harmonies that grow from it. The palette grows from the pixel you select. It is that color, followed outward, rather than a blend of every pixel in the frame. You get eleven shades toward black and eleven tints toward white, a ladder you can use for backgrounds, type, and quieter supporting tones. Harmonies sit with it: complementary, triadic, tetradic, analogous, and monochromatic. A magnifier of 11 by 11, shown at 10 times, helps you land on the exact pixel, a thread in a fabric or a pixel in a logo. A WCAG contrast checker is on the same page, so you can test a pair before you copy it into a design. JPG, PNG, WebP, and GIF all open here, and the work stays local. Click with a job in mind. If you are matching a brand color buried in a photo, zoom with the magnifier and choose the pixel that is truly that color, not the shadow beside it. If you are building a gentle background from a floral photo, click the petal and use a tint. If you need a partner color, read the complementary or analogous harmony and check the contrast against the text you plan to put on it. Copy the values, try them, and click again if the first pixel was a highlight. The palette follows your click, which keeps you in charge of the color the photo suggested.

A palette that starts from the pixel you click

Eleven shades and eleven tints

Once you click, the page builds a ramp from that color. Eleven shades step toward black, useful for text, rules, and deeper backgrounds that still belong to the same hue. Eleven tints step toward white, useful for cards, washes, and quiet fills that keep the color without shouting. Together they are a practical palette: one source pixel, then the lighter and darker neighbors a layout usually needs. Copy the step that matches the job instead of guessing a hex in your head. If the ramp feels too strong, click a softer pixel in the photo and let a new ramp replace it. The source of the palette stays visible, because you chose it.

Harmonies around that same color

Beside the ramp you get harmonies drawn from the selected pixel. Complementary gives you the color across the wheel, a strong partner. Triadic gives you three colors evenly spaced, useful when a design wants more than a pair. Tetradic offers a four-color relationship. Analogous stays with the neighbors on the wheel, which is the gentle choice when the photo is already busy. Monochromatic stays inside the hue. Use the harmony that matches the mood, then run a pair through the WCAG contrast checker on the same page before you commit type to a background. The checker is there so a pretty pair can also be a readable pair.

A magnifier so the click is honest

The magnifier is 11 by 11 pixels, shown at 10 times, so you can see the stitch, the antialiased edge, or the single pixel of a logo. That matters because the palette grows from the selected pixel. Clicking one pixel to the side can shift a hue, especially on a compressed JPG edge. Settle the magnifier on the color you mean, then read the shades, tints, and harmonies. JPG, PNG, WebP, and GIF can be opened, and the sampling stays in the browser. When the codes look right, copy them. If a contrast check fails the pair you hoped to use, try a deeper shade or a lighter tint from the same ramp and test again.

How it works

1
Open a JPG, PNG, WebP, or GIF
Add the photo that contains the color you want to build from. The palette will follow a pixel in this image, so choose the picture that actually holds that color.
2
Click the pixel, using the magnifier
The magnifier is 11 by 11 at 10 times. Land on the color itself. The page then builds eleven shades toward black, eleven tints toward white, and the harmonies from that pixel.
3
Copy, and check contrast
Copy the shade, tint, or harmony you need. The WCAG contrast checker is on the same page, so test a text color against a background before you leave. The work stays local.

Use cases

Matching a color in a photo

Click the fabric, the paint, or the logo pixel and copy the ramp. Shades and tints give you usable neighbors of that exact starting color.

Finding a partner color

Start from the pixel, then read complementary, analogous, triadic, or tetradic. Check the pair with the contrast checker before you set type on it.

A quiet background from a strong photo

Click the color you want to echo and take a light tint. The page still shows the deeper shades if a heading needs them later.

Problems we solve

The palette looks like the shadow, not the color

The click landed beside the pixel you meant. Use the 11 by 11 magnifier at 10 times and click the color itself. A new click builds a new palette.

Two colors you love fail contrast

Run them through the WCAG checker on the page. Move to a deeper shade or a lighter tint from the same ramp and test the pair again before you commit the type.

Related guide

Trust & technology

Sampled locally

The photo stays in the browser. You click a pixel, read the ramps and harmonies, and copy what you need, with the contrast checker beside them.

A palette from your click

Eleven shades, eleven tints, and the listed harmonies all grow from the selected pixel. The magnifier helps that pixel be the one you intended.

Frequently asked questions

Color Picker