Color Picker
This page combines two ways of working with colors. Want to pick a color visually? Open the native color wheel provided by your operating system or browser, drag the swatch until you find the shade you want, and instantly see the HEX, RGB and HSL notation appear next to it — or type a HEX code straight into the text field beside it if you already have one on hand (say, from a design file). Need pure text-to-text conversion instead, for example to quickly convert a HEX code from code or a style guide into rgb() syntax for a CSS variable (or the other way around), without opening the color wheel? Use the separate HEX ↔ RGB section further down this page: paste a HEX code on the left (with or without '#', 6 or 3 digits) and see the RGB value instantly, or paste an RGB value on the right (like '255, 87, 51' or 'rgb(255, 87, 51)') and see the HEX code instantly. Everything happens entirely client-side in your browser — nothing is sent to our server, nothing is stored, and no account is required.
What people use this for
#2563EB → rgb(37, 99, 235) → hsl(221, 83%, 53%)#059669 → rgb(5, 150, 105) → hsl(161, 94%, 30%)#DC2626 → rgb(220, 38, 38) → hsl(0, 72%, 51%)#ABC → #AABBCC → rgb(170, 187, 204)
What others think of this tool
No reviews for this tool yet. Yours would be the first.
Do you work with Westcube?
Leave a review on Google tooFrequently asked questions
What's the difference between HEX, RGB and HSL?
They're three ways of describing the exact same color. HEX (for example #2563EB) is a compact hexadecimal notation that's the default in CSS and most design tools — each color component (red, green, blue) is written as a two-digit hexadecimal number from 00 to FF. RGB (for example rgb(37, 99, 235)) writes those same components as decimal numbers from 0 to 255, matching how screens build up color. HSL (hue 0-360°, saturation and lightness, both as percentages) is more intuitive to design with: to make the same color lighter or darker, you only change the lightness value without losing the hue. This page converts effortlessly between all three notations.
Can I type a HEX code myself instead of using the color wheel?
Yes. Next to the visual color wheel picker there's a text field where you can type or paste a HEX code directly (with or without the # sign). As soon as the code is valid, the swatch and color wheel update automatically and you'll immediately see the matching RGB and HSL values. If you only need text-to-text conversion without a color wheel, for instance to check values in bulk, use the separate HEX ↔ RGB section further down this page.
What is the 3-digit HEX shorthand like #ABC?
A shortened notation where each digit is doubled: #ABC is equivalent to #AABBCC. This only works when both digits of a component would be identical (like AA, BB, CC) — so #ABC can't express every possible color, only a limited subset. Both the HEX text field next to the visual picker and the HEX ↔ RGB section automatically detect and expand the shorthand, so you can enter either #ABC or #AABBCC anywhere on this page and get the same RGB value back.
Does this tool also support transparency (RGBA or 8-digit HEX)?
No, this tool deliberately handles only fully opaque colors (6- or 3-digit HEX and 3-value RGB, no alpha channel), both in the color wheel and in the HEX ↔ RGB section. Transparency is usually added separately in CSS via the opacity property or a fourth RGBA value; the color value itself stays the same regardless of transparency, so it isn't needed for the core color-to-color conversion here.
Is the color I pick or enter stored anywhere?
No. Both the visual picking and the text conversion happen entirely locally in your browser, using the standard HTML color picker and plain JavaScript calculations. Nothing is sent to any Westcube server (or anyone else's), nothing is logged, and nothing is retained. Close the tab and your input is gone — unless you copied the value yourself.