Color Picker
Free online color picker. Pick any color and copy its HEX, RGB, and HSL values — perfect for designers, developers, and brand work.
Quick answer
Colors translate between three formats: HEX (#RRGGBB), RGB (red/green/blue 0-255), and HSL (hue 0-359°, saturation/lightness 0-100%). Pick one, copy any. HSL is best for tweaking shades because hue spins separately from lightness.
Color Picker & Converter
How it works
Generates random colors or lets you pick a specific one, then displays the value in HEX (#RRGGBB), RGB (rgb(255,128,0)), and HSL (hsl(30,100%,50%)) formats. All three are common in CSS and design tools.
When to use it
Use this when designing a website, picking accent colors for a brand, finding a color you like to copy from a screenshot, generating random palettes for art projects, or converting between color formats.
Common mistakes
Picking colors with poor contrast against their background. Red text on a blue background may look fine on your monitor but fail accessibility standards. Always check contrast ratios (WCAG AA = 4.5:1 minimum).
How the color picker works
The picker presents a 2D color field (saturation × lightness) plus a hue slider. The selected pixel's RGB values are computed and converted to HEX (two hex digits per channel) and HSL (hue from RGB, saturation and lightness from RGB). All three representations refer to the same color in different coordinate systems. Copy buttons place each format on the clipboard for use in CSS, design tools, or code.
When to use it
Picking brand colors and converting between formats your tools require. Generating CSS color values for web designs. Building tints and shades by adjusting only the L (lightness) channel of an HSL value while keeping H and S fixed. Sampling a color from a screenshot or design (use the browser's eyedropper if available). Building accessible color palettes — tools like contrast checkers expect HEX or RGB input.
Common mistakes
- Mixing RGB and HSL in the same color stack. CSS supports both, but a stylesheet that switches notation between values is harder to maintain. Pick one and stick with it (HSL is generally easier for tweaking).
- Forgetting alpha. Modern CSS supports rgba() and hsla() with a fourth alpha channel for transparency. The picker shows opaque colors by default — add the alpha manually if you need transparency.
- Picking colors without testing contrast. Pretty colors don't matter if text on them is unreadable. Run any color pair through a WCAG contrast checker before shipping it as text-on-background.
Frequently asked questions
What's the difference between RGB and HSL?
Both describe the same colors in different coordinate systems. RGB uses red/green/blue channels — close to how monitors render. HSL uses hue (color), saturation (intensity), and lightness — close to how humans describe colors. HSL is better for generating tints/shades programmatically.
How do I convert HEX to RGB?
Each pair of hex digits is one decimal channel. #FF8800 = R 255 (FF), G 136 (88), B 0 (00). The picker above does this automatically — paste a HEX value, see RGB and HSL alongside.
Can I generate a color palette?
The picker shows a single color at a time. For palette generation, look at established palette generators that pick complementary, analogous, or triadic schemes from a base color — most use the HSL hue wheel to find harmonious neighbors.