Color Inspector

Pick a color and instantly get all its codes: HEX, RGB, HSL, HSV, CMYK, LAB, CSS name and luminance.

HEX#3B82F6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)
HSVhsv(217, 76%, 96%)
CMYKcmyk(76%, 47%, 0%, 4%)
LABlab(55.63, 17.55, -64.43)
CSS Namedodgerblue (#1E90FF)
Luminance0.2355

About: Color Inspector

The color inspector shows every code for a color at once: HEX, RGB, HSL, HSV, CMYK and LAB, plus the closest CSS color name and its relative luminance. Pick a color with the picker, fine-tune it with sliders or paste an existing code, then copy the format you need. Handy when moving from a mockup to CSS, converting HEX to RGB or HSL, or finding out what a shade is called.

Features

  • Instant conversion to HEX, RGB, HSL, HSV, CMYK and LAB, each value with its own copy button.
  • Closest CSS color name, matched by distance in LAB color space and shown with its HEX code.
  • Relative luminance from 0 to 1, the value WCAG uses to compute contrast ratios.
  • Adjust the color with the visual picker, the HEX field, or RGB and HSL sliders for hue, saturation and lightness.
  • Copy the HEX from the toolbar, undo and redo, and keep the color in the page URL.

How to use it

  1. Click the swatch to open the picker, or paste a HEX code, an rgb() value or a CSS color name into the field.
  2. Fine-tune the color with the RGB and HSL tabs and their sliders.
  3. Copy the format you need from the list of codes.

Questions about usage

A HEX code such as #3B82F6 is three hexadecimal pairs: 3B, 82 and F6, which are 59, 130 and 246 in decimal, so rgb(59, 130, 246). Paste the code into the inspector and the RGB value appears instantly, along with every other format.

Both describe a color by hue (0 to 360°) and saturation. In HSL, lightness runs from black at 0% to white at 100%, with the pure color at 50%. In HSV, a value of 100% gives the most vivid version of the color rather than white. CSS uses HSL.

Only when the color matches a named CSS color exactly. Otherwise the tool shows the nearest name, with that name's own HEX code so you can compare. Closeness is measured in LAB space, which tracks human perception better than a plain RGB distance.