Online Color Picker
Pick a color visually and get its HEX, RGB and HSL codes in one place.
This online color picker lets you choose a color by eye, dragging through a saturation field and a hue slider, and gives you the code for it in every common format at once: HEX for CSS, RGB for scripts and canvas work, HSL when you want to reason about lightness and saturation.
It is the fastest way to go from 'roughly this blue' to an exact value you can use. Designers use it to fine-tune a shade before committing it to a palette; developers use it to grab a quick accent color without opening a design app; anyone writing HTML or a presentation can find a code without guessing.
The picker runs entirely in your browser. There is nothing to install and no account to create, and your choices are not sent anywhere. Paste in an existing HEX code to load a color and adjust from there, which is handy for creating lighter or darker variants of a brand color.
How to use the color picker
- Drag the hue slider to choose the base color family.
- Click or drag inside the shade area to set saturation and brightness.
- Fine-tune by editing the HEX, RGB or HSL values directly if you need a precise target.
- Copy the format you need with its copy button.
- Paste an existing hex code into the input at any time to start from a known color.
What this color picker does
The picker lets you choose a color by eye, dragging through a saturation-and-brightness field and a hue slider, and reports that exact color in every common format at once: HEX, RGB and HSL. Instead of guessing at codes, you land on the shade visually and copy whichever notation your project needs.
It works in both directions. Paste an existing HEX code and the picker jumps to that color so you can adjust from a known starting point, which is the fast way to build a lighter tint or darker shade of a brand color without leaving the page. Everything runs in your browser with nothing to install.
HEX, RGB or HSL: which code should you copy?
They all describe the same color. HEX is the compact standard for stylesheets and design tokens. RGB is what canvas APIs and many libraries expect, and rgba() gives you easy transparency. HSL is the most human-friendly for adjustments: keep hue fixed and change lightness to build a consistent ramp of shades.
Small caveat: colors can render slightly differently across screens because monitors vary in calibration. The code is exact; the glass it is displayed on is not.
How the picker maps to real values
The two controls map directly onto the HSL model. The hue slider walks the color wheel from 0 to 360 degrees, while the square field sets saturation on one axis and brightness on the other. That is why HSL often feels the most intuitive to steer: the interface is essentially a visual HSL editor.
Under the hood every position corresponds to precise sRGB values, so the HEX and RGB outputs are the exact translation of where you dropped the cursor. Move one HSL number and the HEX and RGB update in lockstep, because all three are notations for the same underlying color.
Everyday uses
Designers reach for a picker to fine-tune a shade before committing it to a palette, or to derive tints and shades that share a hue for a consistent UI. Developers use it to grab a quick accent color without opening a full design app, then paste the HEX straight into CSS.
It is equally useful outside of code. Anyone building a slide deck, styling an email, choosing a chart color or picking a background for a document can find an exact value here rather than settling for a rough named color.
Building palettes and variants
A reliable way to create a color ramp is to lock the hue and saturation and step only the lightness in HSL: same hue at 90%, 70%, 50% and 30% lightness gives a coherent set of shades that look like they belong together. The picker makes this easy because you can read and edit the HSL numbers directly.
For accent or complementary colors, rotate the hue slider by a fixed amount, 30 degrees for an analogous color or 180 for a complementary one, while holding saturation and lightness steady. That keeps the family visually balanced instead of a random collection of colors.
Picking accessible colors
Choosing a color is only half the job; it also has to be readable. Accessibility guidelines ask for a contrast ratio of at least 4.5:1 between normal text and its background, and 3:1 for large text. HSL lightness is a handy lever here: darkening or lightening a chosen hue is usually enough to clear the threshold without abandoning the color.
Because the picker gives you exact RGB values, you can drop them straight into a contrast checker to verify a pairing. When a color is borderline, nudge lightness in the picker and re-test rather than reaching for a completely different hue.
Related color tools
If you already have fixed codes to translate rather than a color to choose, the dedicated HEX to RGB and RGB to HEX converters do that single job with exact, lossless math and a live preview.
Once you have your colors, the CSS gradient generator blends them into copy-ready linear or radial backgrounds. All of these tools run locally in your browser, so your color choices never leave your machine.
Frequently asked questions
Is this color picker free?
Yes, completely free with no sign-up and no limits. Pick and copy as many colors as you like.
Can I pick a color from an image or my screen?
This tool picks from a palette rather than from images. To sample a pixel from your screen, use your browser's dev tools eyedropper or an OS utility, then paste the resulting code here to fine-tune it and convert between formats.
What is the difference between HEX and HSL?
HEX encodes red, green and blue directly; HSL describes hue, saturation and lightness. HSL is easier for humans: 'same hue, 10% lighter' is one number change in HSL but an opaque change in HEX.
Is anything I pick tracked or uploaded?
No. The picker is plain client-side JavaScript. Your color choices never leave your browser.
Does it work on touch screens?
Yes. The hue slider and shade area respond to touch, so it works on iPhone, Android and tablets as well as with a mouse.
Why does the color look slightly different on another screen?
The code is exact, but monitors vary in calibration, brightness and color profile, so the same HEX value can appear a touch different from one display to another. For color-critical work, check your design on more than one screen and, if possible, a calibrated one.