Skip to main content
CompressNConvert

Color Picker and Converter

Pick a color and convert HEX, RGB, HSL, HSV, CMYK, and OKLCH values. Adjust transparency, explore tints and shades, and copy individual formats.

Runs locally in your browser

Picker

Drag the square, rails, or dial in a value.

Saturation 67 percent, brightness 60 percent, hue 270 degrees.

Channels

102
51
153
50%
40%

Selected color

#663399

Contrast on white

8.41:1Passes AA body text

Contrast on black

2.50:1Fails AA

All formats

Edit any field to convert in the other direction.

Hue, saturation, value — the model the picker plane uses.

A device-independent approximation, not a print profile.

Perceptually uniform lightness. Supported in current browsers.

An exact match for this CSS color keyword.

Variations

Related colors derived from the current selection. Click any swatch to copy it.

Tints

Mixed toward white

Shades

Mixed toward black

Tones

Desaturated toward grey

Complete tool guide

Color Picker and Converter guide

Convert a color between HEX, RGB, HSL, HSV, CMYK, and OKLCH, or choose it visually with the color picker. Use the synchronized values to move a brand color from a design handoff into CSS, then explore lighter, darker, or less saturated variants.

Your input is processed in the current browser tab and is not sent to the application server.

Why use this tool?

  • Copy the format your stylesheet or design handoff requires.
  • Edit hue and opacity visually while checking the numeric values.
  • Compare tints, shades, and tones without re-entering the base color.

Common use cases

  • Reading a color out of a design handoff and into code
  • Building token values in several formats at once
  • Sampling a color from anywhere on screen with the eyedropper
  • Deriving lighter, darker, or muted variants of a brand color

How to use it

  1. 1

    Drag inside the picker square, or type any color value you already have.

  2. 2

    Adjust hue and transparency on the rails, or fine-tune the channel sliders.

  3. 3

    Read the synchronized formats and copy the one you need.

  4. 4

    Take a tint, shade, or tone from the variation strips if you need a related color.

Controls and results explained

HEX and RGB

HEX encodes red, green, and blue channels. Short HEX expands each digit; #F00 is #FF0000. RGB displays those channels as numbers from 0 to 255.

Hue, lightness, and chroma

HSL and HSV offer hue-based editing. OKLCH separates perceptual lightness, chroma, and hue; values are converted into the sRGB colors this picker displays.

Transparency

Alpha runs from 0 for transparent to 1 for opaque. Copy an alpha-aware output such as RGBA or eight-digit HEX when the transparency is part of your design.

Worked examples

Convert HEX to RGB and HSL

Start with: #FF0000

  1. Enter #FF0000 in the HEX field.
  2. Read or copy the RGB and HSL fields.
rgb(255, 0, 0)
hsl(0, 100%, 50%)

All three values represent the same opaque sRGB red.

Convert a CSS named color

Start with: rebeccapurple

  1. Enter rebeccapurple in the named-color field.
  2. Copy its HEX value for a design token.
#663399
rgb(102, 51, 153)

CSS keywords have defined values. The nearest-name label for an arbitrary color is only an approximation.

Accepted color input

Paste 3-, 4-, 6-, or 8-digit HEX, rgb()/rgba(), hsl()/hsla(), hsv(), oklch(), cmyk(), or a supported CSS named color. The tool supports these formats, not every expression in the CSS color specification.

Screen eyedropper

The eyedropper appears when the browser exposes the EyeDropper API. Activate it to choose a screen pixel; use the visual picker or paste a value when it is unavailable.

Tints, shades, and tones

The variation strips adjust HSL lightness toward white or black, or reduce saturation toward gray. These are related starting colors; check the contrast of each final text/background pair.

Practical tips for better results

  • Hold Shift while using the arrow keys on the picker or rails to move in larger steps.
  • Use OKLCH when you want a set of colors that look equally light, since HSL lightness is not perceptually even.
  • Check the contrast readouts before committing a color to body text.

Frequently asked questions

Why does CMYK not match my printer?

The CMYK values are an unprofiled approximation calculated from RGB. Use an ICC-aware print workflow for final production values.

Why does the hue stay put when I drag to black?

Pure black and pure white have no measurable hue. The picker holds the hue you selected so the handle does not jump when you drag back out of a corner.

What to check before using the result

  • CMYK is an unprofiled mathematical approximation. Final print values depend on the printer, ink, paper, and ICC profile.
  • Out-of-gamut OKLCH colors are mapped into sRGB by the converter; this is not a wide-gamut proofing tool.

Keep working

Related color & design

Continue with another focused tool from the same collection.

Color Contrast CheckerCheck WCAG 2.1 and 2.2 text contrast, explore suggested fixes, and view a separate APCA estimate.Color Blindness SimulatorSee palettes, interfaces, and images through eight types of color vision.Color Palette GeneratorGenerate coordinated palettes from harmony rules, then lock and export them.Color Scale GeneratorTurn one brand color into a balanced 50 to 950 ramp with contrast checked.