Color Picker
Pick, convert, and copy colors in HEX, RGB, HSL, HSV, and CMYK, instantly and free.
What does this Color Picker do?
This tool lets you pick a color visually and instantly get its value in five different formats. Drag across the saturation and value canvas to choose a shade, fine-tune the hue and transparency with the sliders, or simply type a HEX code you already have. As you adjust any control, the HEX, RGB, CMYK, HSV, and HSL values update together, and each one can be copied with a single click. Your last twelve colors are kept in a recent history strip so you can jump back to a shade you used earlier in the same session.
How to Use This Color Picker?
- Pick a shade on the canvas. Click or drag anywhere on the large saturation and value area to choose how light, dark, or saturated the color should be.
- Adjust the hue. Drag the hue slider to move around the color wheel and change the base color the canvas is built from.
- Set the transparency, if needed. Use the alpha slider to control how opaque or transparent the color is, useful for overlays and semi-transparent UI elements.
- Or type a HEX code directly. Already know the code you want? Type or paste it into the HEX field and every other format updates to match.
- Copy the format you need. Click the copy icon next to HEX, or click directly on the RGB, CMYK, HSV, or HSL card to copy that value to your clipboard.
- Reuse a recent color. Click any swatch in the Recent history strip to load that color back into the picker instantly.
Built-In Features
Saturation & Value Canvas
Click or drag anywhere on the large color field to fine-tune brightness and saturation, with the position marker showing exactly where your current color sits.
Hue & Alpha Sliders
A full hue slider sets the base color, while a separate alpha slider with a checkered transparency background controls opacity from fully solid to fully transparent.
Editable HEX Field
Type or paste any HEX code straight into the input. Valid codes update the whole picker instantly, and an invalid entry is flagged clearly so you can fix it and continue working without interruption.
One-Click Format Copying
HEX, RGB, CMYK, HSV, and HSL values are all shown at once. Click any format card, or the dedicated HEX copy button, to send that value straight to your clipboard.
Random Color Generator
Need inspiration? Click Random Color, or press the R key on your keyboard, to jump to a fresh, well-balanced color combination instantly without touching a single slider.
Recent Color History
The last twelve colors you picked are saved as clickable swatches, so you can compare shades or return to an earlier color without redoing your steps.
Understanding Color Formats: HEX, RGB, HSL, HSV & CMYK
The same color can be written in several different ways depending on where it’s being used. This picker shows all five common formats side by side so you never have to convert them by hand.
| Format | What It Represents | Commonly Used For |
|---|---|---|
| HEX | A six-digit code combining red, green, and blue into one short string | CSS, web design, sharing a color quickly |
| RGB | Red, Green, and Blue light values, each from 0 to 255 | Screens, digital images, canvas and graphics code |
| HSL | Hue, Saturation, and Lightness | Adjusting how light or muted a color is while keeping its hue |
| HSV | Hue, Saturation, and Value (brightness) | Color pickers and design software, since it maps closely to how people choose shades |
| CMYK | Cyan, Magenta, Yellow, and Key (black) ink percentages | Print design such as flyers, packaging, and business cards |
Which Color Format Should You Use?
Picking the right format depends on where the color is going, not on which one looks the nicest. Here’s a quick reference for common projects.
| Project Type | Recommended Format |
|---|---|
| Website or app styling (CSS) | HEX or RGB |
| UI design tools like Figma or Sketch | HSL or HSV |
| Print materials and packaging | CMYK |
| Overlays, badges, or transparent elements | RGB with an alpha value (RGBA) |
| Building a lighter or darker shade of the same color | HSL |
Whichever format your project needs, changing one control in this picker, the canvas, a slider, or the HEX field, updates every other format at the same time, so you’re never stuck converting values manually.
Free HEX to RGB, HSL & CMYK Color Converter
Looking to convert a HEX code into RGB, HSL, HSV, or CMYK without switching between different converter tools? Paste or type the HEX code into the field above and every other format updates automatically in the same view, so there’s no need to search for a separate HEX to RGB converter or work out the math by hand.
It works the other way too. Pick a color visually with the canvas or sliders, and the matching HEX, RGB, CMYK, HSV, and HSL codes are generated for you instantly, ready to copy straight into your project.
Common Reasons to Use a Color Picker
Web & CSS Design
Grab a precise HEX or RGB value for a button, background, or brand color and paste it straight into your stylesheet.
Building a Brand Palette
Fine-tune a primary color and its shades using the saturation and value canvas, then keep track of each one in the recent history strip.
App & UI Prototyping
Test out colors with different opacity levels for overlays, modals, and hover states using the built-in alpha slider.
Preparing for Print
Read off the CMYK value for a color before sending artwork to a printer, so what you see on screen matches what comes out on paper.
Random Color Generator
Need a quick random color for a mockup, a placeholder background, or a bit of design inspiration? Click the Random Color button, or press the R key on your keyboard, and the tool jumps to a new, well-balanced color instantly, complete with its HEX, RGB, CMYK, HSV, and HSL values ready to copy.
Useful Tips
Use the Hex Field for Speed
If you already know the code you want, typing it directly into the HEX field is faster than dragging the sliders to match it.
Check Alpha Before Copying
If transparency matters for your design, set the alpha slider first, since the copied HEX and RGB values will include that alpha channel.
Compare Shades with History
Before settling on a final color, build up a few options and use the Recent swatches to quickly flip between them side by side for easy comparison.
Need a Color From a Photo Instead?
This tool is for choosing colors from scratch. If you want to pick a color that’s already inside an image, our Image Color Picker lets you upload a photo and sample colors straight from it.
Frequently Asked Questions
What is a color picker tool used for?
A color picker lets you choose a color visually and get its value in the format your project needs, such as HEX for CSS or CMYK for print, without guessing or converting numbers by hand.
Is this color picker free to use?
Yes. The tool is completely free and does not require an account or sign-up.
Does this tool support transparency or alpha values?
Yes. A dedicated alpha slider controls opacity, and when transparency is below 100 percent, the copied HEX and RGB values automatically include the alpha channel.
What color formats can I copy from this tool?
You can copy HEX, RGB, CMYK, HSV, and HSL values. Each format is calculated live and displayed at the same time, so you can grab whichever one your project needs.
How do I convert HEX to RGB or HSL?
Type or paste the HEX code into the HEX field. The RGB, CMYK, HSV, and HSL values update automatically, so no manual conversion is needed.
Can I generate a random color?
Yes. Click the Random Color button, or press the R key on your keyboard, to instantly load a new, well-balanced color into the picker.
Does the tool remember colors I’ve used before?
Yes. Your most recent colors, up to twelve, appear as swatches you can click to instantly reload that color, so you can compare or reuse earlier choices.
Can I enter a HEX code manually?
Yes. Type or paste a HEX code directly into the input field and the canvas, sliders, and all other formats update to match it.
What happens if I enter an invalid HEX code?
The input is highlighted so you know the code isn’t valid, and a short notification lets you know the entry needs to be corrected.
Is my color data saved anywhere online?
No. Recent colors are stored only in your own browser on your device. Nothing is sent to or saved on a server.
Does this tool work on mobile devices?
Yes. The layout adjusts for smaller screens and the canvas, sliders, and swatches all respond to touch.
What is the difference between this Color Picker and the Image Color Picker?
This tool is for choosing a brand new color from scratch using the canvas, sliders, or a HEX code. A separate Image Color Picker tool is for sampling colors that already exist inside an uploaded photo.
Can I use CMYK values from this tool for print design?
Yes. The CMYK card shows the cyan, magenta, yellow, and black percentages for your current color, which you can copy and use as a starting point for print work.
Can I use this tool as a HEX to RGB converter?
Yes. Paste any HEX code into the HEX field and the matching RGB, CMYK, HSV, and HSL values appear immediately, so you don’t need a separate converter tool.
Where can I generate a random color online?
Right here. Click the Random Color button, or press R on your keyboard, to generate a new random color along with its HEX, RGB, CMYK, HSV, and HSL values.