Color Picker Online — Get HEX, RGB & HSL Color Codes Free

Color Format Reference

Different tools and contexts use different color formats. Understanding each one helps you pick the right format for your workflow.

How to Use the Color Picker

1. Open the color spectrum. Click anywhere on the color gradient canvas to select a hue and saturation combination. Drag the point to fine-tune.
2. Adjust the lightness slider. The vertical or horizontal lightness/brightness slider lets you brighten or darken the selected color without changing the hue.
3. Adjust opacity if needed. The alpha slider controls transparency. A value of 1 is fully opaque; 0 is fully transparent.
4. Type a known value. If you already have a HEX or RGB code, type it directly into the input field and the picker will update to reflect that color.
5. Copy your format. Click the copy icon next to any of the output formats — HEX, RGB, HSL — to put it on your clipboard.

HEX vs RGB vs HSL — Which Should You Use?

HEX is the default for static colors

HEX notation (#RRGGBB) is the most widely recognised format in web development. It is compact, universally supported, and accepted by every design tool from Figma to Photoshop to Visual Studio Code. For most static color values in CSS, HEX is the right choice.

HSL is better for programmatic color theming

HSL (Hue, Saturation, Lightness) makes it much easier to create tints, shades, and accessible color variants of a base color. To create a lighter version of a color, you just increase the lightness value. This is why many design systems — including Tailwind CSS — define their color scales in HSL or a similar perceptual model rather than arbitrary HEX values.

OKLCH is the modern choice for perceptual uniformity

OKLCH is a newer CSS color format (supported in all modern browsers as of 2023) that represents colors in a perceptually uniform space. This means equal numerical steps in OKLCH produce equal perceived changes in color — which makes it ideal for generating accessible color ramps programmatically. If you are building a design system in 2024 or later, OKLCH is worth adopting.

Picking Colors From a Brand or Design

If you are trying to match a color from an existing design or image — for example, extracting the exact shade of blue from a company logo — the color picker's hex input is useful for manually entering approximate values. For generating a full palette from a base color, use the color palette generator, which creates complementary, analogous, and triadic variants automatically.

For accessibility, pair your chosen colors with the color contrast checker to verify WCAG AA or AAA compliance before using them for text on backgrounds.

Common Questions

Can I enter a color name like "cornflowerblue"?

CSS named colors (the 140+ standard names like cornflowerblue, tomato, mediumseagreen) can be typed into the input field and the picker will display the corresponding color. It converts the name to its HEX equivalent automatically.

What is the difference between HSL and HSV / HSB?

HSL (Hue, Saturation, Lightness) and HSV/HSB (Hue, Saturation, Value/Brightness) are both cylindrical representations of the RGB color model, but they differ in how they define the central axis. In HSL, pure white is at lightness = 100% and pure black at 0%. In HSV, pure white is at saturation = 0%, value = 100%. CSS uses HSL; many design tools use HSV. The color picker outputs HSL for direct use in CSS.

How do I match a color from an image or screenshot?

Browser developer tools include a built-in eyedropper in their color picker panels (Chrome DevTools, Firefox DevTools). You can also use the OS-level color picker: on Mac, open Digital Color Meter from Spotlight; on Windows, use PowerToys Color Picker or the built-in Paint color picker. Once you have the HEX value, paste it into this tool to convert between formats.