Color Picker

Pick Colors from Any Image — Get HEX, RGB & HSL Instantly

Ever looked at a photo, a logo, or a website and thought "I need that exact colour" but had no idea how to get the code for it? That is exactly what this tool is for. Upload any image — a photograph, a screenshot, a brand asset, a piece of artwork — click anywhere on it, and you instantly get the precise HEX, RGB, and HSL values for that pixel.

As you pick colours, they are saved to a palette you can copy individually or export as CSS custom properties in one click. Everything runs in your browser using the Canvas API — no image is ever uploaded to a server, no data is collected, and there is no account required. It is free and completely private.

Whether you are a web developer trying to match a client's brand colours in code, a graphic designer extracting a palette from a mood board, or someone who just wants to know the exact shade of blue in their favourite photo — this tool gives you the answer in seconds.

How to Pick a Color from an Image — Step by Step

1. Upload your image — drag and drop any image onto the upload area above, or click to browse. JPEG, PNG, WebP, and most other common formats are supported. Screenshots work perfectly too.
2. Click anywhere on the image — the tool reads the exact colour of the pixel you clicked and displays the HEX, RGB, and HSL values immediately. A magnified zoom view helps you pinpoint the exact pixel you want.
3. Copy your colour code — click the HEX, RGB, or HSL value to copy it to your clipboard instantly. Paste it straight into your CSS, design software, or anywhere else you need it.
4. Build a colour palette — keep clicking different areas of the image to add more colours to your palette. Up to 12 colours are saved per session. Each one shows a colour swatch alongside all three format values.
5. Export as CSS variables — once your palette is ready, click the CSS export button to get a complete :root block with all your colours as CSS custom properties. Paste it directly into your stylesheet and reference the colours anywhere in your project.
6. Clear and start again — click Clear Palette to reset and pick a fresh set of colours from the same image or a new one.

What Are HEX, RGB, and HSL Colour Codes?

When a colour picker gives you three different codes for the same colour, it can be confusing to know which one to use. Here is what each format actually means and when to reach for it:

HEX — Hexadecimal

HEX is the most widely used colour format on the web. It looks like #FF5733 — a hash symbol followed by six characters that represent the red, green, and blue components of the colour in base-16 (hexadecimal) notation. The first two digits are red, the middle two are green, and the last two are blue.

• Used in HTML, CSS, SVG, and virtually every design tool including Figma, Adobe XD, Sketch, Canva, and Photoshop.
• Short and easy to copy and share as a single string.
• Does not convey intuitive information about the colour — you cannot easily tell from #3A7BD5 whether it is a light or dark shade.
• Use HEX when you are working with web code or sharing a colour code with a designer who uses standard tools.

RGB — Red, Green, Blue

RGB describes a colour by specifying how much red, green, and blue light to mix together. Each value ranges from 0 (none) to 255 (full intensity). For example, rgb(255, 87, 51) is a vivid orange-red. Pure red is rgb(255, 0, 0), pure white is rgb(255, 255, 255), and pure black is rgb(0, 0, 0).

• Used directly in CSS — color: rgb(255, 87, 51);
• Useful in image editing software and anywhere that works with light-based colour mixing.
• Easier to understand than HEX for making manual adjustments — increasing the red value makes the colour more red.
• Also available as RGBA which adds an alpha channel for transparency — for example rgba(255, 87, 51, 0.5) for 50% transparent.

HSL — Hue, Saturation, Lightness

HSL is the most human-friendly colour format because it maps closely to how people naturally describe colours. Hue is the colour itself (0–360 degrees on a colour wheel — 0 is red, 120 is green, 240 is blue). Saturation is how vivid the colour is, from 0% (grey) to 100% (fully saturated). Lightness runs from 0% (black) to 100% (white), with 50% being the pure colour.

• Used in CSS — color: hsl(14, 100%, 60%);
• The best format for creating colour variations — to make a colour lighter, just increase the L value. To desaturate it, reduce S.
• Makes it easy to build harmonious palettes — complementary colours are 180 degrees apart on the hue wheel.
• Increasingly popular in modern design systems and CSS frameworks like Tailwind CSS which use HSL-based colour scales.

Who Uses an Online Color Picker — and Why

The colour picker from image tool is useful in far more situations than most people realise. Here are the most common scenarios where having the exact colour code matters:

• Web developers matching brand colours — a client sends a logo or screenshot and asks you to match it in their website stylesheet. Instead of guessing or asking the client for their brand guide, upload the image, click the colour, and get the HEX code immediately.
• Graphic designers building colour palettes — upload a mood board, photograph, or inspiration image and extract the key colours to form a palette for a design project. The CSS variables export makes it trivial to hand off to a developer.
• Social media creators maintaining visual consistency — if you use consistent brand colours across all your content, the colour picker helps you identify and document those exact values so every piece of content matches.
• Developers identifying colours from screenshots — when you see a UI element in a competitor's app, a design reference, or a web screenshot and need to know the exact colour used. Just screenshot it, upload it, and click.
• Crafters and artists matching paint or thread colours — upload a reference photo and use the RGB values to find the closest match in a physical colour system like Pantone, RAL, or embroidery thread charts.
• Interior designers matching palette from a photo — extract colours from a room photo, fabric swatch image, or product shot to build a cohesive colour scheme for a space.
• Developers working with design tokens — extract all primary, secondary, and accent colours from a design asset and export them directly as CSS variables for use in a design system or component library.

How to Build a Colour Palette from an Image

Picking individual colours is useful, but the real power of this tool is extracting a full palette from a single image. Here is a practical approach to doing it well:

• Start with the dominant colour — click the largest colour region in the image first. This is usually your primary brand or base colour.
• Add the accent colours — look for the most visually striking or contrasting elements in the image and pick those next. These become your accent or highlight colours.
• Pick a neutral — most good palettes include at least one neutral — a near-white, near-black, or grey tone. Find the lightest and darkest areas of the image and pick those too.
• Aim for 4–6 colours in a working palette — a practical design palette typically has one primary, one or two accents, a background neutral, and a text colour. You can pick up to 12 here, but keep it focused.
• Use HSL to create variations — once you have your base HEX or HSL values, you can adjust the lightness in your code to create hover states, disabled states, and tints without picking additional colours.
• Export and document — use the CSS variables export to save your palette in a format that is immediately usable in a stylesheet. Name the variables meaningfully in your code (--color-primary, --color-accent) rather than keeping the generic numbered names.

Tips for Getting Accurate Colour Readings

Colour pickers read the exact pixel value at the point you click, which is not always the "true" colour you are seeing. A few things to keep in mind for the most accurate results:

• Click on flat colour areas, not edges — colour at the edge between two elements is often a blended or anti-aliased pixel that is neither colour exactly. Click in the middle of a flat region for a clean reading.
• Use the zoom view to pick precisely — the magnified zoom view shows individual pixels so you can land exactly where you intend. This is especially useful for picking colours from thin lines, small icons, or text.
• Watch out for JPEG compression — JPEG files use lossy compression that slightly alters pixel colours, especially near edges. If you need the exact brand colour from a logo, use a PNG or SVG version rather than a JPEG.
• Screen screenshots may include colour profiles — colours on screen can look slightly different depending on your monitor's colour profile. For brand-accurate colours, always refer to the original source file rather than a screenshot.
• Photographs have no "true" colour — if you pick a colour from a photo, the reading is the literal pixel value, which is affected by lighting, white balance, and camera processing. This is useful for matching what you see in the image, but may not match a paint, fabric, or physical material exactly.

What Are CSS Variables and Why Are They Useful?

The CSS variables export generates a :root block containing all your picked colours as CSS custom properties. It looks like this:

:root {
  --color-1: #1A2035;
  --color-2: #6C63FF;
  --color-3: #FF6584;
  --color-4: #43D9AD;
  --color-5: #F5F6FA;
}

Once you paste this into your CSS file, you can reference any of these colours anywhere in your stylesheet using var(--color-2) instead of repeating the HEX code. This makes it easy to update your colour scheme globally — change the value in one place and every element using that variable updates automatically.

CSS variables are now supported in all modern browsers including Chrome, Firefox, Safari, and Edge. They are the foundation of most modern design systems and are used in frameworks like Tailwind CSS, Chakra UI, and shadcn/ui. If you are building or maintaining a website or web application, using CSS variables for your colour palette is a best practice worth adopting.

Why Use This Online Color Picker?

• Completely free — no subscription, no credits, no account. Open it and use it.
• No image uploads — your image is processed by your own browser using the Canvas API. Nothing leaves your device.
• Three colour formats at once — HEX, RGB, and HSL are all shown simultaneously for every colour you pick. No switching between modes.
• Palette builder — pick up to 12 colours and see them together as a palette before copying or exporting.
• One-click copy — click any value to copy it to your clipboard instantly. No selecting text, no right-clicking.
• CSS variables export — get a ready-to-paste :root block with all your colours as CSS custom properties.
• Zoom view for precision — the magnified view lets you pick individual pixels accurately, even on small or detailed images.
• Works on any image type — JPEG, PNG, WebP, GIF, screenshots, logos, photos, illustrations — anything.
• Works on mobile — runs in any modern browser on desktop, tablet, or phone with no app installation.

Frequently Asked Questions