Color Picker & Converter
Pick or paste. Hex, RGB, HSL all sync. Local only.
What this tool does
Picks a color from a visual swatch and converts between hex, RGB, and HSL
representations live. Edit any field and the others update. Hex accepts the
6-digit shorthand (#3a5fcd) or 3-digit (#36c). RGB
accepts rgb(58, 95, 205) form or comma-separated numbers. HSL accepts
hsl(222, 58%, 52%) form. The swatch on the left previews the current
color. Everything is local; nothing is uploaded.
How to use it
Click the color picker to choose a color visually, or type a value into any of the three text fields. The swatch and the other two fields update as you type. Press Copy next to any field to put that representation on your clipboard, ready to paste into CSS.
Common use cases
- Translating a hex color from a Figma file or a brand guide into the rgb() form a CSS variable expects.
- Sampling a color from a screenshot or design comp and copying it into code.
- Adjusting hue, saturation, or lightness numerically by editing the HSL field.
- Converting between sibling colors (e.g., a base color and its hover-state shifted by a few percent of lightness).
- Verifying that a 3-digit shorthand expands to the right 6-digit value.
Common pitfalls
- Alpha channel. This tool handles fully opaque colors only.
For
rgba()andhsla()with transparency, the alpha is a separate concern. Most CSS use cases keep alpha out of the base color value and apply it separately. - Color spaces. All conversion is done in sRGB, which is what browsers and most monitors use by default. If you are working with a wider gamut (Display P3, Rec. 2020), the numeric values do not transfer directly.
- HSL is perceptual but not uniform. Two colors with the same HSL lightness can appear visibly different in brightness because human vision is not uniform across hues. For perceptually uniform work, look at OKLCH (a newer CSS color space).
Frequently asked questions
- What is the difference between hex, RGB, and HSL?
- Hex is a compact 6-digit form (#RRGGBB) where each pair is one channel in hexadecimal. RGB names the same channels as 0-255 decimals. HSL describes color by Hue (0-360 degrees), Saturation (0-100%), and Lightness (0-100%). All three address the same sRGB color space; HSL is just easier to reason about for adjustments like "make this redder" or "lighten this by 5%."
- Why does a hex code look slightly different on different screens?
- A hex code specifies sRGB values, but the rendered color depends on the screen color profile, brightness, calibration, and ambient light. The same #2563eb looks different on a phone, a laptop, and a printed page. For brand-critical color accuracy, calibrate your monitor and verify across multiple devices.
- Does this tool support alpha (transparency)?
- Not currently. The picker handles fully opaque colors. For rgba() and hsla() with transparency, the alpha channel is a separate concern that most CSS use cases handle independently from the base color value.
- What is OKLCH and why might I want it instead of HSL?
- OKLCH is a newer color space designed for perceptual uniformity, meaning two colors with the same lightness value actually look equally bright to the human eye. HSL fails this test; pure yellow at 50% lightness looks far brighter than pure blue at 50%. OKLCH is increasingly supported in CSS for design systems that need consistent perceived brightness.
- How do I convert hex to RGB in code?
- Parse the hex string into three pairs of two hex digits, then convert each pair from base 16 to base 10. In JavaScript: parseInt(hex.slice(1,3),16), parseInt(hex.slice(3,5),16), parseInt(hex.slice(5,7),16). Browsers also accept hex directly in CSS, so you usually do not need to convert; only do this when you need integer channel values for canvas or computation.
- Why do some hex codes have only 3 digits?
- Three-digit hex (e.g., #36c) is a shorthand where each digit is doubled to form the full six-digit version (#3366cc). The shorthand only works when each pair has matching digits. A color like #2563eb cannot be shortened.
Cite this tool
For academic, journalistic, or technical references. Pick a format:
Citations use 2026 as the publication year. Access date is left as a fillable placeholder where the citation style expects one.