HEX 转 RGB 转换器，免费

HEX 转 RGB 的原理

HEX 颜色使用 6 位十六进制字符串（#RRGGBB），每两位代表红、绿、蓝通道。数值范围为 00（0）到 FF（255）。

RGB 为每个通道使用三个十进制数字（0 到 255）。例如，#2b7190 拆分为 R:43、G:111、B:142。

常见问题

如何手动将 HEX 转换为 RGB？

将 hex 代码分成三对（如 #FF8800 → FF、88、00），然后把每对从 16 进制转换为 10 进制：FF = 255，88 = 136，00 = 0。结果是 rgb(255, 136, 0)。

3 位 HEX 代码怎么处理？

3 位 HEX 是一种缩写形式，每位数字都被重复：#F80 = #FF8800。此转换器会自动处理两种格式。

什么时候用 HEX，什么时候用 RGB？

HEX 更紧凑，在 CSS 中广泛使用。当您需要在代码中单独操作各通道，或使用 rgba() 处理透明度时，RGB 更合适。

What hex notation actually is

A hex color is a base-16 representation of a 24-bit RGB color. Six digits after the #, three pairs: red, green, blue. Each pair is a number from 00 to ff: one byte (8 bits) per channel, three channels, 24 bits total. That's exactly enough to encode any one of 2²⁴ = 16,777,216 discrete colors. The "true colour" / "millions of colours" range that has been the consumer-display baseline since the late 1990s.

The hash sign isn't part of the value, it's a syntactic prefix that tells the CSS parser "what follows is a hex color, not a variable name." Without it, a string like ff0000 could be ambiguous to the lexer. The digits 0–9 keep their decimal meaning; the letters A–F (case-insensitive in CSS) represent decimal 10–15. So f is 15, ff is 15 × 16 + 15 = 255.

The math, with worked examples

Each two-digit hex pair maps to a decimal 0–255 by the formula (high_digit × 16) + low_digit, where each digit is interpreted as 0–15 (A=10 through F=15):

• FF → (15 × 16) + 15 = 255
• 88 → (8 × 16) + 8 = 136
• 00 → 0
• 2B → (2 × 16) + 11 = 43 (the red channel of the default #2b7190 swatch above)
• 71 → (7 × 16) + 1 = 113
• 90 → (9 × 16) + 0 = 144

In JavaScript the entire parse fits in two lines. const n = parseInt(hex.slice(1), 16); followed by const [r, g, b] = [(n >> 16) & 0xff, (n >> 8) & 0xff, n & 0xff];: that's essentially the substantive code of every hex-to-RGB converter on the web. The reverse direction is '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0').

3-digit, 4-digit, and 8-digit shorthand

CSS allows abbreviated forms when the channels are symmetrical:

• 3-digit (#RGB), each digit is duplicated to form the equivalent 6-digit code. #F00 → #FF0000; #FFF → #FFFFFF; #369 → #336699. The form is convenient for "round" designer-friendly colours but can only express 4,096 unique values, not 16.7 million, there's no shorthand for #778899 because the pairs differ.
• 8-digit (#RRGGBBAA)) same as 6-digit plus an alpha pair. 00 = fully transparent, FF = fully opaque, 80 ≈ 50% opacity. Functionally identical to rgba(255, 0, 0, 0.5) but more compact.
• 4-digit (#RGBA), duplication-shorthand of the 8-digit form. #F00A → #FF0000AA.

The 3-digit shorthand existed in CSS Level 1 (1996). The 4-digit and 8-digit alpha forms came much later in CSS Color Module Level 4, with broad cross-browser availability since around mid-2015.

Named colors and the rebeccapurple story

Before hex became the default web idiom, named colors were the norm. HTML 4.01 (December 1999) specified 16 named colors, black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua: based on the standard 16 colors of the Windows VGA palette. CSS 2.1 added orange as the 17th. CSS Color Module Level 3 then formally adopted around 130 additional names from the X11 rgb.txt file (which Mosaic and early Netscape inherited from their X Window System roots), bringing the total to roughly 147–148 depending on how you count aliases like cyan/aqua and gray/grey.

CSS Color Module Level 4 added one more, with a story attached. Rebecca Meyer was the six-year-old daughter of Eric A. Meyer, an early CSS authority and W3C participant. She died of brain cancer on 7 June 2014, on her sixth birthday. Eric wrote on his blog the same week: "She made it to six. For almost twelve hours, she was six." A community member proposed adding her favourite colour, a deep eggplant purple, hex #663399: as beccapurple; Eric accepted with one stipulation: it must be rebeccapurple, not beccapurple, because Rebecca herself had recently announced she was now too big for the baby name. The CSS Working Group approved the change on 22 June 2014, two weeks after her death. WebKit and other browser engines shipped support within days. It's the only CSS colour named after a person, a quiet memorial in every modern browser.

sRGB: the implied colour space of every hex code

When you write #FF5733 in CSS, you're not just specifying a number, you're specifying it in the sRGB color space. This is implicit; the browser will interpret your hex value as sRGB unless you use one of the newer color() functions to specify otherwise.

sRGB was proposed jointly by Hewlett-Packard and Microsoft in 1996 and adopted as IEC 61966-2-1:1999, a single, device-independent colour space designed around the response curve of the typical CRT monitor of the era. It shares its primary chromaticities with ITU-R BT.709 (the HDTV standard) at white point D65 (6500 K). The W3C explicitly defined sRGB as the default colour space for the web; all hex codes, all rgb() values, all classic JPEG and untagged PNG images are interpreted as sRGB.

Honest limitation: sRGB covers roughly 35.9% of the CIE 1931 visible-color diagram. There are colours that exist in nature, can be displayed by modern OLED phone screens, but cannot be specified in hex notation, saturated emerald greens, vivid red-orange sunset hues, fluorescent paints. CSS Color Module Level 4 introduced new spaces for them, accessible via the color() function: Display P3 (used by Apple displays since iPhone 7 and the late-2015 iMac, about 25% wider than sRGB) and Rec. 2020 (the broadcast 4K/8K standard, about 75% of CIE 1931). On older sRGB-only devices the browser falls back gracefully.

Modern alternatives: HSL, HWB, OKLCH

Hex is compact but not human-friendly, you can't look at #3DE7C9 and guess the hue. CSS has progressively added functional notations that match how humans think about colour:

• HSL: hue, saturation, lightness. Hue is an angle 0–360°. Introduced in CSS Color Module Level 3 (2011). Intuitive sliders, but lightness is not perceptually uniform, yellow at L=50% looks much brighter than blue at the same lightness.
• HWB: hue, whiteness, blackness. Easier for a painter's mental model ("a blue with a little white and a touch of black"). Same gamut as HSL.
• LCH / Lab: perceptually uniform; equal numerical changes correspond to equal perceived changes. Supports the wide P3+ gamut.
• OKLCH: the newest entrant, introduced by Björn Ottosson in December 2020. Fixes CIELAB's hue distortion and dark-color gradient problems. Equal lightness numbers look equally bright across all hues. Linear interpolation in OKLCH produces visually smooth gradients without the muddy gray midpoints you get from linear-gradient(red, green) in sRGB. Tailwind CSS v4.0 (January 2025) moved its entire default colour palette from rgb() to oklch(). Browser support has been broad since around 2023.

OKLCH is the long-term direction for CSS colour, but hex codes will remain the lingua franca of design tooling, brand specs, and copy-pasted snippets, they're short, copy-paste-safe across any text medium, and universally understood.

The 1861 origin of additive RGB

The RGB model traces to the Young–Helmholtz trichromatic theory of vision (early 19th century), which proposed that the human eye has three types of colour receptors corresponding to red, green, and blue. James Clerk Maxwell demonstrated this experimentally on 17 May 1861 at the Royal Institution in London. He projected three black-and-white photographs of a tartan ribbon (one shot through a red filter, one green, one blue) through three projectors fitted with the same coloured filters; the recombined image on the screen showed the ribbon in approximately full colour. This is generally credited as the first colour photograph. The same additive-RGB principle drives every CRT, LCD, OLED, and plasma display ever made: each pixel is a triad of red, green, and blue subpixels of independently variable brightness, and your retina mixes them into a perceived colour.

More questions

Is hex case-sensitive?

No. #abcdef and #ABCDEF are identical to the parser. The CSS spec is explicit: hex colour values are case-insensitive. Mixed case like #FfAa00 is also legal, though uncommon in production code. (Not to be confused with URL fragments, where the leading hash is a different syntactic concept entirely.)

Why does averaging two hex codes produce a muddy gray?

Because hex values are gamma-encoded (the sRGB transfer function is applied), and averaging in the gamma space isn't the same as averaging in linear-light. The classic example is linear-gradient(red, green) producing a muddy olive midpoint, the maths is correct in the gamma-encoded space but visually wrong. Modern colour functions like OKLCH solve this by interpolating in a perceptually uniform space, which is why they produce smoother gradients.

Why isn't there a hex code for "neon" or "fluorescent" colours?

Because hex notation is implicitly sRGB, and sRGB only covers about 36% of the colours the human eye can see. Many vivid colours (saturated emerald greens, bright red-oranges, fluorescent paints) exist in nature and can be displayed on modern wide-gamut screens but fall outside the sRGB cube. To reach them you need color(display-p3 …), color(rec2020 …), or oklch() with high chroma values. Those colours have no hex equivalent.

What was the "web-safe palette"?

In the late 1990s, when many monitors were limited to 256 colours, designers stuck to a palette of 216, the intersection of the Windows and Mac OS system palettes. The 216 came from a 6×6×6 cube: each of R, G, and B took only the values 00, 33, 66, 99, CC, FF. Lynda Weinman popularised it in her 1996 book Designing Web Graphics. It became obsolete around 2000 as 24-bit colour shipped on consumer hardware. Today it's pure historical curiosity, occasionally still visible in vintage hex codes like #CC0033 or #993366.

Does anything get sent to a server?

No. Hex-to-RGB is two lines of pure-function JavaScript arithmetic. The conversion runs locally; nothing about the colour you enter is uploaded anywhere; the page works offline once it's loaded.

相关工具