Image Color Palette Extractor

Extract dominant color palettes from images and generate CSS/Tailwind

5 DOMINANT SWATCHES

Extracted Color Palette

#0f172a

rgb(15, 23, 42)

W: 17.85:1

B: 1.18:1

#ec4899

rgb(236, 72, 153)

W: 3.53:1

B: 5.95:1

#8b5cf6

rgb(139, 92, 246)

W: 4.23:1

B: 4.96:1

#06b6d4

rgb(6, 182, 212)

W: 2.43:1

B: 8.65:1

#facc15

rgb(250, 204, 21)

W: 1.53:1

B: 13.71:1

Color Tokens & Theme Variables

:root {
  --palette-color-1: #0f172a;
  --palette-color-2: #ec4899;
  --palette-color-3: #8b5cf6;
  --palette-color-4: #06b6d4;
  --palette-color-5: #facc15;
}

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'palette-1': '#0f172a',
        'palette-2': '#ec4899',
        'palette-3': '#8b5cf6',
        'palette-4': '#06b6d4',
        'palette-5': '#facc15',
      }
    }
  }
}

[
  {
    "hex": "#0f172a",
    "rgb": "rgb(15, 23, 42)",
    "hsl": "hsl(222, 47%, 11%)"
  },
  {
    "hex": "#ec4899",
    "rgb": "rgb(236, 72, 153)",
    "hsl": "hsl(330, 81%, 60%)"
  },
  {
    "hex": "#8b5cf6",
    "rgb": "rgb(139, 92, 246)",
    "hsl": "hsl(258, 90%, 66%)"
  },
  {
    "hex": "#06b6d4",
    "rgb": "rgb(6, 182, 212)",
    "hsl": "hsl(189, 94%, 43%)"
  },
  {
    "hex": "#facc15",
    "rgb": "rgb(250, 204, 21)",
    "hsl": "hsl(48, 96%, 53%)"
  }
]