Color Family Atlas

Image Color Intake for Recolor

Drag and drop PNG/JPG/WEBP here to extract palette colors

Top colors

Tip: drag an image directly from another browser tab into this dropzone.

Target Palette

#14B8A6

Use HEX/RGB/HSL values separated by spaces or commas (2-12 colors recommended).

#0EA5E9#22C55E#F59E0B#EF4444#8B5CF6

Mapping Mode

Maps dark-to-light source colors onto dark-to-light target colors.

Gradient Variants

Copy Design Code

Palette + Gradient CSS

:root {
  --svg-target-1: #0EA5E9;
  --svg-target-2: #22C55E;
  --svg-target-3: #F59E0B;
  --svg-target-4: #EF4444;
  --svg-target-5: #8B5CF6;
}

.svg-preview-surface {
  background: transparent;
}

Mapping JSON

{
  "sourceName": "recolored-art",
  "mappingMode": "luminance-rank",
  "gradientVariantId": "flat-fills",
  "targetPalette": [
    "#0EA5E9",
    "#22C55E",
    "#F59E0B",
    "#EF4444",
    "#8B5CF6"
  ],
  "mergedAssignments": []
}

Detected Swatches

0 colors detected. Special tokens: none=0, currentColor=0

Upload an SVG to inspect fills, strokes, and style blocks.

Preview

No preview yet. Upload an SVG to start recoloring.

SVG Source

Drag and drop SVG file here

Convert PNG/JPEG/WEBP into .SVG (Beta)

Drag and drop PNG/JPG/WEBP here

Best for logos/flat art. Photos convert into blocky vector tiles by design.