HTML Color Codes: Picker & Converter

What are HTML color codes and what does this tool show?

HTML color codes are the standard ways to write a color so a browser understands it. The common forms are a HEX code such as #31C48D, channel values such as rgb(49, 196, 141) and hsl() notation. Named colors such as teal work too. A screen builds every color from red, green and blue light. Each channel takes 256 values from 0 to 255, so these three channels give you 16,777,216 possible colors.

This tool converts one value into five formats at once. In other words, a client's RGB value, a Figma HSB value and a printer's CMYK figure appear on one screen. The tool also does four more things.

• It matches the color to the closest CSS color name and adds ≈ when no exact name exists.
• Four lighter and four darker shades appear, plus complementary, analogous and triadic harmonies.
• Two cards show the WCAG contrast ratio on white and on black.
• One click on any of 40 common HTML colors selects it and copies the HEX code.

Also, every calculation runs in your browser. In brand identity projects, my team and I start by pinning the colors down to one list of codes. We then build the rest of the brand identity work on top of that list.

How do you read a HEX code, and when do short and 8 digit forms help?

A HEX code writes the three channel values side by side in base 16: #RRGGBB. The first two digits give red, the next two green and the last two blue. So in base 16, 00 equals zero and FF equals 255. For example, in #DC143C the pair DC means 220 on the red channel. Likewise, 14 means 20 on green and 3C means 60 on blue, so the tool shows rgb(220, 20, 60).

CSS accepts four HEX forms, and the tool reads all of them.

• Short form #RGB: the browser doubles each digit, so #F60 is really #FF6600.
• Full form #RRGGBB: the most common six digit notation.
• Alpha forms #RGBA and #RRGGBBAA: the last digit or pair carries transparency. 00 is fully transparent and FF fully opaque, while 80 gives close to 50% opacity.

Upper or lower case makes no difference; #dc143c and #DC143C are the same color. Still, I recommend one spelling across the team. Otherwise two spellings of the same color slip through when you search a design file. The tool always returns upper case, and it still recognizes a code when you forget the hash sign.

RGB, HSL or HSB: which one should you use?

All three describe the same color; however, each one suits a different job. RGB is the language of the screen: three channels from 0 to 255. As a result, it is the most familiar format in image editors and in code.

HSL defines a color as hue (0-360°), saturation and lightness. It is the most practical notation for lighter and darker versions of a color in CSS. In short, you change only L and the hue stays put. At an L of 100 every color turns white, and at 0 it turns black.

HSB (HSV in some apps) is what you meet in the pickers of design tools such as Figma and Photoshop. Here B means brightness, and a value of 100 gives the most vivid version of the hue instead of white. For example, #1F8FFF has a lightness of 56% in the HSL row. The HSB row, however, shows a brightness of 100% for the same color.

In practice, I take HEX or HSB from the design file and write HEX or HSL in CSS. For client reports I use RGB. My post on web design in Figma covers the design side of that flow. If you type an HSB value as hsb(210, 88%, 100%), the tool converts it to HEX as well.

CSS color names: can you trust all 148 of them?

CSS recognizes 148 color names today. Sixteen of them are the basic colors from HTML 4.01, and the table above lists them with their codes. Most of the rest came from the X11 color list and became standard with CSS Color Level 3. The newest name, added in CSS Color Level 4, is rebeccapurple. The current list lives in the W3C CSS Color Module Level 4 specification.

Some names are two spellings of one color: gray and grey, aqua and cyan, fuchsia and magenta give identical values. As a result, the 148 names map to 139 distinct colors. Names are easy to read. However, they hide a few traps.

• Dark is not always darker: darkgray is #A9A9A9, while gray is #808080.
• No transparency: every name is an opaque color; only the transparent keyword is fully see through.
• Case does not matter: DodgerBlue and dodgerblue give the same color.

When your color has an exact name, the tool shows it. If the color has several names, you see all of them, for example darkgray / darkgrey. Without an exact name, the tool suggests the name with the smallest difference in the CIELAB color space. It then marks that name with ≈, and the hint helps you find a nearby shade. However, it does not replace the code, so keep writing the HEX value in CSS.

Why does the CMYK value never print exactly?

A screen makes color with light, while print makes it with ink. RGB is additive: push all three channels to the maximum and you get white. CMYK is subtractive; cyan, magenta, yellow and black ink reduce the white of the paper. Therefore some vivid screen colors, especially bright greens and blues, never reach the same intensity in ink.

The CMYK row in this tool uses a simple, device independent formula. Specifically, that formula knows nothing about paper stock, ink set or the printer's color profile. So for corporate print jobs I follow three steps.

1. Ask the printer for the color profile that matches their paper and press.
2. Set Pantone references or profile based CMYK values for the main logo colors.
3. Order a proof before the full run and compare the color with the proof, not with your screen.

The CMYK value here is still useful. It is a good starting point for slide decks, office printouts or a first brief to a printer. Moving a printed identity online, on the other hand, is the reverse trip. My post on taking a print brand identity digital walks through it step by step.

How do you manage HTML color codes for a brand?

Brand colors tend to multiply over time. One code lives on the website, another in the social media template and a third in the slide deck. Soon the same blue exists in five versions. To prevent that, I keep a short color list in every project.

• Primary color: one HEX code, the same on every channel.
• Shades: lighter and darker versions from the Shades strip for hover states, backgrounds and borders.
• Neutrals: two or three grays for text, surfaces and lines.
• Status colors: separate colors for success, warning and error messages.

The Shades strip mixes the color with white at 72%, 54%, 36% and 18%. On the dark side it mixes with black at 16%, 32%, 48% and 64%. That way the dark hover shade stays in the same family as the primary color. Define the list as CSS variables, for example --brand: #31C48D. Then you can change a color across the whole site in one place. In larger teams the same idea lives inside a design system.

Use the same code for QR codes, social media graphics and email signatures too. For example, the QR code generator asks for a HEX value for the code color. Pick a dark shade on a light background, and phones scan the code more reliably.

How do you check harmonies and contrast together?

The Harmonies tab finds the mathematical partners of a color on the hue wheel. The tool keeps saturation and lightness fixed and rotates only the hue.

• Complementary (180°): the strongest contrast, for accents and call to action buttons.
• Analogous (-30° and +30°): neighboring hues, for calm and cohesive palettes.
• Triadic (+120° and +240°): balanced yet lively trios, useful in illustrations and charts.

These partners are a starting point, not a rule. In my experience most business websites need one primary color, one accent and a set of neutrals. Moreover, if you give all three triadic colors equal weight, the page quickly feels crowded.

Factor in readability when you choose. WCAG 2.2 asks for at least 4.5:1 contrast for normal text and 3:1 for large text. The two cards in the panel measure the color on white and on black. Each card labels the result as AAA, AA, large text only or too low. Because the ratio is symmetric, the value on the white card also applies to white text placed on this color. Click a card to open the Color Contrast Checker with the same color. That tool then suggests the closest shade that passes.

For the bigger picture, read my post on web accessibility and WCAG. Want to set up your site's colors from scratch? Our web design service covers palette, typography and contrast together.