Color Converter — HEX, RGB, and HSL

How to Use

1. Enter a HEX, RGB, or HSL color value.
2. Click Convert to view all formats.
3. Use Copy HEX if you need the hex value.

Color Models Explained: HEX, RGB, HSL, HSV, and CMYK

HEX, RGB, and HSL are three ways of writing down the same sRGB colors, so converting between them changes the notation but not the color. HSV and CMYK are genuinely different models, and CMYK in particular does not map cleanly onto a screen. Here is what each one is good for.

HEX

A hash symbol followed by six base-16 digits, two each for red, green, and blue — #4A90E2. It is compact, unambiguous, and the default in design tools, so it is what you will usually be handed during design handoff. The shorthand three-digit form doubles each digit, so #ABC means exactly the same color as #AABBCC. HEX is not case sensitive.

RGB and RGBA

Three channels from 0 to 255 written as rgb(74, 144, 226). Because the channels are plain decimal numbers, RGB is the easiest format to generate or adjust in code — you can loop over channels, interpolate between two colors, or clamp a value without parsing hex pairs first. RGBA adds a fourth alpha value from 0 to 1 for transparency.

HSL

Hue as an angle from 0 to 360 degrees, then saturation and lightness as percentages — hsl(212, 72%, 59%). HSL is the format to reach for when you want to derive related colors rather than pick them one at a time. Dropping lightness by ten points gives you a plausible hover state; dropping saturation gives you a muted or disabled variant. That makes HSL a natural fit for theme systems.

HSV (also called HSB)

Hue and saturation as in HSL, but the third component is value or brightness. The practical difference is where white lives. In HSL, lightness at 100% is always white. In HSV, value at 100% gives you the most vivid form of the hue, and you only reach white by also reducing saturation to zero. HSV matches how most color pickers behave, which is why design tools often show it, but CSS has no native HSV syntax — convert to HSL or RGB before using it in a stylesheet.

CMYK

Cyan, magenta, yellow, and key (black) percentages, used for print rather than screens. CMYK is subtractive — ink absorbs light, where a display emits it — and its gamut is smaller than sRGB, so some vivid screen colors simply cannot be printed. Any screen-to-print CMYK conversion is therefore an approximation that depends on the specific press, paper, and color profile. Treat an on-screen CMYK number as a starting point and confirm with a physical proof before committing to a print run.

How to Convert Between Color Formats

Converting HEX to RGB and RGB to HEX

A hex color is three base-16 numbers stuck together. Each pair of digits is one channel, and each digit is worth 0 to 15, with A through F standing for 10 through 15. To read a pair, multiply the first digit by 16 and add the second.

Take #4A90E2. The pairs are 4A, 90, and E2. Red is (4 × 16) + 10 = 74. Green is (9 × 16) + 0 = 144. Blue is (14 × 16) + 2 = 226. The result is rgb(74, 144, 226).

Going the other way, divide each channel by 16: the quotient is the first hex digit and the remainder is the second. For 74, that is 4 remainder 10, giving 4a. For 144, it is 9 remainder 0, giving 90. For 226, it is 14 remainder 2, giving e2. Join them into #4a90e2. Always pad to two digits — a channel value of 5 becomes 05, not 5, and forgetting the zero is the most common hand-conversion bug.

Converting RGB to HSL

This one has real arithmetic behind it. Divide each channel by 255 so it falls between 0 and 1, then find the largest and smallest of the three and the difference between them. Lightness is the midpoint of the largest and smallest. Saturation is the difference divided by (1 − |2L − 1|), or zero when there is no difference at all. Hue depends on which channel is largest, and is measured in 60-degree segments around the color wheel.

Using rgb(74, 144, 226) again: the normalized channels are 0.2902, 0.5647, and 0.8863. Blue is largest and red is smallest, so the difference is 0.5961. Lightness is (0.8863 + 0.2902) ÷ 2 = 0.5882, or 59%. Saturation is 0.5961 ÷ 0.8235 = 0.7238, or 72%. Because blue is the largest channel, hue is 60 × ((0.2902 − 0.5647) ÷ 0.5961 + 4) = 212.37, which rounds to 212. The result is hsl(212, 72%, 59%).

Note that HSL values are rounded for display, so converting to HSL and straight back can shift a channel by one. The conversion itself is lossless; the rounding is what moves the number. If you need an exact round trip, keep HEX or RGB as your stored value.

Common Colors in HEX, RGB, and HSL

A quick reference for values that come up constantly. Every row below was generated with this page's own conversion functions and round-trip checked, so the three columns are exact equivalents.

Watch the two greens. In CSS, the keyword green is #008000, a mid-tone that is half as light as you might expect, while the bright #00FF00 most people picture is the keyword lime. In HSL both share hue 120 and differ only in lightness, 25% against 50% — a good illustration of why HSL makes relationships between colors easier to see than HEX does.

Alpha and Transparency: RGBA and 8-Digit HEX

Transparency is a fourth channel added to a color. In functional syntax that is rgba(74, 144, 226, 0.5), where alpha runs from 0 (invisible) to 1 (fully opaque). In hex it is an extra pair of digits on the end, giving an eight-digit value such as #4A90E280.

The alpha pair uses the same 00–FF range as the color channels, so to work it out, multiply the opacity you want by 255 and convert to base 16. Half opacity is 0.5 × 255 = 127.5, which rounds to 128, or 80 in hex — very slightly over 50% in practice. Fully opaque is FF and fully transparent is 00. Eight-digit hex is supported in every current browser, though it is worth knowing that the alpha pair comes last in CSS, whereas some other platforms put it first.

One practical caution: a semi-transparent color is not the same as the flattened color it appears to be. Blue at 50% over white looks lighter, but it composites against whatever sits behind it, so the same value over a dark background gives a different rendered result. If you need a fixed appearance regardless of what is underneath, calculate the blended color and use an opaque value instead. The converter on this page works with opaque values — strip the alpha pair before pasting an eight-digit hex in, then reapply it afterwards.

Using These Formats in CSS

CSS natively understands named colors, HEX (three, four, six, and eight digit), rgb(), rgba(), hsl(), and hsla(), plus newer functions such as oklch() and color(). It has no HSV or CMYK syntax, so values from a design tool in those models must be converted before use.

Modern CSS also allows space-separated arguments with an optional slash for alpha, so rgb(74 144 226) and rgb(74 144 226 / 50%) are equivalent to the older comma forms. Under this syntax rgba() and hsla() are simply aliases of rgb() and hsl(), which is why you will increasingly see a single function used for both opaque and transparent colors. Both syntaxes work in current browsers; the comma form remains the safer choice only if you still support genuinely old ones.

When storing colors as custom properties, keep the channels separate if you plan to vary alpha — --brand: 74 144 226 used as rgb(var(--brand) / 50%) lets one token serve both opaque and transparent cases without duplicating the value.

Design tokens are often stored as JSON, and keeping those files readable makes palette changes far easier to review. Tidy them up with the JSON Formatter.

If you need to find every hex color across a stylesheet, or validate that user input is a well-formed color, a short pattern does the job. Build and check one in the Regex Tester.

Hex colors and cryptographic digests both use base-16 notation, which is why a hash and a color can look deceptively similar in a diff. Generate checksums with the Hash Generator.

Once you have settled on a palette, the next step is often turning two or more of those colors into a smooth transition. Build one in the CSS Gradient Generator.

About Color Formats

CSS supports multiple color notations including named colors, hex values, rgb(), and hsl().

Device rendering can still vary slightly because displays and browser color management differ.

Accessibility Reminder

• Do not use color as the only way to communicate status or meaning.
• Check text/background contrast for readability and WCAG compliance.

Why Color Conversion Matters in Practice

Color conversion becomes useful when the same design decision moves between tools and teams. Designers may think in HSL or design-token terminology, developers often work in HEX or rgb(), and QA may need to verify whether a rendered value actually matches the intended palette across themes, breakpoints, and states.

Converting formats quickly reduces transcription mistakes when you are moving from mockups to code, building CSS variables, or debugging a UI that looks almost right but is subtly off because one channel value changed during hand conversion.

Common Color Workflow Mistakes

One common mistake is assuming that different notations imply different colors. HEX, RGB, and HSL are often just different representations of the same value. The important question is not which syntax is best in the abstract, but which one is clearest for the job you are doing.

Another mistake is choosing colors without checking real interface context. A color can look acceptable in isolation and still fail when paired with actual text, icons, disabled states, or dark and light backgrounds. Conversion helps, but accessibility review and contrast checks still matter.

Color Systems and Consistency

Teams that use design tokens or CSS custom properties benefit from keeping a canonical representation for review while still exposing converted values where implementation needs them. That keeps code reviews clearer and reduces accidental drift across components.

Browser-side conversion is especially useful when you want to inspect or transform color values from an internal design system without pasting them into a third-party service. That makes quick iteration easier while keeping the workflow simple and private.

Worked Example: Design Handoff to CSS

Color conversion becomes concrete during design handoff. A designer may specify a component state in HSL because hue and saturation adjustments are easy to reason about, while the front-end codebase may store design tokens in HEX and runtime styles in rgb() or rgba() values. Without a quick way to compare those formats, teams often end up retyping numbers by hand, which is exactly how subtle channel errors slip into production and create almost-the-same colors that are hard to catch in review.

A converter is useful here because it turns a fuzzy visual discussion into explicit values. If a hover state looks slightly too dark, the team can compare the exact HSL lightness, the resulting RGB channels, and the final HEX token instead of arguing from screenshots alone. That speeds up troubleshooting and makes code review more objective.

Theme Systems and Token Maintenance

Modern interfaces often support multiple themes, status colors, semantic aliases, and component-level overrides. In that environment, color values are not isolated paint choices; they are part of a wider design system. A browser-side converter helps when maintaining that system because it lets developers check whether derived values stay aligned across tokens, whether a dark theme variant is a real transformation or just an accidental mismatch, and whether the palette continues to communicate the right hierarchy once values are converted for implementation.

That matters because visual drift usually happens gradually. A token is copied, converted, and adjusted by a few points in one context, then reused elsewhere until the system no longer feels intentional. Conversion tools do not enforce design discipline on their own, but they make the inspection step cheap enough that teams are more likely to catch drift early.

Accessibility Is More Than Picking a Nice Shade

Color work is often discussed aesthetically, but practical UI quality depends on whether values still work under real reading conditions. A brand accent may look strong on a blank canvas and still fail when used for body text, disabled controls, badge borders, or low-contrast overlays. Converting between formats helps because it keeps the conversation tied to exact values, but accessibility review still requires checking actual foreground-background combinations, interaction states, and context across devices.

This is why the page includes educational guidance rather than just outputs. A good converter should help users move between color models while also reminding them that representational accuracy is not the same thing as interface quality. A perfectly converted value can still be the wrong choice if it weakens readability or relies on color alone to communicate meaning.

Why a Local Converter Is Useful

For many teams, the simplest advantage of a browser-side converter is that it removes friction from small but recurring tasks. You can inspect a token from a design system, convert it locally, compare it with an implementation value, and move on without opening a larger toolchain or pasting internal palette work into a third-party site. That is particularly useful when the values come from unreleased product work, design reviews, or internal component libraries.

The page therefore earns its place by doing a modest job well: accurate conversion, immediate feedback, and enough educational context to help users avoid the common mistakes that show up when colors travel from mockups to production code.

Frequently Asked Questions

How do I convert HEX to RGB?

Split the six-digit hex value into three pairs and read each pair as a base-16 number. In #4A90E2 the pairs are 4A, 90 and E2. 4A is (4 × 16) + 10 = 74, 90 is (9 × 16) + 0 = 144, and E2 is (14 × 16) + 2 = 226, giving rgb(74, 144, 226). Paste the hex value into the converter above to get the same result instantly.

How do I convert RGB to HEX?

Convert each channel to a two-digit base-16 number and join them behind a # symbol. For rgb(74, 144, 226): 74 becomes 4a, 144 becomes 90, and 226 becomes e2, giving #4a90e2. Pad any single-digit result with a leading zero, so a channel value of 5 becomes 05 rather than 5.

What is the difference between HSL and HSV?

Both use the same hue angle, but they differ in their third component. In HSL, lightness runs from black at 0% through the pure hue at 50% to white at 100%. In HSV (also called HSB), value runs from black at 0% to the brightest form of the hue at 100%, and you get white by also dropping saturation to 0%. HSL is symmetrical around a mid-point, which makes it easier to build matching light and dark theme variants; HSV maps more closely to how color pickers and paint mixing behave.

How do I add transparency to a HEX color?

Append a two-digit alpha pair to the six-digit hex value, producing an eight-digit hex color. #4A90E2FF is fully opaque, #4A90E280 is roughly 50% transparent, and #4A90E200 is fully transparent. The alpha pair uses the same 00–FF base-16 range as the color channels, so multiply the opacity you want by 255 and convert to hex. The equivalent functional syntax is rgba(74, 144, 226, 0.5) or the modern rgb(74 144 226 / 50%).

Is HEX or RGB better for CSS?

Neither is technically better because they describe the same sRGB colors and browsers treat them identically. HEX is compact and dominant in design tools and token files. RGB and HSL are easier to manipulate programmatically, and HSL in particular makes it straightforward to derive hover and disabled states by adjusting lightness. Most codebases pick one canonical format for stored tokens and convert where needed.

Why does my converted color look slightly different on another screen?

Conversion between HEX, RGB and HSL is lossless within the sRGB color space, so the numbers are exact. Visible differences come from the display instead: panel calibration, color profiles, brightness and browser color management all affect the rendered result. CMYK conversions are a separate case and are genuinely approximate, because CMYK is a print color space with a smaller gamut than sRGB.

References

• MDN: CSS <color> values
• W3C: CSS Color Module Level 4