颜色转换器

调整下方数值,然后点击“计算”查看结果。
Three or six hex digits, with or without the #
结果
输入数值,然后点击“计算”。

以下详细说明暂以英文提供。

HEX, RGB, and HSL in one breath

All three notations describe the same color. HEX packs the red, green, and blue channels into two-digit base-16 numbers, which makes it compact for stylesheets. RGB spells the same channels out in base 10, which is easier to read in code. HSL re-expresses the mix as hue (position on the color wheel, 0–360°), saturation (how colorful it is), and lightness — far more intuitive when you need a sibling shade: keep the hue, nudge the lightness, and you have a hover state.

Putting the complementary color to work

The complement is generated by rotating the hue exactly 180° while leaving saturation and lightness untouched. Placed next to each other, a color and its complement produce maximum visual tension, which is why sports teams and warning labels pair them; used sparingly as an accent — one element in ten — a complement makes a design pop without shouting. For text on a background, prefer checking actual contrast ratios before committing.

中国本地参考

日常计算时值得知道的中国本地规则:

  • 计量的单位习惯: 住房面积用平方米,土地常用亩(1 亩 ≈ 666.7 平方米);里程用公里,油耗用 L/100km。
  • 日期与数字格式: 日期写作 2026年10月13日(年-月-日);大数习惯用万、亿(1 万 = 10,000,1 亿 = 100,000,000)。
  • 法定节假日: 全年法定节假日 11 天,春节与国庆为长假;调休安排每年由国务院办公厅发布。
  • 速度与限速: 高速公路最高限速 120 km/h,城市快速路多为 80 km/h,均以公里每小时计。
  • 鞋服尺码: 鞋码用中国码(毫米制),服装常用 155/80A 这类身高围度组合,与欧美码不同。

数据核对:2026 年 10 月

常见问题

Why does the 3-digit shorthand work?

Each digit is doubled: #F46 expands to #FF4466, because browsers interpret every digit as both digits of its pair. The shorthand can only express colors whose pairs repeat, so #4F46E5 has no 3-digit form.

Does converting between notations lose precision?

No. HEX and RGB are the same three 0–255 channels, so the conversion is exact. HSL rounds hue to whole degrees and saturation or lightness to whole percent, which can shift a color by a hair when you convert back — imperceptible in practice.

What is the difference between complementary and contrasting colors?

Complementary means opposite on the color wheel, a fixed 180° relationship. Contrast measures the difference in brightness between two colors as a ratio; two complements can still fail accessibility contrast tests if their lightness is similar.

相关计算器