Color Palette Picker

How to Use the Color Palette Picker

The picker has two interactive areas. The large gradient box controls saturation and brightness for the current hue. Moving left makes the color less saturated (closer to gray or white), moving right increases saturation toward the pure hue. Moving up makes the color brighter, moving down makes it darker toward black. The rainbow bar below controls the base hue: red at the left edge, cycling through orange, yellow, green, cyan, blue, and violet back to red at the right edge.

Click anywhere in either area and the side panel updates instantly with a large color swatch and three code formats. Each code has a Copy button that sends the value to your clipboard for pasting into CSS, design tools, or documentation. The initial color is a medium blue, and you can reach any visible color by combining the hue bar with the saturation and brightness gradient.

Understanding the Three Color Formats

HEX notation like #3B82F6 is the most compact format. It encodes red, green, and blue as two hexadecimal digits each, giving 16.7 million possible colors. HEX is the standard in CSS, HTML attributes, SVG fills, and most design tools. RGB notation like rgb(59, 130, 246) uses decimal values from 0 to 255 for each channel. It is easier to read and modify programmatically than HEX. HSL notation like hsl(217, 80%, 55%) describes color as hue (position on the color wheel from 0 to 360 degrees), saturation (how vivid the color is from 0% gray to 100% pure), and lightness (how bright from 0% black to 100% white). HSL is the most intuitive for manual adjustments because each parameter maps to a distinct visual property.

Choosing Colors for Design Systems

Professional color systems typically define a primary color, a secondary color, a neutral gray scale, and an accent for interactive elements. Start by picking your primary hue on the bar, then use the gradient to find a shade that works on both light and dark backgrounds. From that base, you can generate lighter and darker variants by adjusting only the lightness in HSL. Many design systems define colors as HSL custom properties specifically because lightness scales are linear and predictable, making it easy to create consistent shade ramps from 50 to 950.

Accessibility and Contrast

Picking a color that looks good is only half the job. The color must also provide sufficient contrast when used as a background behind text or as text on a background. WCAG requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. After picking a color here, use the companion Color Converter tool to check its contrast ratio against white and black text and verify WCAG compliance before committing to your design.

From Picker to Production

Once you copy a color code, paste it directly into your CSS stylesheet, Tailwind configuration, Figma color tokens, or email template. HEX codes work everywhere, including SVG attributes and image editors. HSL is the best choice for CSS custom properties because you can define hue and saturation once and create an entire shade scale by varying only lightness. This approach powers frameworks like Tailwind CSS, where each color has shades from 50 through 950 generated from a single base hue.

Frequently Asked Questions

How does the picker work?

The gradient box controls saturation (left-right) and brightness (top-bottom). The rainbow bar controls hue. Click either area to pick a color and see its codes.

What formats are shown?

HEX, RGB, and HSL. Each has a Copy button. All are CSS-ready.

Can I pick exact shades?

Click precisely on the gradient for fine control. For exact numeric values, use the Color Converter tool to type in specific codes.

Is this useful for web design?

Yes. Copy codes directly into CSS, Tailwind configs, or design tools. HSL is especially useful for generating shade scales.

Does it work on mobile?

Yes. Tap anywhere on the gradient or hue bar to pick a color.