Free Online Color Picker & Converter
Pick colors and convert between HEX, RGB, and HSL formats instantly.
Recent colours
Popular colours
Colour Formats Explained
Colours on screens are created by mixing red, green, and blue light (the RGB additive colour model). Web designers and developers work with three main text representations of that mixture: HEX, RGB, and HSL. All three describe exactly the same colour; the choice between them is a matter of readability and workflow.
When to Use Each Format
- HEX is the most compact and is universally supported in CSS, SVG, and HTML attributes. It is the go-to format for copy-pasting colours from design tools like Figma or Sketch.
- RGB is useful when you need individual channel values — for example when creating colours programmatically or when working with graphics libraries that accept separate R, G, B arguments.
- HSL is the most intuitive for design work. Want a lighter shade of your brand colour? Just increase the L value. Want a less saturated (more muted) version? Lower the S value. The H value stays the same, keeping it recognisably the same hue.
Accessibility: Colour Contrast
When choosing text and background colours, the WCAG 2.1 accessibility guidelines require a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). Pure black on white gives 21:1 — the maximum. Mid-lightness colours (HSL lightness 40–60%) against white often fail to meet contrast requirements, which is a common accessibility pitfall. When in doubt, test your colour combination with a contrast checker.
How to Use Color Picker
-
1
Open the color picker
Click the large color swatch to open the native browser color picker, or type a known HEX code directly into the HEX input field.
-
2
Read the converted values
As soon as you pick a color, the HEX, RGB, and HSL values update automatically in their respective fields.
-
3
Copy any format
Click the copy button next to HEX, RGB, or HSL to copy that format to your clipboard, ready to paste into CSS, Figma, or any design tool.
Frequently Asked Questions
#3b82f6) is a six-digit hexadecimal code — two digits each for red, green, and blue. It is the most common format in web development. RGB (e.g. rgb(59, 130, 246)) expresses the same three channels as decimal numbers from 0 to 255. HSL (e.g. hsl(217, 91%, 60%)) stands for Hue, Saturation, Lightness — it is easier to reason about when you want to make a colour lighter, darker, or more vivid without changing the hue.
#. The colour swatch and all other values update automatically as soon as you type a valid 6-digit code.