Skip to content

Color Picker

In-browser only HEX · RGB · HSL · HSV · CMYK · OKLCH Screen eyedropper
Sample colors
#1E8CE6Screen eyedropper is not available in this browser.
RGBA channels
Color values
HEX#1E8CE6
RGBrgb(30, 140, 230)
HSLhsl(207, 80%, 51%)
HSVhsv(207, 87%, 90%)
CMYKcmyk(87%, 39%, 0%, 10%)
OKLCHoklch(0.627 0.164 249)

CMYK is an approximation derived from sRGB and applies no ICC profile. For press work, confirm values with your print provider.
Related tools View all

Overview

Pick a color and read every format

Pick a color from the spectrum or sample any pixel on screen, then copy it as HEX, RGB, HSL, HSV, CMYK, or OKLCH. Everything runs in your browser.

  • Spectrum picker with hue and alpha sliders
  • Screen eyedropper in supported browsers
  • Six output formats with one-tap copy
  • HEX and channel inputs for exact values
  • Runs fully in your browser
  • Runs entirely in your browser — nothing is uploaded
  • No account or sign-in required to use the picker
  • Color data never leaves your device
  • Pick a color and copy its HEX, RGB, HSL, HSV, CMYK, or OKLCH value
  • Sample a precise on-screen shade with the eyedropper
  • Convert a color between HEX, RGB, HSL, HSV, CMYK, and OKLCH for a design handoff
  • Grab CSS-ready color values for a stylesheet
  • Match a color across HEX, RGB, and HSL formats

Getting started

How to Pick a Color

  1. 1
    Choose a shade

    Drag inside the saturation/brightness square to set how vivid and bright the color is. Use arrow keys for fine, keyboard-only adjustments.

  2. 2
    Set the hue

    Move the rainbow hue slider to choose the base color, then use the alpha slider below it if you need transparency.

  3. 3
    Or enter an exact value

    Type a hex code in the HEX field, or set the R, G, B, and A channels directly for precise color entry.

  4. 4
    Sample from your screen

    In supported browsers, click the Eyedropper button to pick the color of any pixel on screen.

  5. 5
    Copy the format you need

    Each value row — HEX, RGB, HSL, HSV, CMYK, OKLCH — has a copy button that places the value on your clipboard.

Reference

Color Format Reference

Color Format Reference
FormatExampleBest for
HEX#1E88E5Web and CSS — the most widely supported notation
RGBrgb(30, 136, 229)Channel-level edits and image tooling
HSLhsl(207, 78%, 51%)Intuitive tweaks to lightness and saturation
HSVhsv(207, 87%, 90%)Design tools that expose a value/brightness axis
CMYKcmyk(87%, 41%, 0%, 10%)A print starting point (approximate, no ICC profile)
OKLCHoklch(0.62 0.16 248)Perceptually uniform, balanced design systems

Practical tips

Tips for Working With Color

  • Use OKLCH for palettes

    Because OKLCH is perceptually uniform, keeping its lightness fixed while changing hue produces tints that feel equally bright — useful for consistent design-system scales.

  • Mind the alpha switch

    When alpha drops below 1, HEX becomes 8-digit (#RRGGBBAA) and RGB/HSL switch to rgba()/hsla(). Set alpha back to 1 if you need the shorter notation. HSV, CMYK, and OKLCH do not include an alpha component in their output.

  • Treat CMYK as a guide

    Screen-to-print conversion depends on paper, ink, and ICC profiles. Use the CMYK value to communicate intent, not as a final press specification.

  • Keyboard-friendly picking

    Focus the spectrum square and use the arrow keys; hold Shift for larger steps. The hue and alpha sliders respond to arrow keys too.

Frequently Asked Questions

How does this color picker work?
Drag inside the saturation/brightness square to choose a shade, then use the hue slider to set the base color and the alpha slider for opacity. The tool converts your selection into HEX, RGB, HSL, HSV, CMYK, and OKLCH in real time. Everything runs in your browser.
Can I pick a color from anywhere on my screen?
Yes, in supported browsers. Click the Eyedropper button to sample any pixel on screen using the native EyeDropper API. The button is hidden in browsers that do not support it; there you can still type a hex value or use the spectrum.
What is the difference between HEX, RGB, HSL, and OKLCH?
HEX (#RRGGBB) is the most common web format. RGB sets red, green, and blue channels from 0 to 255. HSL uses hue, saturation, and lightness, which many designers find intuitive. OKLCH is a modern, perceptually uniform space where equal lightness values look equally bright, making it ideal for balanced palettes.
How do I add transparency to a color?
Use the alpha slider below the hue slider, or type a value from 0 to 1 in the A channel field. When alpha is below 1, the HEX value switches to 8-digit form (#RRGGBBAA) and RGB/HSL switch to their rgba()/hsla() variants.
Why does the CMYK value look approximate?
CMYK is derived mathematically from sRGB without an ICC color profile, so it is a close estimate rather than a press-accurate conversion. Use it as a starting point and confirm final values with your print provider.
How do I copy a color value on mobile?
Each format row has a copy button. Tap it and the value goes to your clipboard, with a confirmation announced for screen readers.