Color Picker

What the Color Picker Does

The Color Picker lets you choose a color visually and then hands you the exact code you need. Use the color swatch to open your browser's picker, fine-tune the result with RGB and HSL sliders, and set transparency with the alpha slider. Every change updates the preview and all six output formats at once: HEX, HEX8, RGB, RGBA, HSL, and HSLA.

Each output row has a copy button, so grabbing a value for a stylesheet takes one click. The tool also generates random colors and keeps a history of your recent picks so you can return to a color you chose a minute ago.

How to Use the Color Picker

1. Click the color swatch to open the picker, or type a hex code directly.
2. Adjust the red, green, and blue sliders, or switch to hue, saturation, and lightness for a different feel.
3. Drag the alpha slider to make the color transparent.
4. Copy any format with the button next to it.
5. Click Random Color for inspiration, or click any swatch in the history row to reload it.

Understanding the Output Formats

• HEX: a six digit code such as #6366f1. The default in most design tools and the most compact option.
• HEX8: a hex code with an extra pair of digits for alpha, such as #6366f180, where 80 means 50 percent opacity.
• RGB: decimal red, green, and blue channels from 0 to 255. Familiar from image editors.
• RGBA: RGB with an alpha channel from 0 to 1. The classic way to add transparency in CSS.
• HSL: hue in degrees, saturation, and lightness in percent. Easier to reason about when you want a lighter or more muted version of a color.
• HSLA: HSL with alpha. Useful for hover states and overlay layers.

Need CMYK, HWB, or a named color instead? The Color Converter covers additional formats, and the Color Name Lookup finds the closest CSS name for whatever you pick here.

Working with Transparency

The alpha slider runs from fully transparent at 0 percent to fully opaque at 100 percent. In CSS, prefer rgba() or hsla() over HEX8 when you need to support older browsers, though all modern browsers accept the eight digit hex form. Transparent colors are useful for modal backdrops, image overlays, disabled states, and layered gradients. When you build a transparent overlay, check that text on top of it still passes contrast requirements with the Color Contrast Checker.

Picking Colors for a Palette

A single color rarely exists alone. Once you settle on a base, the Color Scheme Generator builds complementary, analogous, and triadic variations around it. For interface work, keep a small set of colors: one primary, one accent, and two or three neutrals. The HSL sliders are the fastest way to produce hover and active states, because dropping lightness by 8 to 12 percent usually reads as a natural pressed state.

Color History

The history row stores your last 20 colors in your browser's local storage. It survives a page refresh and never leaves your device. If you clear your browser data, the history resets. The history is not part of the shareable URL, so links you share only include the currently selected color and its alpha.