Skip to main content

Palette visualizer

See a palette on real artwork before you commit to it: illustrations, your own SVG, or a photo. Colors are matched by lightness, so the lightest color fills the lightest areas and the darkest one draws the shadows and outlines.

Your palette

  • Color 1 · Off White

  • Color 2 · Saffron

  • Color 3 · Terracotta

  • Color 4 · Persian Green

  • Color 5 · Charcoal Blue

Tip: paste a list of hex codes anywhere here to check them all at once.

On illustrations

  • Hills, trees and a sun, in your palette

    Landscape

  • A city skyline at sunset, in your palette

    City

  • A geometric poster of circles and blocks, in your palette

    Poster

  • A desk with a computer, a plant and a framed picture, in your palette

    Interior

  • A sailboat on waves under a setting sun, in your palette

    Seascape

On your photo

The photo's own main colors are swapped for the palette's, keeping its light and texture. Turn "Keep detail" down for a flat, poster-like look.

On your SVG

Every color in the file (fills, strokes, gradients and styles) is replaced by the palette color of the same lightness rank.

Open these colors in the Studio Check their contrast

How the colors are matched

The visualizer sorts the artwork's colors and the palette's colors from light to dark, in OKLab, a color space built to match how people see lightness, and pairs them by rank. Keeping that order is what keeps a picture readable: the background stays the lightest area, outlines stay the darkest, and the shapes in between keep their contrast with each other. The order you list the palette in does not matter.

Photos

For a photo, the visualizer first finds its few main colors, the same way the Studio pulls a palette from an image. It then shifts every pixel by how its nearest main colors move, blending between them so skies and skin keep smooth gradients. The photo is decoded and recolored in your browser; it is never uploaded.

Your own SVG files

Colors written as hex codes or comma-separated rgb() values are recolored wherever they appear: fill and stroke attributes, gradient stops and style sheets. Named colors such as red, hsl() values and currentColor are left alone. Download the result as a new SVG to use in your design tool.

Looking for a palette to try? Browse the palettes and use Visualize on any of them, or generate one in the Studio.