Hexadecimal Colors in Web Design

Every web designer encounters codes like #FF5733 or #2C3E50. These hexadecimal color codes are a compact way to specify colors using the same number system programmers use for binary data. 理解する hex colors unlocks precise color control in web design.

How Hex Colors Work

RGB Color Model

Digital screens create colors by combining red, green, and blue light.

• Each channel has 256 intensity levels (0-255)
• 0 = no light, 255 = full intensity
• 256 × 256 × 256 = 16.7 million possible colors

Hexadecimal Representation

• 256 values = FF in hex (two hex digits)
• More compact than decimal (255,128,0 vs FF8000)
• Easy to type and remember

Example: #FF5733

• FF = 255 red (maximum)
• 57 = 87 green (moderate)
• 33 = 51 blue (low)
• Result: Bright orange-red color

Common Color Values

Shorthand Hex Colors

CSS allows 3-digit shorthand when both digits in each pair are the same.

How It Works

• #RGB expands to #RRGGBB
• Each digit is doubled

Examples

• #FFF = #FFFFFF (white)
• #000 = #000000 (black)
• #F00 = #FF0000 (red)
• #369 = #336699 (steel blue)

Limitation

#FF5733 cannot be shortened (57 ≠ 55 or 77)

Hex with Alpha (Transparency)

8-Digit Hex: #RRGGBBAA

Modern CSS supports adding alpha channel:

• AA = opacity (00 = transparent, FF = opaque)
• #FF573380 = 50% transparent orange-red

Common Alpha Values

• FF = 100% opaque
• CC = ~80% opaque
• 80 = 50% opaque
• 40 = 25% opaque
• 00 = fully transparent

Converting Hex to RGB

Method

1. Take each 2-digit pair
2. Convert from hex to decimal

Example: #4A90D9

• 4A = 4×16 + 10 = 74 red
• 90 = 9×16 + 0 = 144 green
• D9 = 13×16 + 9 = 217 blue
• RGB: rgb(74, 144, 217)

Quick Reference

• 00 = 0
• 40 = 64
• 80 = 128
• C0 = 192
• FF = 255

Converting RGB to Hex

Method

1. Convert each decimal value (0-255) to hex (00-FF)
2. Combine with # prefix

Example: rgb(100, 200, 150)

• 100 = 64 (6×16 + 4)
• 200 = C8 (12×16 + 8)
• 150 = 96 (9×16 + 6)
• Hex: #64C896

Quick Math

• Divide by 16 = first digit
• Remainder = second digit
• 100 ÷ 16 = 6 remainder 4 → 64

Using Hex Colors in CSS

Standard Usage

color: #FF5733;

background-color: #2C3E50;

border: 2px solid #E74C3C;

Alternative CSS Color Formats

• rgb(255, 87, 51) - RGB decimal
• rgba(255, 87, 51, 0.5) - RGB with alpha
• hsl(9, 100%, 60%) - Hue, Saturation, Lightness

When to Use Each

• Hex: Most common, compact
• RGB/RGBA: When calculating colors dynamically
• HSL: When adjusting lightness/saturation

Popular Color Palettes in Hex

Material Design

• Primary Blue: #2196F3
• Green: #4CAF50
• Red: #F44336
• Purple: #9C27B0

Flat UI Colors

• Turquoise: #1ABC9C
• Emerald: #2ECC71
• Wet Asphalt: #34495E
• Alizarin: #E74C3C

まとめ

Hexadecimal color codes are a compact way to express RGB colors using the base-16 number system. Each pair of digits (00-FF) represents one color channel's intensity from 0-255. 理解する hex colors helps web designers work efficiently with color pickers, style sheets, and design tools. While tools can do the conversion, knowing how hex colors work enables better color manipulation and quicker debugging.

関連記事

• 変換方法 Number Bases: Step-by-Step Guide
• Binary, Decimal, and Hexadecimal: 理解する Number Bases
• Binary in Computing
• Bits vs Bytes