Skip to main content
Tools Star Hub
Image Tools category

Color Picker

Pick a color with the browser color input and copy HEX, RGB or HSL values.

What is Color Picker?

A color picker lets you choose a color visually or from an image, then copy hex, RGB and HSL.

Loading tool…

This tool runs in your browser. Inputs, files and generated values stay on this device. Favorites and recently used tools, if you use them, store only tool names in local storage — never passwords, documents or QR contents. See the privacy policy.

Color Picker — Copy HEX, RGB and HSL — Tools Star Hub

What this tool does

Pick a color with the browser’s color control, or type a hex value, and copy HEX, RGB, and HSL. Designers grabbing one opaque color for CSS use it when they do not need to sample a photo. Alpha is not available, and sampling pixels from an image is the Image Color Analyzer.

How to use

  1. Use the native color input, or type a hex value.
  2. Copy HEX, RGB or HSL.
  3. Reset returns the picker to the default blue.

Examples

  • HEX

    #2563eb is a six-digit hex color: two digits each for red, green and blue.

  • RGB

    The same color is rgb(37, 99, 235).

  • HSL

    HSL describes hue, saturation and lightness. It is useful when you want to lighten or saturate a color.

How it works

HEX is a compact CSS color written in hexadecimal. RGB lists the same channels as decimal numbers from 0 to 255. HSL uses hue (0–360), saturation and lightness. The picker uses the browser’s native color input, so the system color UI appears on phones and desktops. Values are converted locally.

Limitations

The native control supplies an opaque sRGB color. Alpha is not available, and a pixel is not sampled from a photograph. HEX, RGB, and HSL are three writings of that same color.

See the disclaimer for what these tools do not cover.

FAQ

Is the Color Picker free?
Yes. Choosing a color and copying HEX, RGB, or HSL does not require payment or an account.
Does this use a large color-picker library?
No. It uses the browser’s native color input plus hex parsing in this page.
Is my input sent to a server?
No. The color you pick stays in this tab. It is not uploaded and not written to local storage.
What is the difference between HEX, RGB, and HSL?
They describe the same color in different ways. HEX and RGB give red, green, and blue amounts. HSL gives hue, saturation, and lightness, which is easier to adjust by hand.
How do I use a picked color in CSS?
Copy the value and paste it into a CSS property, for example color: #1E90FF; or background: rgb(30, 144, 255);.
Does it work on mobile?
Yes. You can open this page on a phone or tablet. File pickers and downloads use the browser on your device. Large files may be slower on a small phone than on a desktop.

Related tools

Helpful guides

Guide

How to Convert a Hex Color to RGB

Split a hex color into red, green, and blue pairs and convert each pair from base 16 to a number from 0 to 255.

Read guide

Guide

How to Pick a Color and Copy HEX, RGB, or HSL

Choose one opaque color with the browser color control and copy it as HEX, RGB, or HSL.

Read guide

Guide

How to List the Dominant Colors in an Image

Sample a JPG, PNG, or WebP and list 3 to 10 colors with each color's share of the sampled pixels.

Read guide

Guide

How to Check Contrast Between Two Colors

Compare two solid colors and read the WCAG 2 ratio, including AA and AAA for normal and large text.

Read guide

Guide

How to Write a CSS Gradient

Build a linear, radial or conic CSS gradient from at least two color stops and copy the background or gradient text CSS.

Read guide

Guide

How to Write One CSS Box Shadow

Set one offset, blur, spread, color, and opacity, then copy a single box-shadow declaration.

Read guide

Guide

How to Make a Simple Favicon

Draw PNG icons at 16, 32, and 180 pixels. The ICO file holds the 16 and 32 pixel images only.

Read guide