tool4.dev

Data / LOCAL TOOL

Color Picker & Converter

Pick a color or paste any CSS color value and convert it between common, perceptual, and modern color spaces locally.

Runs locally — input is never uploaded
Pick or enter a CSS color
Hue217°
Opacity100%

Pick a color or enter a CSS color value

Converted valuesReady when you are
Preview

Common

Pick or enter a color to see its conversions.

Perceptual

Pick or enter a color to see its conversions.

Color Spaces

Pick or enter a color to see its conversions.

WHAT IT DOES

Pick a color. Read it in every space.

Pick a color visually or enter a CSS color value, then read stable HEX, RGB, HSL, HSV, HWB, LAB, LCH, OKLab, OKLCH, wide-gamut, and XYZ representations as you work. Everything is parsed and converted in your browser.

Why use it?

Use it to translate one color between the notations used by design tools and CSS without manually calculating channel values.

How to use this tool

  1. Enter a CSS color or use the picker; for example, #ff0000 corresponds to RGB channels 255, 0, 0.
  2. Copy the specific representation your destination supports, or copy the labeled set. Check alpha separately: the apparent color of a transparent swatch depends on what is behind it.

Details and limitations

  • The picker includes saturation/brightness, hue, and opacity controls, plus the EyeDropper API when the browser provides it.
  • Input inference accepts named colors, transparent, HEX with alpha, legacy and modern RGB/HSL syntax, HSV, HWB, LAB/LCH, OKLab/OKLCH, and CSS Color 4 color() profiles.
  • Results are grouped into Common, Perceptual, and Color Spaces sections. Click any complete row to copy that representation, or use Copy all for the complete labeled set.
  • Alpha is carried through every conversion, values use stable precision, and unsupported or malformed syntax produces an explicit local error.

COMMON QUESTIONS

Colors questions

Which color formats are supported?
The picker understands CSS named colors and transparent, HEX, RGB, HSL, HSV, HWB, LAB, LCH, OKLab, OKLCH, CSS Color 4 color() profiles, and the previous CMYK syntax.
Does this preserve transparency?
Yes. Alpha from HEX, RGB, HSL, HSV, HWB, LAB, LCH, OKLab, OKLCH, and color() input is carried through the displayed representations and the picker.
Does the color leave my browser?
No. The parser, picker, preview, and conversions run locally. The EyeDropper API, when available, also returns its selected color directly to the page without uploading an image or screen capture.