CSS Color Picker

What is a CSS color picker?

A CSS color picker takes one color and hands it back in every syntax a stylesheet accepts. Pick a blue and you get #1f6feb, rgb(31, 111, 235), rgba(31, 111, 235, 1), hsl(216, 84%, 52%), and hsla(216, 84%, 52%, 1) at once, each with its own copy button. Those five are the same color to a browser. They are nothing like the same thing to a person writing a rule, which is why the conversion keeps coming up.

The control at the top is your operating system's own picker, opened by a native color input, so you get the eyedropper and the keyboard behaviour you already have. Alpha sits beside it on its own slider, because a color input has no alpha channel. A text field reads values in the other direction: paste a hex, an rgb() call, an hsl() call, or a CSS color name, and the swatch moves to match. Below the outputs, a contrast panel scores the color against white and against black using the WCAG formula, so you learn whether text will be readable on it before the design review does.

When to use it

The most common trip here starts with a handoff. A designer leaves #1f6feb in a comment and the rule you are writing needs rgba(), because it is a box-shadow, or an overlay that has to let the photograph underneath show through, or a border sitting at quarter strength on a dark panel. A six-digit hex has nowhere to put the fourth number. Paste the hex, drag the alpha slider, copy the rgba() line. Small errand. It comes up several times a week on any project where the design and the implementation live in different files.

The second trip is about variants. You have a button color and now you need a hover state, a pressed state, a disabled state, and a tinted background for the panel behind it. In hex that means changing three numbers at once and squinting at the result, then doing it again. HSL splits the color into hue, saturation, and lightness, so a lighter version of the same color is one number moving. hsl(216, 84%, 52%) becomes hsl(216, 84%, 67%) with the hue untouched. A designer does this with a color wheel in front of them. HSL is the same move, written down.

The third is the check nobody enjoys. Grey text on a grey card looks fine on the monitor it was designed on, at the brightness that monitor was set to, at the angle the designer was sitting. It vanishes on a laptop screen outdoors. The contrast panel gives you a ratio and a verdict against both text colors, which turns an argument about taste into a number you can put in a ticket. If the colors you are choosing belong to a gradient rather than a single fill, the Gradient Generator on this site builds the CSS for the whole ramp and lets you place the stops. Come back here when you need one of those stops in another format, or want it scored.

How this tool works

The primary control is a native color input. That means whatever picker your operating system ships: the macOS color panel with its eyedropper, the Windows dialog, the sheet that slides up on a phone. It is a deliberate choice rather than a shortcut. A hand-built picker canvas has to reinvent keyboard operation and screen reader support from scratch, and most of them do it badly. The native one already works. Alpha is a separate slider from 0 to 100 percent, and moving it changes the RGBA and HSLA rows while leaving HEX and RGB alone, since those two have nowhere to put it.

Inside, the color is held as three 8-bit channels plus an alpha value, and every row is derived from that. Hex is those channels in base 16. HSL is computed as needed and rounded only at the moment it is printed, which matters more than it sounds. The printed form has thrown away most of a degree of hue and a fraction of a percent of saturation, so pasting it back lands near the original rather than on it. #1f6feb reports as hsl(216, 84%, 52%), and reading that back gives #1e70eb. One unit of red, one of green. Nothing you can see, and enough to fail a string comparison, so keep hex or rgb as the value of record and use HSL for the editing.

The named-color row appears only on an exact match, all three channels landing on one of the values CSS has a word for. Contrast uses the WCAG 2.1 definition of relative luminance, which undoes the sRGB transfer curve on each channel before weighting them 0.2126 red, 0.7152 green, 0.0722 blue. Skipping that curve is the usual mistake and it is a large one. Mid grey, #808080, sits at 0.216 luminance, not the 0.5 an average of the channels would suggest, and a checker built on the average will wave through colors that fail. Black on white comes out at 21:1, the highest ratio sRGB can reach. All of this runs in your browser. Nothing you paste is uploaded, and the recent-colors strip is kept in this browser's local storage rather than on a server.

Examples

• A handoff hex, in every format

  Input

  #1f6feb

  Output

  HEX   #1f6feb
  RGB   rgb(31, 111, 235)
  RGBA  rgba(31, 111, 235, 1)
  HSL   hsl(216, 84%, 52%)
  HSLA  hsla(216, 84%, 52%, 1)

  No named-color row, because #1f6feb is not one of the CSS color names. Alpha is at 100 percent, which is why the two four-argument rows end in a 1.

• The same color at 60 percent, for an overlay

  Input

  #0f172a with the alpha slider at 60%

  Output

  HEX   #0f172a
  RGB   rgb(15, 23, 42)
  RGBA  rgba(15, 23, 42, 0.6)
  HSLA  hsla(222, 47%, 11%, 0.6)

  HEX and RGB stay solid. Opacity only has somewhere to live in rgba() and hsla(), which is the reason all of them are on the page at once.

• A value that lands on a CSS name

  Input

  #ff6347

  Output

  HEX          #ff6347
  RGB          rgb(255, 99, 71)
  HSL          hsl(9, 100%, 64%)
  Named color  tomato

  Exact matches only. Move one channel to #ff6348 and the name row is gone.

• Lightening by moving one number

  Input

  hsl(216, 84%, 52%)
  hsl(216, 84%, 67%)

  Output

  #1e70eb
  #649df2

  Same hue, same saturation, lightness up by 15 points. The first line comes back as #1e70eb rather than the #1f6feb it started life as, which is the rounding in the printed HSL showing up.

• A grey about to fail

  Input

  #767676

  Output

  Against white   4.54:1   AA pass   AAA fail
  Against black   4.62:1   AA pass   AAA fail

  The lightest grey that still clears AA on a white background. One step lighter, #777777, comes out at 4.48:1 and fails. Go up to #808080 and it is 3.95:1. That is how narrow the margin is on the greys people reach for.

• A hex with a digit dropped

  Input

  #5fc2e

  Output

  "#5fc2e" has 5 hex digits. A hex color takes 3 or 6 digits, or 4 or 8 when the last one or two carry alpha.

  Five digits is the standard copy-paste casualty. The message names what is wrong with the value instead of blanking the field, so the fix is one keystroke.

Frequently asked questions

• How do I convert a hex color to rgba?

  Paste the hex into the text field, or pick it with the swatch, then set the alpha slider to the opacity you want. The RGBA row updates as you drag and its copy button puts the whole call on your clipboard. #1f6feb at 40 percent comes out as rgba(31, 111, 235, 0.4). It works in reverse as well: paste an rgba() value and the picker jumps to it, with the slider set from the fourth argument.

• Can a hex color carry alpha?

  Yes, as four or eight digits rather than three or six. #1f6febcc is #1f6feb at 80 percent, and every current browser reads it. The trouble starts outside the browser. Internet Explorer never supported the form at all. Android color resources use the opposite order, #AARRGGBB, so the same eight digits mean a different color there. A good many design tools still export six digits with opacity in a separate field, and pasting eight into them gets you an error or a silent truncation. This tool accepts eight-digit hex on the way in and puts the alpha into the RGBA and HSLA rows on the way out, because those travel better.

• How many CSS named colors are there?

  148. That is the 147 names CSS inherited from X11, plus rebeccapurple, added to the spec in 2014 after the death of Eric Meyer's daughter. Behind those 148 names sit 139 distinct colors. Seven greys are spelled twice, once with an a and once with an e: gray, darkgray, dimgray, lightgray, slategray, lightslategray, and darkslategray all have a grey twin at the identical value. On top of that, aqua and cyan are both #00ffff, and fuchsia and magenta are both #ff00ff. The set has its quirks. darkgray, #a9a9a9, is lighter than gray, #808080. transparent is a color keyword too, but it is not one of the 148, having no color of its own to name.

• Why is my color slightly different after a trip through HSL?

  The printed HSL is rounded. Hue goes to the nearest degree and saturation and lightness to the nearest percent, and one degree of hue spans more than one 8-bit color. Before rounding, #1f6feb is hsl(216.47, 83.61%, 52.16%). Printed as hsl(216, 84%, 52%) and read back, it returns as #1e70eb. That is one unit on two channels, invisible on any screen, and still enough to fail a snapshot test or show up in a diff. Store hex or rgb, edit in HSL.

• What contrast ratio does WCAG require?

  4.5:1 for normal body text at Level AA, and 7:1 at Level AAA. Large text, which means 18pt and above or 14pt bold and above, drops to 3:1 for AA and 4.5:1 for AAA. The badges here test the two normal-text thresholds, against white and against black, since those are the two colors most likely to end up sitting on yours. The ratio is measured on the solid color. A translucent color has no ratio of its own, because the answer would depend on whatever is behind it, so composite it against its real background first if that is the number you need.

• Can someone sort out the color sprawl across our products?

  Usually, yes, and the request tends to arrive in the same shape. Nineteen blues in the stylesheet, four of them a single digit apart, and nobody able to say which one is real. A picker will not fix that. What fixes it is a token layer that gives the colors names, a contrast rule that runs in CI instead of in a review, and one careful pass to retire the duplicates without breaking pages that still point at them. Zinc Online Solutions runs that kind of cleanup. Send us the stylesheet, or the design file, and we will start by telling you how many colors you are shipping.