Color Tools
What Is a Color Picker?
A color picker is a tool that lets you select a color visually and get its code. You drag across a canvas, adjust a hue slider, and walk away with the HEX, RGB, or HSL value you need — ready to paste into CSS, a design tool, or anywhere else that takes a color code.
How a color picker works
Most color pickers use the HSV model internally. HSV separates color into three things: the hue (which slice of the spectrum — red, orange, yellow, green, blue, purple), the saturation (how vivid or washed-out), and the value (how bright or dark). This makes picking intuitive. You drag the hue slider until you're in the right neighborhood, then drag the canvas to dial in exactly the shade you want.
The canvas itself is a 2D gradient. Left to right: fully desaturated (white) to full saturation (pure hue). Top to bottom: full brightness to pure black. So the top-right corner is the most vivid version of any hue, the bottom is always black, and the top-left is always white.
The three color formats
#1C60F6CSS, HTML, design tools, brand guidelines. The default format everywhere on the web.
rgb(28, 96, 246)Image editors (Photoshop, GIMP), programming libraries (Canvas API, Three.js), and CSS when you need rgba() for opacity.
hsl(217, 91%, 54%)CSS when you want to programmatically adjust lightness or saturation — useful for hover states, color scales, and theming.
When you actually need a color picker
You're building a website and need a button color that matches your logo — but you only have the logo file, not the hex code. You open a color picker, match the color visually on the canvas, and copy the hex.
You're writing CSS and need a shade slightly lighter than your current background. You enter the existing hex, look at the HSL output, then nudge the lightness value up by 5. Done.
You're building a dark mode and need to know what rgb(28, 96, 246) looks like before committing. You enter the values in the picker, see the preview swatch, confirm it's right.
Pick a color. Get the code.
Drag the canvas, copy HEX, RGB, or HSL. Everything runs in your browser.
Color Picker →Frequently asked questions
What does a color picker do?
A color picker lets you select a color visually — by dragging across a canvas or entering a value — and gives you back the color code in whatever format you need: HEX, RGB, or HSL. You use one whenever you need to know the exact code for a color you can see but can't type from memory.
What is the HSV canvas in a color picker?
HSV stands for Hue, Saturation, Value. In an HSV color picker, the hue slider controls which part of the color spectrum you're in (red, green, blue, etc.). The canvas then lets you pick saturation (how vivid the color is, left to right) and value (how bright or dark it is, top to bottom). It's the most intuitive way to pick colors visually because you separate the hue from everything else.
What is HEX in a color picker?
HEX is the six-character code used in CSS and HTML — like #1C60F6. Each pair of characters represents one color channel in hexadecimal: the first two are red, the next two are green, the last two are blue. It's the format you'd paste directly into a stylesheet or a design tool's color input.
What is RGB in a color picker?
RGB gives you three numbers — red, green, blue — each between 0 and 255. The same color as #1C60F6 in RGB is rgb(28, 96, 246). You'd use RGB when working in Photoshop, GIMP, or a programming library like Three.js or Canvas API that takes numeric color values. The rgba() variant adds an opacity channel.
What is HSL in a color picker?
HSL stands for Hue, Saturation, Lightness. It looks like hsl(217, 91%, 54%). The advantage over HEX and RGB is that it's easier to adjust programmatically — if you want a slightly lighter version of a color in CSS, you just increase the third number. It's useful for creating color scales, hover states, and themes without reaching for a color picker every time.
Does a color picker work in the browser without installing anything?
Yes. A browser-based color picker like this one runs entirely in your browser using the HTML Canvas API and JavaScript. Nothing is uploaded to a server. You don't need to install Photoshop, Figma, or any design tool just to grab a color code.