PhotoRiyaHow to get a color palette from an image
Drop a picture onto the box above. The most prominent colours appear as swatches, each with its HEX, RGB and HSL code and the share of the picture it covers. Use the slider to ask for 2 to 12 colours. Click any swatch to copy its HEX code.
Below the swatches, the palette is written out as CSS variables, SCSS variables, a JSON list or a plain list, and you can download it as a PNG strip to share or pin to a mood board.
How the palette is chosen
The colours aren't just the most common pixels. The picture is reduced and its colours are grouped with a method called median cut, working in the Lab colour space, which matches how people see colour differences. The groups are then refined with k-means, so each swatch is the centre of a cluster of similar colours, and the percentage shows how much of the picture falls into that cluster. This is the same palette builder used for indexed colour in the PhotoRiya editor.
A busy photograph needs more colours than a flat illustration. Start with 6 and raise it until the swatches stop looking alike.
What are HEX, RGB and HSL?
HEX (like #FF6A3D) is the web's shorthand for red, green and blue amounts, and works in CSS, Figma and most design tools. RGB lists the same three amounts from 0 to 255. HSL describes a colour as hue, saturation and lightness, which is easier to adjust by hand, for example to make a colour lighter. Each swatch shows all three.
To pick the colour of one exact spot instead, use the image color picker, which is built into this same tool.
Questions people ask
How do I get a color palette from an image?
Drop your image onto the tool above. The dominant colours appear as swatches with HEX, RGB and HSL codes. Use the slider to choose how many colours you want.
How many colors should I extract?
Between 4 and 8 works for most pictures. Use fewer for simple graphics and more for detailed photographs. The slider goes from 2 to 12.
What does the percentage on each swatch mean?
It's the share of the picture whose colour is closest to that swatch, so the biggest swatches are the most prominent colours.
Can I use the palette in CSS or Tailwind?
Yes. Choose CSS to get variables like --color-1, SCSS for $color-1, or JSON for a list of HEX values you can paste into a Tailwind or design-token config.
Why do some palettes look dull?
Palettes show the real colours of the picture, and most photos are made of muted tones. Try a higher number of colours to include the brighter accents.
Is my picture uploaded to a server?
No. The picture is read and analysed inside your browser tab, on your own device. Nothing is uploaded, so you can use it with client work and unreleased designs.
Which image formats can I use?
JPG, PNG, WebP, GIF, TIFF, BMP, TGA and more. Transparent areas are treated as white.
Is it free?
Yes. There is no limit, no watermark and no account. PhotoRiya is open source under the MIT and Apache 2.0 licenses.
More free tools
- Image color picker for the HEX of any pixelPick the HEX, RGB and HSL code of any pixel in an image.
- RGB to CMYK converter with print previewConvert pictures from RGB to CMYK with ICC profiles, and see how the colours will print.
- Image converter to PNG, JPG and WebPConvert TIFF, WebP, BMP, TGA, GIF, ICO, EXR and HDR pictures to PNG, JPG or WebP.