Pick any color visually and instantly convert between HEX, RGB, HSL, HSV, and CMYK. Copy any format with one click.
#3B82F6
RGB Sliders
59
130
246
Color Formats
HEX
RGB
HSL
HSV
CMYK
CSS
Color History
About Color Picker & Converter
Pick any color using the visual color picker or paste a HEX code, then instantly see it converted to RGB, HSL, HSV, and CMYK formats. Use the RGB sliders for fine-tuned control. Your last 20 picked colors are saved as a history for quick reference.
Color Format Reference
HEX - #RRGGBB used in HTML/CSS · RGB - Red, Green, Blue (0–255) · HSL - Hue, Saturation, Lightness · HSV - Hue, Saturation, Value (used in design apps) · CMYK - Cyan, Magenta, Yellow, Key (print)
Frequently Asked Questions
Both use Hue and Saturation, but the third value differs. HSL uses Lightness (0% = black, 50% = pure color, 100% = white), while HSV uses Value (0% = black, 100% = full brightness). HSL is common in CSS; HSV is used in most graphic design applications like Photoshop and Figma.
RGB is for screens and digital media. CMYK is used in print design, as it represents the four ink colors used in color printing (Cyan, Magenta, Yellow, and Key/Black). If you're preparing designs for a printer, you'll need CMYK values.
Paste your HEX code (with or without the # prefix) into the "Paste HEX to convert" field and click Go. All formats will update instantly.
Every time you pick a new color, it's added to the history swatches at the bottom. Click any swatch to restore that color. The history holds your last 20 colors.
About Color Picker Online — Free Color Code Converter
This free online color picker lets you select any colour visually and instantly get its precise value in HEX, RGB, HSL, and HSB/HSV formats. Click any colour value to copy it to your clipboard, ready to paste into your CSS, design tool, or code. Whether you are a web developer choosing brand colours, a graphic designer working across different applications, or a content creator matching colours between platforms, this colour picker and converter gives you all the format values you need in one place.
Colour in digital design is expressed in multiple incompatible formats depending on the context. Web developers use HEX codes (#ff5733) in CSS and HTML. CSS also natively supports RGB (red, green, blue values on a 0–255 scale) and HSL (hue, saturation, lightness). Design tools like Adobe Photoshop use HSB (hue, saturation, brightness — also called HSV). Video and broadcast use Rec. 709 colour space values. When working across these contexts — designing a component in Figma, implementing it in CSS, and documenting it in a brand style guide — you constantly need to convert between these formats. A colour picker online tool that shows all formats simultaneously eliminates the manual conversion entirely.
How to Use the Color Picker
Click the large colour swatch to open the browser's native colour picker. Select a hue using the colour wheel or slider, then adjust saturation and lightness to find your target colour.
Alternatively, type a known colour value directly into the HEX input field (e.g. #6366f1 or 6366f1) to load a specific colour instantly.
All four colour format values — HEX, RGB, HSL, and HSB — update in real time as you select or type.
Click any format value to copy it to your clipboard, ready to paste anywhere.
Previously used colours appear in the colour history panel for quick reselection.
How the Color Format Conversion Works
The tool uses the browser's native colour input to capture the selected colour as a HEX value, then converts to RGB by parsing the hexadecimal components, and from RGB to HSL and HSB using the standard mathematical conversion formulas. All conversions are lossless within the 8-bit-per-channel colour space used by all four formats. Clicking a colour value triggers the Clipboard API to copy the formatted string.
Color Format Reference
HEX: #RRGGBB — 6 hexadecimal digits representing red, green, blue channels (0–255 each, written as 00–FF). RGB: rgb(R, G, B) — decimal values 0–255 per channel. HSL: hsl(H°, S%, L%) — hue 0–360°, saturation 0–100%, lightness 0–100%. HSB/HSV: hsb(H°, S%, B%) — hue 0–360°, saturation 0–100%, brightness 0–100%.
Tips for Using the Color Picker
Use HEX for CSS static colours: HEX (#rrggbb) is the most widely understood colour format in web development and the default in most design tools. It is compact, copy-pasteable, and supported everywhere that CSS colour values are accepted. Use 3-character shorthand (#rgb) when both digits of each channel are identical — #ff0000 shortens to #f00, #336699 shortens to #369.
Use HSL for design systems and colour palettes: HSL makes systematic colour variations intuitive — you can create a full colour palette by keeping the hue constant and varying only the lightness (e.g. 10%, 20%, 30%... 90% for a 9-step scale). This is why CSS custom property-based design systems like Tailwind CSS, Radix UI, and Shadcn use HSL for their colour token definitions. The colour picker's HSL output is ready to paste directly into these systems.
Use HSB when working in Photoshop or Illustrator: Adobe applications use HSB (Hue, Saturation, Brightness) rather than HSL in their colour panels. Copy the HSB values from this colour picker and enter them directly into Photoshop's colour picker to match a web colour exactly in your design files.
Use the colour history for palette building: When building a colour palette, use the colour picker to select each colour and copy its values. Previously selected colours appear in the history panel, giving you a visual record of the colours you have worked with in the current session. This makes it easy to compare colours side by side and revisit choices without reselecting from scratch.
Match colours from a screenshot: To match a colour from a design file, screenshot, or image, use your operating system's built-in colour sampling tool (Windows Color Picker in PowerToys, macOS Digital Color Meter, or browser extensions like ColorZilla) to get the HEX value of the sampled colour, then type it into this tool's HEX input to get all four format equivalents instantly.
Frequently Asked Questions about Color Picker Online
HSL (Hue, Saturation, Lightness) and HSB/HSV (Hue, Saturation, Brightness/Value) are both cylindrical colour models that represent colours by hue angle and two additional dimensions. The difference is how they define the maximum saturation point: in HSL, a pure saturated hue is at 50% lightness (with 0% and 100% both being grey or white); in HSB, a pure saturated hue is at 100% brightness and 100% saturation. CSS uses HSL; Adobe Photoshop and Illustrator use HSB. This colour picker provides both so you can use the appropriate format for your application.
The colour picker's text input accepts HEX values (with or without the # prefix) but does not accept CSS named colours directly. To work with a named colour, first look up its HEX equivalent — "red" is #ff0000, "dodgerblue" is #1e90ff, "mediumseagreen" is #3cb371. Type the HEX value into the input field to load the colour and see all its format equivalents. A reference list of all 140+ CSS named colour HEX values is widely available online.
All four formats work in modern CSS (Chrome, Firefox, Safari, Edge). HEX (#rrggbb) is the most common and universally supported format for static colour values. RGB (rgb(r, g, b)) is useful when you need to dynamically calculate or interpolate colour values in JavaScript. HSL is recommended for design systems and CSS custom properties because adjusting lightness or saturation is mathematically intuitive. For colours with transparency, use rgba(r, g, b, a) or hsla(h, s%, l%, a) where the alpha value is 0.0 (transparent) to 1.0 (opaque).
The colour picker works with fully opaque colours — the browser's native colour input does not support alpha channel selection. To add transparency to a colour for CSS use, copy the RGB values and manually add the alpha parameter: rgb(99, 102, 241) becomes rgba(99, 102, 241, 0.5) for 50% opacity. Similarly, the HSL value can be converted to HSLA by adding the alpha: hsl(239, 84%, 67%) becomes hsla(239, 84%, 67%, 0.5). The modern CSS color() function also supports alpha across all colour spaces.
Yes — this online colour picker is completely free. No account is required, no app is downloaded, and there are no usage limits. The tool works in any modern browser on desktop, tablet, and smartphone. All colour format conversions happen instantly in your browser with no server round-trip. The colour picker, history panel, and clipboard copy functions are all available without any registration or sign-up process whatsoever.
To convert HEX to RGB: split the 6-digit hex into three 2-digit pairs (RR, GG, BB) and convert each from hexadecimal to decimal. For #6366f1: 63 hex = 99 decimal, 66 hex = 102 decimal, f1 hex = 241 decimal, giving rgb(99, 102, 241). To convert RGB to HEX: convert each decimal value (0–255) to hexadecimal (0–ff) and concatenate. For rgb(255, 87, 51): 255 = ff, 87 = 57, 51 = 33, giving #ff5733. This colour picker automates this conversion instantly so you never need to do it manually.
Yes — the colour picker is mobile-compatible and works on smartphone and tablet browsers. The colour swatch button opens the device's native colour picker on touch, and all format values update in real time. Copy buttons work with the mobile clipboard. The layout adjusts for smaller screens. The tool is tested on iOS Safari and Android Chrome. Note that the appearance of the native colour picker interface varies by device and operating system — iOS and Android each have their own colour selection UI — but the output format values are identical across all platforms.
The colour history panel records each colour you select or type during your current session. As you pick colours, they are added as swatches to the history panel — click any swatch to reload that colour and see all its format values again. The history makes it easy to compare colours, build palettes by selecting several colours in sequence, or return to a previous colour without having to remember its exact HEX value. The history is stored in your browser's session memory and resets when you close or reload the page — it is not saved to local storage between sessions.