Utilities Center

Guide

How to Pick Colors and Extract Hex Codes From Images

Learn how color codes work, how to sample colors from an image, and how to build a palette.

Open the Color Picker & Hex Extractor

A color picker lets you choose a color and read its Hex, RGB, and HSL values, or sample a color directly from any pixel of an uploaded image. It is a daily tool for designers and developers.

How color codes work

Hex codes (#RRGGBB) encode red, green, and blue channels as two-digit hex values from 00 to FF. RGB lists the same channels as decimals from 0 to 255. HSL describes a color by hue (0–360°), saturation, and lightness, which is often more intuitive for creating variations like tints and shades.

Sampling colors from an image

Upload an image and click anywhere to read the exact color of that pixel. This is how designers pull a brand color from a logo or build a palette from a photograph — the colors are guaranteed to match the source.

How to use a color picker

  1. Use the picker control to choose a color, or upload an image and click to sample.
  2. Read the Hex, RGB, and HSL values.
  3. Copy the value you need into your CSS or design tool.

Examples

Sampling the sky in a sunset photo might return #F2A65A, which you can use as an accent color in a design. Converting that hex to HSL (hsl(25, 85%, 66%)) lets you derive a darker shade by lowering lightness to 40%.

When a color picker is useful

  • Choosing brand or UI colors.
  • Extracting a palette from a photo or logo.
  • Converting between Hex, RGB, and HSL.
  • Matching a color seen on screen.

Put it into practice

Use the Color Picker & Hex Extractor right now — free, in your browser, no sign-up required.

Try the Color Picker & Hex Extractor

More guides

Back to all tools

Related free tools

More free online utilities that pair well with this one — same-category tools for the same task, plus handy extras from other categories.