Color Picker & Palette Generator

Color picker: grab any HEX, RGB, or HSL value in seconds

A color picker lets you choose a color visually and instantly read its code in every format you need: HEX like #3B82F6, RGB like rgb(59, 130, 246), or HSL like hsl(217, 91%, 60%). Drag the cursor across the spectrum, slide the hue and opacity bars, and the tool converts your selection into clean values you can paste straight into CSS, a design file, or a config. No signup, no install, and everything runs in your browser so your colors never leave the page.

Designers and developers reach for a color picker constantly: matching a brand color, lightening a hover state, or sampling a tone from a mockup. Because every format updates live, you never convert by hand or wonder whether #FF5733 and rgb(255, 87, 51) are the same shade. They are. If you would rather start from chance than from a swatch, the Random Color Generator hands you fresh values on demand.

How to use the color picker

1. Pick a base color. Click anywhere in the saturation-and-lightness square, then drag the vertical hue slider to move around the color wheel.
2. Fine-tune the value. Type a known code directly into the HEX or RGB field if you already have a target, such as a brand color.
3. Adjust opacity. Use the alpha slider to set transparency, which updates the value to an 8-digit HEX (#3B82F680) or to rgba().
4. Copy the format you need. One click copies HEX, RGB, or HSL to your clipboard.
5. Generate a palette. Let the tool build tints, shades, and complementary swatches around your base so you have a full set, not a single color.

How color formats work and convert

Every on-screen color is ultimately three channels of light: red, green, and blue. The formats below are just different ways of writing the same point in that space. HEX is RGB in base-16, so #FF0000 and rgb(255, 0, 0) are identical. HSL re-describes the color by hue (position on the wheel, 0-360 degrees), saturation (how vivid, 0-100%), and lightness (0-100%), which is far more intuitive when you want a slightly darker or more muted version of the same hue.

To convert HEX to RGB by hand, split the six digits into three pairs and read each pair as a base-16 number: 3B = 59, 82 = 130, F6 = 246. To go the other way, convert each 0-255 channel to a two-digit hex value. The picker does this instantly, but knowing the mechanism helps you debug an off-looking value.

Building a palette from one color

A single swatch rarely ships a design. The reliable move is to fix the hue and walk the lightness up and down to create a tint-and-shade ramp, which is exactly how UI color scales (50 through 900) are built. Keep saturation roughly steady so the family looks related rather than random.

For accent colors, rotate the hue: the complementary color sits 180 degrees away, while triadic colors sit at 120-degree steps. A complement of hsl(217, ...) lands near hsl(37, ...), a warm amber that pairs naturally with the cool blue.

Common use cases

• Matching a brand color by pasting its HEX and pulling related tints for backgrounds and borders.
• Sampling a color from inspiration and converting it to the format your stack expects.
• Checking contrast by comparing a text color against its background before you ship.
• Theming a component library with a consistent 50-900 scale per hue.
• Setting transparent overlays using RGBA or 8-digit HEX for modals and gradients.

Common mistakes

• Mixing up RGB ranges. RGB channels run 0-255, but the alpha in rgba() runs 0-1, and HSL percentages run 0-100. Crossing them produces invalid colors.
• Forgetting the leading hash. CSS needs #3B82F6, not 3B82F6; many parsers silently ignore the value without it.
• Using 3-digit HEX shorthand carelessly. #F00 expands to #FF0000, so only exactly-repeating pairs survive the shorthand.
• Judging contrast by eye. Two colors can look fine on a bright monitor and fail accessibility checks; verify the ratio.
• Building palettes by random nudging. Lock the hue and move lightness in even steps for a coherent ramp.

Tips and related tools

Save your base color in multiple formats so teammates on different stacks can use it directly. When you need data-friendly output, store palettes as structured records and tidy them with the JSON Formatter, inspect deeper structures in the JSON Viewer, or convert a theme file with JSON to XML for systems that expect XML. For more developer utilities, browse the development tools hub. And when inspiration runs dry, spin up something unexpected with the Random Color Generator and refine it here.

Frequently asked questions

What is a color picker? It is a tool that lets you select a color visually and instantly read its HEX, RGB, and HSL codes so you can paste them into CSS, design files, or code.

How do I convert HEX to RGB? Split the six hex digits into three pairs and read each as a base-16 number; for example #3B82F6 becomes rgb(59, 130, 246). The picker converts both directions automatically.

What does the alpha value control? Alpha sets opacity. In rgba() it ranges from 0 (transparent) to 1 (opaque); in 8-digit HEX the final two characters encode the same thing in base-16.

Which format should I use in CSS? HEX is compact and universal, RGB is readable, and HSL makes tints and shades easy. All three are valid, so pick whichever you reason about best.

How do I build a palette from one color? Keep the hue fixed and step the lightness up for tints and down for shades, then rotate the hue 180 degrees for a complementary accent.

Does the tool work offline and keep my colors private? Yes. The color picker runs entirely in your browser, so nothing is uploaded and it keeps working without a connection once loaded.

What is the difference between this and a random color generator? A picker is for choosing a specific, intended color, while the Random Color Generator produces unexpected values you can use as a starting point.

Can I pick a color from an image? The picker works from the spectrum and entered values; to match a screenshot, read the target color's HEX from your design tool and paste it here to generate a full palette.