hexcolor.co

An HTML color is any color value a browser can parse and render. In practice you write one of four things: a hex code like #FF6347, an rgb() or rgba() value, an hsl() value, or one of the 148 color names browsers understand, such as tomato. All four are valid CSS, and the color name is simply a built-in alias for a specific hex value — tomato and #FF6347 produce the same pixel. Use whichever is easiest to read in your code; the browser does not care.

The four ways to write a color

How to read a hex code

A hex color is # followed by three channel pairs in red-green-blue order. Each pair is base-16, running from 00 (0) to FF (255).

Take #FF6347 (tomato):

• FF = red = 255
• 63 = green = 99
• 47 = blue = 71

So #FF6347 is the same color as rgb(255, 99, 71). That is the whole conversion rule: split the six digits into three pairs, convert each pair from hex to decimal, and you have your rgb values. Going the other way, convert each rgb number to a two-digit hex value and concatenate.

Shorthand hex

If each pair has two identical digits, you can collapse it to three. #FF6633 becomes #F63. Both mean red 255, green 102, blue 51. The shorthand only works when both digits in every pair match — #FF6347 cannot be shortened.

Alpha in hex

Modern CSS also accepts eight-digit hex, #RRGGBBAA, where the last pair sets opacity. #FF634780 is tomato at roughly 50% opacity. If you need to support older browsers, rgba() is the safer form for transparency.

Writing colors in CSS

The syntax is the same everywhere a color is accepted — text color, background, borders, shadows:

.alert {
  color: #FF6347;              /* hex */
  background-color: rgb(255, 99, 71);   /* rgb */
  border: 1px solid tomato;    /* color name */
}

.overlay {
  background-color: rgba(255, 99, 71, 0.5);  /* 50% transparent */
}

.hover-state {
  background-color: hsl(9, 100%, 74%);  /* lighter tomato */
}

Input is the value, the action is assigning it to a property, and the expected result is that the element renders in that color. If nothing changes, the usual causes are a missing # on a hex value, a typo in a color name (browsers silently ignore unknown names and fall back to inherited color), or a more specific rule overriding yours.

Color names are not a separate system

A common misconception is that named colors and hex codes are different kinds of color. They are not. The browser ships a lookup table of 148 names, each mapped to one hex value. tomato is defined as #FF6347; darksalmon is #E9967A; mediumblue is #0000CD. Writing the name is identical in effect to writing its hex.

The trade-off is readability versus precision. Names make code self-documenting but only cover 148 colors, and some names are misleading — darkgoldenrod and gold are far apart in hue. For anything beyond quick work, hex or rgb gives you exact control.

Verifying a color before you ship it

Do not trust memory for hex values. A single wrong digit shifts the color noticeably, and it is easy to confuse #FF6347 with #FF6437. Look the value up in a color tool that shows the swatch alongside its rgb, hsl, and nearest named color, then confirm the rendered result in the browser.

Two checks worth running on any color you pick:

• Contrast against white and black. A color that looks fine as a swatch can fail readability as text. Contrast checkers give you the ratio so you can judge whether it passes.
• How it looks to color-blind viewers. Simulators show the same color through different vision types, which catches palettes that rely on red-green distinctions alone.

HexColor.co does both from a single lookup: type a hex code, an rgb value, or a browser color name and you get the conversions, harmonies, shades, contrast figures, and a color-blindness view. It also has a color picker and converter if you are starting from an image or a Pantone/RAL reference rather than a code.

Quick reference

• #RRGGBB — six digits, two per channel, red-green-blue order
• #RGB — shorthand, only when each pair repeats
• #RRGGBBAA — hex with opacity
• rgb(r, g, b) — channels 0–255
• rgba(r, g, b, a) — alpha from 0 to 1
• hsl(h, s%, l%) — hue 0–360, saturation and lightness as percentages
• 148 named colors — browser built-ins, each equal to one hex value

Pick hex for precision and portability, rgb/rgba when you need transparency or channel math, hsl when you want to adjust lightness by hand, and names when readability matters more than exactness.

A color palette is the defined set of colors a digital product uses across its interface, and it is broader than a single brand color: it assigns each color a role (primary, secondary, neutral, semantic) so screens, components, and states stay consistent. It matters most when you are building a design system or shipping UI at scale, because accessibility — especially text and control contrast — depends on how those roles are chosen and paired. Colorca, a tool for designing accessible palettes in HSLuv color space, frames the problem this way: the goal is not a pretty set of swatches but a palette that stays readable and perceptually even across a product.

Palette vs. brand color vs. single color

A single color is just a value. A brand color is one color chosen to represent identity. A palette is a system: multiple colors, each with a job, plus rules for when to use them.

The practical difference: a brand color answers "what color are we?" A palette answers "what color is a primary button, a disabled button, an error message, and body text — and do they still work together?"

Common palette roles

Most product palettes are organized by function, not by hue. A typical structure:

• Primary — the main action color (buttons, links, active states).
• Secondary / accent — supporting emphasis, often for less frequent actions.
• Neutral / gray scale — backgrounds, borders, surfaces, and text. This is usually the largest part of a palette.
• Semantic colors — meaning-carrying colors: success (green), warning (amber/yellow), error (red), info (blue). These are named by meaning, not by hue, so they can be themed.
• State variants — hover, active, focus, disabled, and selected versions of the above.

Naming colors by role rather than appearance (color-action-primary instead of blue-500) is what lets a palette survive a rebrand or a dark-mode theme without rewriting every component.

How palettes hold a design system together

In a design system, the palette is usually the lowest layer of tokens. Components reference tokens, not raw hex values.

For example, a button does not hard-code #2563EB. It references color-action-primary, which resolves to a palette entry. Change the palette, and every button updates at once. This is why palette decisions are high-leverage: one change propagates everywhere, for better or worse.

It also keeps UI components consistent. If every team picks its own grays, you get five slightly different borders. A shared neutral scale prevents that.

Accessibility is a palette property, not an afterthought

Contrast is a relationship between two colors, so it can only be evaluated in the context of a palette — a color that looks fine alone may fail as text on your background.

Two things to check:

• Contrast ratios for text and meaningful UI elements against their backgrounds. WCAG defines minimum ratios (commonly 4.5:1 for normal text, 3:1 for large text and UI components); verify the specific requirement that applies to your product.
• Color-blind friendliness. Never rely on color alone to convey meaning. Pair color with an icon, label, or pattern, and check that semantic colors remain distinguishable under common types of color vision deficiency.

A palette can pass contrast checks and still fail accessibility if, say, success and error are the only signal and look similar to some users.

Why color space matters: HSLuv as one approach

Palettes built by eye in RGB or HSL often have uneven perceived lightness — two colors with the same "lightness" value can look very different in brightness. That makes it hard to build consistent scales and to predict contrast.

HSLuv is a perceptually uniform color space: equal changes in its lightness coordinate correspond more closely to equal changes in perceived lightness. Building a palette in HSLuv lets you generate a neutral ramp or a set of hues that stay visually even, which in turn makes contrast more predictable. Colorca is built specifically around designing accessible palettes in HSLuv for digital products.

This is one method, not the only one. Other perceptually uniform spaces (such as OKLCH) serve a similar purpose. The point is that the color space you build in affects how even and accessible the result is.

A quick way to think about it

If you are starting a palette, decide roles first, then colors:

1. Define the roles you need (primary, neutral scale, semantic set, states).
2. Build the neutral scale first — it carries most of the UI.
3. Choose primary and secondary, then derive state variants.
4. Check contrast for every text/background and control/background pairing.
5. Verify meaning is never color-only.

A palette is working when a new screen can be assembled from it without inventing new colors — and when every combination a user actually sees still passes contrast.

Convert each of the three RGB numbers (0–255) into a two-digit hexadecimal value, then join them in R, G, B order as #RRGGBB. For example, rgb(255, 99, 71) becomes #FF6347. This works for any CSS or HTML color value, and you can verify it by converting the hex back to RGB.

The conversion rule

Each channel is a number from 0 to 255. Hexadecimal is base 16, so two hex digits represent exactly 0–255 (16 × 16 = 256 values). That's why every channel maps to exactly two characters.

The mapping:

Two anchors worth memorizing: 0 → 00 and 255 → FF. Values 10–15 use the letters A–F.

Step-by-step: converting by hand

Take rgb(102, 51, 153) (a medium purple).

Step 1 — Convert R = 102. Divide by 16: 102 ÷ 16 = 6 remainder 6. So the first digit is 6, the second is 6 → 66.

Step 2 — Convert G = 51. 51 ÷ 16 = 3 remainder 3 → 33.

Step 3 — Convert B = 153. 153 ÷ 16 = 9 remainder 9 → 99.

Step 4 — Join in order. #663399.

The division method: the quotient is the first hex digit, the remainder is the second. If the remainder is 10–15, write A–F.

The leading-zero trap

This is the most common mistake. If a channel value is below 16, the hex result is a single digit — but you must pad it to two digits.

• rgb(0, 255, 0) → R = 0 → 00, G = 255 → FF, B = 0 → 00 → #00FF00 ✓
• rgb(5, 10, 15) → R = 5 → 05, G = 10 → 0A, B = 15 → 0F → #050A0F ✓

Writing #5AF instead of #050A0F produces a different color, because three-digit hex is shorthand that expands each digit (#5AF → #55AAFF).

Handling out-of-range and decimal inputs

RGB values must be integers from 0 to 255. If your input breaks that:

• Above 255 (e.g., from a calculation): clamp to 255, or the hex will overflow past two digits.
• Below 0: clamp to 0.
• Decimals (e.g., rgb(102.6, 51.2, 153.9)): round or truncate to an integer first. Rounding is the more common convention; either way, decide and apply it consistently.

Verify the result

Two quick checks catch almost every error:

1. Convert back. Take your hex and convert it to RGB. If you get the original three numbers, the conversion is correct. #663399 → R = 6×16 + 6 = 102, G = 3×16 + 3 = 51, B = 9×16 + 9 = 153. Matches.
2. Paste it into code. Drop the hex into a CSS rule like color: #663399; and confirm the browser renders the color you expect. A typo in a hex digit usually shows up immediately as the wrong shade.

Using a converter instead of hand math

For one-off conversions, an online tool is faster and removes arithmetic risk. HexColor.co's lookup accepts a hex code, an RGB value, or a browser color name and returns the conversions — including RGB, HSL, HSV, CMYK, and the CIE spaces — along with harmonies, shades, tints, and contrast figures against white and black. You can enter a value like rgb(102, 51, 153) directly and read off the hex.

Browser DevTools also works: open the color picker in the Styles panel, switch to the RGB or hex field, and the value updates live. This is useful when you're already editing a page and want to confirm a color in context.

When you need more than one color

If you're converting several RGB values to build a palette, a single converter gets tedious. HexColor.co groups its 22 tools by task — palette and scheme generators, a color mixer, gradient generators, and an image-to-colors extractor — so you can pull colors out of an image or website and get the hex values in one pass rather than converting each channel by hand.

A color code is a standardized value that identifies one exact color so it can be reproduced consistently across screens, print, and materials. The two you'll meet most often are HEX (digital, screen-based) and Pantone/PMS (physical, print-based). You can get both from any image by uploading it to a browser-based extractor like Clariss, which scans the pixels and returns swatches with their HEX codes and closest Pantone references — no server upload required.

HEX vs Pantone: what each code is for

The practical rule: pick HEX when the output lives on a screen, pick Pantone when the output is printed or manufactured. Because the same visual color can shift between the two systems, tools that return both let you carry one palette into either context.

How to extract color codes from an image

1. Choose your image. Accepted formats are JPEG, PNG, GIF, and WEBP.
2. Upload it. Click to select the file or drag and drop it into the tool.
3. Pick a scan depth (see the next section). The tool runs a k-means clustering algorithm over the image's pixels to find the most dominant colors.
4. Read the results. You get a set of color swatches, each with its exact HEX code and closest Pantone (PMS) reference, ready to copy or download.

The whole process runs in your browser via JavaScript. The image is never sent to or stored on a server, and once you close or refresh the page no trace of it remains — useful if you're working with client material you'd rather not upload elsewhere.

Choosing a scan depth

The tool offers four levels, returning between 9 and 36 colors:

• Quick Scan — 9 colors. Good for simple graphics, logos, or flat illustrations with few distinct colors.
• Standard Scan — 18 colors. A solid default for most photos and illustrations.
• Deep Scan — 27 colors. Use when an image has more color variety and Standard feels like it's missing tones.
• Extended Scan — 36 colors. Maximum coverage for rich, gradient-heavy or highly detailed images.

For most photos and illustrations, Standard or Deep gives the most useful palette without too much repetition. Going higher than the image's actual color variety mostly adds near-duplicate swatches.

Using the codes in real work

Once you have the swatches, copy the HEX values straight into CSS, a design tool, or a brand file, and use the Pantone references when the same palette needs to go to print. The HEX codes and Pantone references the tool generates are standard color values with no restrictions on use, so they're fine for branding, print, web design, and commercial projects — the only thing to check is that you have the rights to the source image you uploaded.

If you need to move between systems, the same tool includes a HEX ⇄ Pantone converter, which is handy when a client hands you one format and expects the other back.

Online color tools split into four jobs: looking up and converting a color, building a palette, generating shades and gradients, and checking that a color combination is readable. HexColor.co covers all four with 22 free tools, no account required, and the same result every time you run one. Pick by what you're trying to finish, not by tool name — the site groups its tools that way for exactly this reason.

Start with a lookup if you only have one color

Type a hex code, an rgb value, or a color name a browser understands into the lookup box, and you get back everything about that color in one place instead of opening four tabs:

• Conversions across rgb, hsl, hsv, cmyk, and the CIE color spaces
• Harmonies built around that color
• Its shades and tints
• Contrast figures against white and black
• Its nearest RAL and Pantone matches
• How the color looks to eyes that see it differently

The site accepts formats like teal, #FF6347, or rgb(102, 51, 153). Every hex code also has its own page, so you can link to or bookmark a single color rather than re-entering the value.

If you're starting from a name instead of a code, the site lists 24 of the 148 browser color names, chosen so no two look alike — Tomato #FF6347, Gold #FFD700, Aqua #00FFFF, Crimson #DC143C, and so on. Each has its own page.

Match the tool to the task

The 22 tools are grouped by what you're trying to do, which is more useful than an alphabetical list — if you already knew the tool's name, you'd have searched for it.

Two decisions fall out of this table:

Converting a single value vs. building a set. If you have one color and need its rgb, hsl, or cmyk equivalent, the lookup or Color Converter is enough. If you need a family of colors that work together, start with the palette or harmonies generator instead — converting one color at a time won't get you there.

Extracting from an image or site vs. picking by hand. When the color already exists somewhere — a logo, a screenshot, a competitor's page — use Image to Colors, Extract Color Palette from a Website, or Brand Color Extractor rather than eyeballing a picker. When you're choosing from scratch, the picker and random tools are the faster path.

Check accessibility before you ship

Two tools answer a question the others don't: will people actually be able to read this?

• Color Contrast Checker gives you the contrast figures for a pairing, so you can confirm text stays legible against its background.
• Color Blindness Simulator shows how a color looks to eyes that see it differently, which catches combinations that pass a contrast check but still collapse into each other for some viewers.

Run both on any palette you intend to ship. A palette that looks fine to you can still fail for a meaningful share of your audience, and these two checks are the cheapest way to find that out before launch.

What the site is, and what that means for you

HexColor.co is free, requires no account, and returns the same answer every time — so a color you look up today matches what a colleague gets next week. That consistency matters when you're passing values between design and code.

If you need more than a palette — a full design system with Tailwind config, CSS variables, SCSS, design tokens, dark mode, and WCAG contrast handled — the site points to Palette Studio for that, which is a different scope from the 22 single-purpose tools.

A practical order of operations

1. Have a color already? Look it up to get its conversions, harmonies, and nearest Pantone/RAL.
2. Need a set? Build it with the palette or harmonies generator, or extract it from an image or website if the source exists.
3. Need variations? Use shades and tints, the mixer, or the gradient generator.
4. Before shipping: run the contrast checker and the color blindness simulator on the final pairing.

Each step feeds the next, and because results are reproducible, you can hand any value to a teammate and they'll see the same thing.