UnitConverterUnitConverter

Seleccionar idioma

Elige tu idioma preferido

Hexadecimal Colors in Web Design

Understanding #RRGGBB

Learn Hex Colors

Every web designer encounters codes like #FF5733 o #2C3E50. These hexadecimal color codes son un/una compact manera un/una specify colors usando el/la mismo numero sistema programmers usar for binary datos. Understanding hex colors unlocks preciso color control in web design.

How Hex Colors Work

RGB Color Model

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

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

Hexadecimal Representation

  • 256 valores = FF in hex (two hex digits)
  • More compact than decimal (255,128,0 vs FF8000)
  • Easy un/una type y remember

Ejemplo: #FF5733

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

Common Color Values

ColorHex CodeRGB
Black#0000000, 0, 0
White#FFFFFF255, 255, 255
Red#FF0000255, 0, 0
Green#00FF000, 255, 0
Blue#0000FF0, 0, 255
Yellow#FFFF00255, 255, 0
Cyan#00FFFF0, 255, 255
Magenta#FF00FF255, 0, 255
Gray#808080128, 128, 128
Convertir Number Systems

Shorthand Hex Colors

CSS permite 3-digit shorthand cuando ambos digits in cada pair son el/la mismo.

How It Works

  • #RGB expands un/una #RRGGBB
  • Each digit es doubled

Ejemplos

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

Limitation

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

Hex with Alpha (Transparency)

8-Digit Hex: #RRGGBBAA

Modern CSS soporta 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 un/una RGB

Method

  1. Take cada 2-digit pair
  2. Convertir desde hex un/una decimal

Ejemplo: #4Un/Una90D9

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

Referencia rapida

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

Converting RGB un/una Hex

Method

  1. Convertir cada decimal valor (0-255) un/una hex (00-FF)
  2. Combine with # prefix

Ejemplo: rgb(100, 200, 150)

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

Quick Math

  • Divide por 16 = primero digit
  • Remainder = segundo 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 un/una Use Each

  • Hex: Most comun, compact
  • RGB/RGBA: When calculando 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

Conclusion

Hexadecimal color codes son un/una compact manera un/una express RGB colors usando el/la base-16 numero sistema. Each pair of digits (00-FF) represents one color channel's intensity desde 0-255. Understanding hex colors helps web designers trabajar efficiently with color pickers, style sheets, y design herramientas. While herramientas puede do el/la conversion, knowing como hex colors trabajar habilita better color manipulation y quicker debugging.

Articulos relacionados

Usa nuestro Number Convertidor
Hexadecimal Colors in Web Design: #RRGGBB Guide | YounitConverter