Color Picker

Pick any color, generate variations, mix colors, and create CSS code instantly.

🔒 100% Client-Side - Your colors never leave your browser.

HEX #3B82F6

RGB rgb(59, 130, 246)

HSL hsl(217, 91%, 60%)

CMYK cmyk(76%, 47%, 0%, 4%)

🎨 Color Variations (Tints, Shades, Tones)

Generate lighter, darker, and muted versions of your current color.

☀️ Tints (Lighter - Adding White)

🌑 Shades (Darker - Adding Black)

🌫️ Tones (Muted - Adding Gray)

🔀 Color Mixer

Mix any two colors together in any ratio.

Color 1

Color 2

Ratio: 50% Color 1 / 50% Color 2

← Color 1 Color 2 →

💻 CSS Code Generator

Generate ready-to-use CSS code with your current color.

Intensity

Blur Radius

Box Shadow

Text Shadow

Border

Background with Opacity

📝 Text Preview on Color

See how text looks on your color background. Choose the most readable option.

Font Size

Font Weight

Sample text with white color

Sample text with black color

White Text

Black Text

ℹ️ Color Information

Recent Colors

Why Use Our Color Picker?

The most advanced color picker with unique features for designers and developers.

🎨

4 Color Formats

Get HEX, RGB, HSL, and CMYK values instantly. All formats update in real-time as you pick colors.

🌈

Color Variations

Generate tints (lighter), shades (darker), and tones (muted) automatically from your base color.

🔀

Color Mixer

Mix any two colors in any ratio with a visual slider. See the result in real-time and copy it.

💻

CSS Generator

Create ready-to-use CSS code for box-shadow, text-shadow, border, and background with adjustable intensity.

📝

Text Preview

See how white and black text look on your color. Choose the most readable option for accessibility.

ℹ️

Color Info

Get detailed color information including temperature, mood, saturation level, and hue name.

Frequently Asked Questions

What are color tints, shades, and tones? +

Tints are lighter versions (adding white), shades are darker versions (adding black), and tones are muted versions (adding gray) of your base color. The Variations tab shows all three automatically.

How do I mix two colors together? +

In the Color Mixer tab, select any two colors and adjust the ratio slider from 0% to 100%. The tool shows the mixed color in real-time and you can copy the result.

Can I generate CSS code from my color? +

Yes! The CSS Generator tab creates ready-to-use code for box-shadow, text-shadow, border, and background with your selected color. Adjust intensity and copy the code.

How do I preview text on my color? +

The Text Preview tab shows sample text on your color background. You can adjust font size, weight, and see both light and dark text options to choose the most readable one.

What color formats are supported? +

The tool supports HEX (#RRGGBB), RGB (rgb(r,g,b)), HSL (hsl(h,s%,l%)), and CMYK (cmyk(c%,m%,y%,k%)). All formats update in real-time as you pick colors.

Are my picked colors saved? +

Yes. Your last 10 colors are saved in browser history (localStorage). Click any color in the history strip to reuse it. It persists between visits on the same browser.

Can I share my color with others? +

Yes! Click the Share button to generate a unique URL containing your color. Anyone opening this link will see the exact same color.

Is this tool free and private? +

Yes, 100% free with no signup. All processing happens in your browser - your colors never leave your device.