Refract

Colour palette from image

Drop in a photo, logo or screenshot to pull out its main colours. Click the image to pick any exact colour, check each swatch for contrast, and export the palette as code.

Runs in your browser · files stay on your device

Settings

    Palette code
    

    



    

    

    How to use the colour palette from image
    

    1. Add an image. Drop in a photo, illustration, logo or screenshot. A sample photo is loaded first.
    2. Choose how many colours. Three to five colours give a tight brand-style palette; eight to twelve capture more of the detail. The bar shows how much of the image each colour covers.
    3. Pick exact colours. Click anywhere on the image to read the exact colour at that point, then copy it or add it to the palette.
    4. Check contrast and export. Each swatch shows its contrast ratio with white and black text. Copy the palette as CSS custom properties, SCSS variables, a Tailwind colour object or JSON, or download it as an image.
    

    How the colours are found
    Refract groups the image’s pixels into clusters of similar colour using k-means clustering, then reports the average colour of each cluster and how many pixels it contains. The grouping happens in OKLab, a colour space built around how people perceive colour, so the results match what you see rather than what the raw numbers say.
    Palettes for real projects
    The most common colours in a photo are often its backgrounds and shadows, not its accent colours. Sort by hue to see the full range, pick out the small vivid details with the eyedropper, and use the contrast scores to decide which colours can carry text. For a complete set of tints and shades from one colour, take it into the palette generator.
    

    Frequently asked questions
    

    Is my image uploaded?
    No. The colours are calculated by your browser and the image never leaves your device.
    Why does the palette change slightly between runs on different images?
    Clustering starts from sample points in the image. Refract uses a fixed starting point, so the same image and settings always give the same palette.
    Can I get colours from a website?
    Take a screenshot of the page and drop it in. The eyedropper reads exact pixel values from the screenshot.
    What do the contrast numbers mean?
    They’re WCAG 2.2 contrast ratios against white and black text. 4.5 or more passes AA for normal text; 3 or more passes for large text and icons.