Hexadecimal Colors in Web Design

Todo web designer encounters codes like #FF5733 ou #2C3E50. Estes hexadecimal color codes são a compact way to specify colors usando o mesmo number sistema programmers use for binary data. Understanding hex colors unlocks precise color control in web design.

Como Hex Colors Work

RGB Color Model

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

• Cada channel tem 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)
• Mais compact than decimal (255,128,0 vs FF8000)
• Fácil to type e remember

Exemplo: #FF5733

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

Comuns Color Values

Shorthand Hex Colors

CSS allows 3-digit shorthand quando ambos digits in cada pair são o mesmo.

Como It Works

• #RGB expands to #RRGGBB
• Cada digit é doubled

Examples

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

Limitation

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

Hex com Alpha (Transparency)

8-Digit Hex: #RRGGBBAA

Modern CSS supports adding alpha channel:

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

Comuns Alpha Values

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

Converting Hex to RGB

Method

1. Take cada 2-digit pair
2. Converter from hex to decimal

Exemplo: #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. Converter cada decimal value (0-255) to hex (00-FF)
2. Combine com # prefix

Exemplo: 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 = primeiro digit
• Remainder = segundo digit
• 100 ÷ 16 = 6 remainder 4 → 64

Usando Hex Colors in CSS

Padrão 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 com alpha
• hsl(9, 100%, 60%) - Hue, Saturation, Lightness

Quando to Usar Cada

• Hex: A maioria comum, compact
• RGB/RGBA: Quando calculating colors dynamically
• HSL: Quando 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

Conclusão

Hexadecimal color codes são a compact way to express RGB colors usando o base-16 number sistema. Cada pair of digits (00-FF) represents one color channel's intensity from 0-255. Understanding hex colors helps web designers work efficiently com color pickers, style sheets, e design tools. While tools can do o conversão, knowing como hex colors work enables better color manipulation e quicker debugging.

Artigos Relacionados

• Como to Converter Number Bases: Passo a Passo Guia
• Binary, Decimal, e Hexadecimal: Understanding Number Bases
• Binary in Computing
• Bits vs Bytes