Online Color Picker

Pick a color with the interactive saturation/lightness picker, paste a color value, or sample colors from an image. The tool instantly converts colors into HEX, RGB, and HSL values for CSS, UI design, branding, and documentation.

Features:

• Interactive Color Picker: Drag across the saturation/lightness square and hue slider to pick a color visually.
• Manual Input: Enter HEX or RGB values and convert them instantly.
• Shades, Tints & Tones: See the base color mixed with black, white, and gray.
• Image Sampling: Upload an image and click a pixel to extract its color.
• Palette Ideas: Generate complementary, analogous, and triadic palettes.
• One-Click Copy: Copy HEX, RGB, HSL, or all values together.

1. Color Formats

HEX is commonly used in CSS and design systems. RGB is useful for screen color values, and HSL makes it easier to reason about hue, saturation, and lightness.

2. Shades, Tints, and Tones

A shade mixes a color with black (darker, more dramatic). A tint mixes it with white (lighter, softer). A tone mixes it with gray (muted, less saturated) while keeping the lightness similar. All three keep the same underlying hue as the base color.

3. Building Better Palettes

Use harmony palettes to find colors that work with your selected base color. Complementary colors add contrast, while analogous colors create a smoother visual relationship.