Color Picker

Choose colors visually, get HEX, RGB, HSL values, generate color palettes, and find color harmonies. Perfect for web design, graphic design, and digital art.

Color Values:

HEX

RGB

HSL

RGBA

Enter Color Code:

Examples: #FF5733, rgb(255, 87, 51), hsl(14, 100%, 60%)

Saved Colors:

No colors saved yet. Click "Save This Color" to add colors here.

Base Color:

Complementary

Analogous

Triadic

Split Complementary

Tetradic

Monochromatic

Generate Color Palette:

Generated Palette:

Popular Color Palettes:

Material Design

Flat UI

Social Media

Pastel

How to Use the Color Picker

Color Picker Tab

Click and drag on the color picker area to select a color.
Use the hue slider to change the base hue of the color picker.
Use the alpha slider to adjust the transparency of the color.
Copy the color values in HEX, RGB, HSL, or RGBA format.
Enter a color code manually in the input field and click "Apply".
Save colors you like by clicking the "Save This Color" button.

Color Harmonies Tab

Select a base color using the color picker or enter a HEX code.
Click "Generate Harmonies" to see different color harmony combinations.
Click on any color in the harmonies to copy its HEX code.

Color Palettes Tab

Select a base color and palette type from the dropdown.
Click "Generate" to create a new color palette.
Click on any color in the palette to copy its HEX code.
Use the "Copy All HEX Codes" button to copy all colors at once.
Browse the popular color palettes for inspiration.

Color Theory Basics

Understanding color theory can help you create more visually appealing designs and artwork. Here are some key concepts:

Color Harmonies Explained

Complementary: Colors opposite each other on the color wheel. They create high contrast and vibrant looks.
Analogous: Colors that are next to each other on the color wheel. They create harmonious, comfortable designs.
Triadic: Three colors equally spaced around the color wheel. They offer strong visual contrast while maintaining harmony.
Split Complementary: A base color plus two colors adjacent to its complement. Less tension than complementary but still with good contrast.
Tetradic: Four colors arranged in two complementary pairs. Rich and varied, but can be overwhelming if not balanced properly.
Monochromatic: Different shades, tones, and tints of a single color. Creates a cohesive and sophisticated look.

Color Models

RGB (Red, Green, Blue): An additive color model used for digital displays. Values range from 0 to 255.
HEX: A hexadecimal notation for RGB colors used in web design. Format: #RRGGBB.
HSL (Hue, Saturation, Lightness): A more intuitive color model. Hue is the color (0-360°), saturation is the intensity (0-100%), and lightness is the brightness (0-100%).
RGBA/HSLA: RGB and HSL with an added alpha channel for transparency (0-1).

All color processing is done locally in your browser. Your color selections are never sent to any server, ensuring your privacy.