Design & Color Tools
100% Client-Side 100% client-side privacy. All calculations and styling execute locally in your browser with zero server uploads.

Color Picker

Pick, inspect, and copy HEX, RGB, HSL, and CMYK color codes instantly

🎛️ Color Studio•Electric Indigo

#6366F1

Luminance: 0.185•Contrast White: 4.5:1 ✗•Contrast Black: 4.7:1 ✓ AA
Recent Swatches:

Channel Tuning & Sliders

RGB Channels (0 - 255)
Red (R)99
Green (G)102
Blue (B)241
HSL Channels
Hue (H: 0° - 360°)239°
Saturation (S: 0% - 100%)84%
Lightness (L: 0% - 100%)67%
CMYK Channels (Print Inks 0% - 100%)
Cyan (C)59%
Magenta (M)58%
Yellow (Y)0%
Black / Key (K)5%

Formats & CSS Output

HEX
#6366F1
RGB / RGBA
rgb(99, 102, 241)
HSL / HSLA
hsl(239, 84%, 67%)
CMYK (Print)
cmyk(59%, 58%, 0%, 5%)
HSV / HSB
hsv(239, 59%, 95%)
CSS Custom Property
--color-primary: #6366F1;

Shades & Tints (Darker to Lighter)

About Color Picker

Free online color picker with eye dropper tool, real-time HEX, RGB, HSL, CMYK, and HSV sliders, color luminance readout, history swatches, and one-click copy.

Key Capabilities & Features

  • Native browser EyeDropper API integration for sampling any pixel on screen
  • Real-time synchronized sliders for RGB, HSL, and CMYK print color channels
  • Dynamic luminance calculation and dark/light surface contrast detection
  • Automatic color swatch history storing your last 10 sampled colors
  • One-click copy for CSS custom properties, HEX, RGB, and HSL formats
  • 100% client-side execution with zero latency and complete privacy

How to Use Color Picker

1

Pick or Sample a Color

Click the color swatch, use the sliders, or activate the EyeDropper tool to sample any color on your display.

2

Fine-tune Color Channels

Adjust individual Red, Green, Blue, Hue, Saturation, or Lightness sliders to achieve the perfect shade.

3

Copy Code Output

Click the copy button beside your preferred format (HEX, RGB, HSL, or CSS variable).

Privacy & In-Browser Execution Guarantee

100% client-side privacy. All calculations and styling execute locally in your browser with zero server uploads.

Frequently Asked Questions

Does this color picker upload my images or data?

No. All color sampling, conversions, and rendering happen 100% inside your web browser.

What browsers support the EyeDropper tool?

The native EyeDropper API is supported in modern desktop Chromium browsers (Google Chrome, Microsoft Edge, Opera, and Brave).

Can I convert between RGB and print CMYK?

Yes, our studio includes real-time CMYK ink approximation sliders and instant conversions.