Get Hex Codes from an Image

Updated April 17, 2026

A hex code is a 6-digit hexadecimal representation of a color (e.g. #3B82F6) used in CSS, design tools, and every major programming language. PhotoTones is a free hex code picker from image that returns up to 12 ready-to-paste hex values per photo — processed entirely in your browser.

Pull Hex Codes in 3 Steps

1. Go to phototones.com
2. Upload any JPG, PNG, WebP, or other image file
3. Click "Generate Color Palette" — click any swatch to copy its hex, or use "Copy All HEX" for the full set

Use the Hex Codes in Your Workflow

In CSS

:root {
  --brand-vibrant: #3B82F6;
  --brand-dark: #1E3A8A;
  --brand-light: #DBEAFE;
  --brand-muted: #64748B;
}

.button {
  background: var(--brand-vibrant);
  color: #ffffff;
}

In Tailwind CSS

PhotoTones Pro exports a ready-to-paste tailwind.config.js snippet:

module.exports = {
  theme: {
    extend: {
      colors: {
        'palette-vibrant': '#3B82F6',
        'palette-dark-vibrant': '#1E3A8A',
        'palette-light-vibrant': '#DBEAFE',
        'palette-muted': '#64748B'
      }
    }
  }
}

In Figma / Sketch

Hex codes paste directly into the color field of any fill or stroke. For Figma specifically, paste the hex into the color picker's hex input — no leading # needed.

In SCSS

$palette-vibrant: #3B82F6;
$palette-dark-vibrant: #1E3A8A;
$palette-light-vibrant: #DBEAFE;
$palette-muted: #64748B;

Converting Hex to Other Formats

PhotoTones also returns RGB and HSL for every color, so you can copy whichever format your tool expects:

• Hex: #3B82F6 — used in CSS, HTML, Figma, Photoshop, virtually all design tools
• RGB: rgb(59, 130, 246) — useful when you need alpha compositing via rgba()
• HSL: hsl(217, 91%, 60%) — ideal for programmatically generating tints and shades in a design system

Hex Code FAQ