十六进制颜色与RGB颜色的工作原理及配色组合查询方法

Hey there! Let’s demystify how RGB and hex color systems work, and how you can map between them to create exactly the color you’re after.

Core Mechanics: RGB vs Hex Colors #

First, let’s start with RGB—it stands for Red, Green, Blue. Every color on your screen is made by mixing these three primary light channels, each with a brightness value ranging from 0 (completely off) to 255 (full brightness). That’s because each channel uses 8 bits of data, and 2^8 = 256 possible values (hence 0 to 255 inclusive).

Hexadecimal (hex) is just a condensed, base-16 representation of the same RGB data. Since each RGB channel is 8 bits, we can represent that 8-bit value as two hex digits (each hex digit is 4 bits, so 2 digits = 8 bits). Hex digits go from 0 to F (where A=10, B=11, ..., F=15), so a single RGB channel’s 0-255 range translates to 00 (0) to FF (255) in hex.

Mapping RGB to Hex (and Vice Versa) #

The hex color format is always #RRGGBB, where:

• RR = hex value of the Red channel
• GG = hex value of the Green channel
• BB = hex value of the Blue channel

Example Conversions #

• Black: RGB(0, 0, 0) → each channel is 0, so hex is #000000 (often shortened to #000 when all channels have matching double digits)
• Red: RGB(255, 0, 0) → Red is maxed out (255 = FF), others are 0 → #FF0000 (shortened to #F00)
• Teal: RGB(0, 128, 128) → Green=128 (80), Blue=128 (80) → #008080

Quick Conversion Tricks #

• To turn a hex channel to decimal: Multiply the first digit by 16, add the second digit. For example, 1E → (1*16) + 14 = 30
• To turn a decimal channel to hex: Divide by 16 to get the first digit, the remainder is the second. For example, 144 → 144/16=9, remainder 0 → 90

Crafting Specific Colors: How to Choose Channel Values #

The key is to adjust each RGB (or hex) channel to balance the three primary colors. Here are some common scenarios:

• Warm tones: Crank up the Red and Green channels, keep Blue low. Example: Warm yellow → RGB(255, 200, 0) → #FFC800
• Cool tones: Boost Blue and Green, lower Red. Example: Sky blue → RGB(135, 206, 235) → #87CEEB
• Pastels: Use high values for your target color, but add some brightness to the other channels. Example: Soft pink → RGB(255, 192, 203) → #FFC0CB
• Dark tones: Lower all channel values, but keep the relative balance. Example: Dark purple → RGB(75, 0, 130) → #4B0082

Remember, the higher the value (closer to 255 or FF), the brighter that color component is; the lower (closer to 0 or 00), the darker it is.

内容的提问来源于stack exchange，提问作者Aungthet Paing