Color picker & hex generator
Pick a color or enter a HEX code to instantly get the equivalent HEX, RGB, and HSL values.
About this tool
HEX, RGB, and HSL all describe the same colours; they differ in how easy they make particular kinds of reasoning. HEX is compact and is what design tools hand you, but #4f46e5 tells you almost nothing about the colour without rendering it. RGB is the same information in decimal, and becomes useful the moment you need an alpha channel. HSL is the one worth understanding: it separates hue, saturation, and lightness into independent axes, so building a colour scale means holding hue and saturation fixed and varying lightness, and finding a complementary colour means rotating the hue by 180 degrees. That is why design systems are almost always expressed in HSL even when they ship as HEX. Modern CSS adds oklch, which fixes HSL's main weakness — equal lightness values do not look equally light across hues, which is why a yellow and a blue at 50% lightness read very differently. This picker converts between HEX, RGB, and HSL simultaneously, updating every field as you change any one of them, and runs entirely in your browser.
- 1
Use the color picker canvas to visually select a color, or type directly into any of the input fields.
- 2
Enter a HEX code, RGB values, or HSL values — all formats update simultaneously.
- 3
Copy the value in whichever format your project needs.
Pick a color from a palette and copy its HEX code for use in CSS or design tools.
Convert an RGB value from a design handoff into HEX or HSL for your stylesheet.
Explore color shades and get the exact format your codebase requires.
HEX to RGB
#FF5733RGB(255, 87, 51)HEX to HSL
#FF5733HSL(11°, 100%, 60%)RGB to HEX
RGB(0, 128, 255)#0080FFA three-digit HEX code expands unexpectedly
Cause: Shorthand HEX duplicates each digit rather than padding with zeros, so #abc means #aabbcc, not #0a0b0c.
Fix: Use six digits when you need an exact value. Shorthand can only express colours where each channel pair is a repeated digit — 4,096 of the 16.7 million possible colours.
Two colours with the same HSL lightness look different in brightness
Cause: HSL lightness is a mathematical midpoint, not a perceptual one. Human vision is far more sensitive to green than to blue, so hsl(60 100% 50%) yellow appears much brighter than hsl(240 100% 50%) blue.
Fix: For palettes that need consistent perceived brightness, use oklch, which is perceptually uniform. For accessibility, test actual contrast ratios rather than trusting lightness values.
The colour looks different in the browser than in the design file
Cause: Colour profile mismatch. Design tools often work in Display P3 or another wide-gamut space, while a plain HEX value in CSS is interpreted as sRGB, so saturated colours shift when they are clamped.
Fix: Export in sRGB for web use, or specify wide-gamut colours explicitly in CSS with color(display-p3 ...) and provide an sRGB fallback.
These answers explain common color picker tasks, expected input formats, and edge cases so both visitors and search engines can understand what this tool does.
What is a HEX color code?
A HEX color code is a six-character representation of a color using hexadecimal digits, prefixed with #. It encodes the red, green, and blue channels as pairs of hex digits, for example #4f46e5.
What is the difference between RGB and HSL?
RGB defines a color by its red, green, and blue channel intensities (0–255). HSL defines a color by hue (0–360°), saturation (0–100%), and lightness (0–100%), which is often more intuitive for adjusting brightness or vividness.
Can I type a HEX code directly?
Yes. Type any valid 6-character HEX code into the input field and the color preview and all other formats will update instantly.
How do I convert an RGB colour to HEX?
Enter the RGB values (0–255 for each channel) into the colour picker by selecting a colour close to yours and fine-tuning it, or type the HEX equivalent directly. The tool shows all three formats simultaneously so you can copy the one you need.
What is a HSL colour value and when should I use it?
HSL stands for Hue, Saturation, and Lightness. It is more intuitive than RGB for making a colour lighter, darker, or more vivid because you adjust a single channel rather than three. It is commonly used in CSS and design systems where colour variations are generated programmatically.