Color Picker

Pick a color and read its exact HEX, RGB, HSL and HSV values at the same time. Drag the saturation square and the hue slider to land on any shade, add transparency with the alpha control for RGBA and HEX8, and copy any value with one tap. Everything happens in your browser — your color is never uploaded.

What is the Color Picker?

This Color Picker is an interactive tool for choosing any color by eye and reading its exact values in every common format at once. Drag inside the saturation/value square and slide the hue bar to land on the shade you want, and the page instantly shows you the HEX, RGB, HSL and HSV values side by side, plus a separate alpha (opacity) slider. It is built for the moment when you have a color in your head — or roughly on screen — and you need the precise code to paste into CSS, a design file or a config.

How to use it

Drag the marker inside the big saturation/value square to set how vivid and how bright the color is.
Move the hue slider to choose the base color — red, orange, green, blue, and everything in between.
Read the format boxes — HEX, RGB, HSL and HSV — which all update live, and watch the large preview swatch fill with your color.
Slide the alpha control if you need transparency; the RGBA and 8-digit HEX8 values appear so you can copy a semi-transparent color.
Tap the copy button next to any value, then close the tab. One second to the answer and you are gone.

HEX vs RGB vs HSL vs HSV

All four describe the same color in different ways. HEX is a compact six-digit code (like #1E90FF) used everywhere in CSS and design files. RGB lists the red, green and blue channels from 0 to 255, which is what screens actually emit. HSL splits a color into hue, saturation and lightness — perfect when you want to make a color lighter or darker while keeping the same hue. HSV uses hue, saturation and value (brightness) and is the model the picker square itself is built on: the square is saturation across and value up-and-down, while the slider is the hue angle from 0 to 360 degrees. Showing all four means you can copy whichever your project expects without converting by hand.

The alpha channel: RGBA and HEX8

Alpha controls transparency, from fully see-through to fully solid. Internally it is stored from 0 to 1. When you move the alpha slider, the tool outputs an rgba(r, g, b, a) value with the opacity as a decimal, and an 8-digit HEX8 code that bakes the opacity into the final two hex characters — for example a half-transparent sky blue is rgba(30, 144, 255, 0.5) or #1E90FF80. That lets you drop a semi-transparent color straight into your stylesheet.

Examples

A bright sky blue at full opacity: #1E90FF · rgb(30, 144, 255) · hsl(210, 100%, 56%) · hsv(210, 88%, 100%)
A soft coral: #FF6F61 · rgb(255, 111, 97) · hsl(5, 100%, 69%) · hsv(5, 62%, 100%)
The sky blue at 50% opacity: rgba(30, 144, 255, 0.5) · HEX8 #1E90FF80

Common use cases

Front-end developers grabbing the exact HEX or RGBA for a button, border or shadow.
Designers tweaking a brand color and needing the HSL to build consistent lighter/darker variants.
Anyone matching an overlay who needs the RGBA or HEX8 value for a semi-transparent layer.
Quick accents for a slide, chart, game config or spreadsheet cell.

Why use this one

Most color pickers show you HEX and maybe RGB and stop. This one shows HEX, RGB, HSL and HSV together, adds a real alpha slider that outputs both RGBA and 8-digit HEX8, keeps a small recently-picked history, and runs entirely in your browser — your color is never uploaded, there is no account, and the page stays fast and mobile-friendly. This is a from-scratch picker; if you instead want to lift a color out of a photo, use the Color Picker from Image, and to find the nearest human name for a color, try the Color Namer. To convert an existing code, the HEX to RGB Converter turns any HEX into RGB and HSL.

Frequently asked questions

What is the difference between HEX, RGB, HSL and HSV?

They all describe the same color in different ways. HEX is a compact six-digit code used in CSS and design files. RGB lists the red, green and blue channels from 0 to 255. HSL splits a color into hue, saturation and lightness, which is handy for making a color lighter or darker. HSV uses hue, saturation and value (brightness) and matches how most picker squares work. This tool shows all four at once so you can copy whichever your project needs.

What does the alpha or opacity slider do?

Alpha controls transparency, from fully transparent to fully solid. As you move the slider the picker outputs an RGBA value like rgba(30, 144, 255, 0.5) and an eight-digit HEX8 code that bakes the opacity into the last two hex characters, so you can drop a semi-transparent color straight into your CSS.

Is my color sent anywhere?

No. The entire picker runs in your browser using plain JavaScript. Nothing is uploaded, logged or stored on a server, and there is no account to create. Your recently-picked history lives only in the page for the current session.

How is this different from the Color Picker from Image tool?

This page is a from-scratch picker: you choose any color with a saturation square and hue slider. The Color Picker from Image tool instead eyedrops the exact color of a pixel out of a photo you upload. Use this one when you want to design or fine-tune a color, and that one when you want to copy a color you already see in an image.