Color Picker & Converter
Pick colors and convert between HEX and RGB formats.
Click circle to pick
About HEX and RGB colors
Colours on the web are most commonly written in hexadecimal (#ff8800) or as RGB triples (rgb(255, 136, 0)). Hex is compact and historically what designers paste into stylesheets; RGB makes the individual channel values explicit, which is handy when you are scripting colour manipulation or comparing two values channel by channel.
This picker uses your browser's native colour-picker dialog so you can choose a colour visually, then displays the equivalent HEX and RGB notation side-by-side. Pasting a hex value directly into the HEX field updates the picker too. Conversion happens in your browser — nothing is sent to a server.
How to use
- Click the round colour swatch to open your browser's native colour picker.
- Choose a colour visually, or type a HEX value (e.g. #FF8800) directly into the HEX field.
- The matching RGB triple updates automatically.
- Use the copy buttons next to either field to copy the value to your clipboard.
Common use cases
- Converting a designer-supplied hex colour to RGB for a canvas or SVG fill.
- Picking a flat colour for a button or chart series.
- Reading off the RGB equivalent of a brand hex code.
- Quickly previewing a hex colour without opening a heavy design tool.
Frequently asked questions
Which color format should I use in CSS?
Hex is the most compact for solid colours and is supported everywhere. Use rgb() or rgba() when you need to set alpha (transparency) or want explicit channel values for scripted manipulation.
How does HEX map to RGB?
A six-digit hex code is three pairs of two hex digits, one per channel. #FF8800 is FF (255) red, 88 (136) green, 00 (0) blue. The picker performs that base-16 to base-10 conversion for you.
Does this support HSL, HWB or OKLCH?
Not yet — only HEX and RGB. Support for HSL and OKLCH is on the roadmap. For now, browser DevTools and tools like coolors.co handle those formats.
Is the colour picker dialog the same on every browser?
No — the visual style of the picker is provided by your browser and operating system. Chrome, Firefox and Safari each render it slightly differently, but the values they return are identical.
Related developer tools
Advertisement