FreeToolsWorld

Color Picker

Pick a colour and read it as HEX, RGB and HSL.

Color Tools Free, no sign-up Runs in your browser

Three, six or eight digits, with or without the leading hash.

Colour values

Tints and shades

Select any swatch to continue from that colour.

Text contrast

About the Color Picker

Color Picker lets you choose a colour visually and gives you its value in the three formats CSS understands. HEX is the compact six-digit form used in most stylesheets. RGB describes the same colour as red, green and blue channels, which is easier to adjust numerically. HSL describes it as hue, saturation and lightness, which is the format to reach for when you want a lighter or more muted version of the same colour.

A large preview shows the colour at a usable size, because a small swatch is misleading. Below it, a row of tints and shades gives you a ready-made scale built from the same hue, which is how most interface palettes are constructed: one base colour, lightened and darkened in steps.

The tool also reports contrast against white and black text with the corresponding accessibility rating, so you can tell at a glance whether a colour is usable for text or should be kept for backgrounds and decoration.

How to use the Color Picker

  1. Choose a colourUse the colour well to open your system picker, or type a HEX value directly.
  2. Read the three formatsHEX, RGB and HSL values update together, each with its own copy button.
  3. Explore tints and shadesClick any swatch in the scale to make it the new base colour.
  4. Check contrastThe contrast panel shows whether white or black text is readable on your colour.

Features

  • Native colour picker with a large live preview
  • HEX, RGB and HSL values with individual copy buttons
  • Accepts a typed HEX value as input
  • Generated tint and shade scale
  • Contrast ratios against white and black with pass or fail ratings
  • Click any swatch to continue from it

Who uses this tool

The color picker is used by writers, developers, students, marketers and anyone else who needs the job done once without installing software. Common cases include:

  • Choosing a brand colour and recording it in every format
  • Building a tint and shade scale for a design system
  • Finding a readable text colour for a coloured background
  • Matching a colour seen in a mockup
  • Converting a colour between formats while designing

Frequently asked questions

Which format should I use in my CSS?

All three work everywhere. HEX is compact and familiar. RGB is convenient when you need an alpha channel. HSL is the easiest to reason about, because changing one number gives you a lighter, darker or less saturated version of the same colour.

How are the tints and shades generated?

The base colour is converted to HSL and its lightness is stepped up toward white and down toward black while hue and saturation stay fixed. That keeps the whole scale visually related to the original.

What does the contrast ratio tell me?

It measures the difference in relative luminance between two colours. Accessibility guidance asks for at least 4.5 to 1 for normal text and 3 to 1 for large text, so the rating shows whether your colour clears those thresholds.

Why does the same colour look different on another screen?

Displays vary in calibration, brightness and colour gamut. The value is exact; the appearance is not. For print work, a colour defined in RGB will also need converting to a print colour space.

Can I pick a colour from an image?

Not in this tool. Some browsers include a system eyedropper in the colour picker dialog, which can sample from anywhere on your screen when available.

Does the tool save my colours?

No. Nothing is stored or uploaded. Copy the values you want to keep before leaving the page.

If the color picker is not quite what you need, these other free tools solve closely related problems.

HEX to RGB Converter

Turn any HEX code into RGB and HSL values, with alpha support.

Color Tools Use tool

RGB to HEX Converter

Enter R, G and B values and get the matching HEX and HSL colour.

Color Tools Use tool

Image Compressor

Compress and resize JPEG, PNG and WebP images privately in your browser.

Image Tools Use tool

QR Code Generator

Generate a QR code for any link or text and download it as a PNG or SVG.

Utility Tools Use tool

JSON Formatter

Pretty-print and validate JSON, with the exact line and column of any error.

Developer Tools Use tool