Saltar al contenido principal

Comprender los colores Web 🎨

Al crear un sitio web, verás códigos extraños como #FF5733, rgb(255, 87, 51). ¡Todos estos son códigos de color! Te lo explicaré de forma sencilla para que incluso los principiantes puedan entenderlo.

¿Por qué usar códigos de color?​

Decimos "rojo", "azul", pero la computadora necesita números precisos.

Por ejemplo:

  • Si dices "rojo": ¿Qué rojo? ¿Rojo brillante? ¿Rojo oscuro? 🤔
  • Si dices #FF0000: ¡Rojo exacto! ✅

3 formas de expresar colores en la Web​

1. Color HEX (Hexadecimal) 🔢​

¡Es el formato más común!

color: #FF5733;
background: #3498db;

Formato:

  • Comienza con el símbolo #
  • 6 dígitos/letras (0-9, A-F)
  • En pares: #RRGGBB
    • RR = Rojo (Red)
    • GG = Verde (Green)
    • BB = Azul (Blue)

Ejemplos:

#FF0000  →  Rojo (Red máximo)
#00FF00  →  Verde (Green máximo)
#0000FF  →  Azul (Blue máximo)
#FFFFFF  →  Blanco (todos los colores máximo)
#000000  →  Negro (todos los colores 0)

2. Color RGB 🎨​

¡Expresado en cantidad de Rojo (Red), Verde (Green), Azul (Blue)!

color: rgb(255, 87, 51);
background: rgb(52, 152, 219);

Formato:

  • rgb(rojo, verde, azul)
  • Cada número entre 0~255

Ejemplos:

rgb(255, 0, 0)     →  Rojo
rgb(0, 255, 0)     →  Verde
rgb(0, 0, 255)     →  Azul
rgb(255, 255, 255) →  Blanco
rgb(0, 0, 0)       →  Negro
rgb(128, 128, 128) →  Gris

Agregar transparencia (RGBA):

rgba(255, 0, 0, 0.5)  →  Rojo semitransparente
             ↑
        0.0 ~ 1.0 (transparente ~ opaco)

3. Color HSL 🌈​

¡La forma más fácil de entender para los humanos!

color: hsl(9, 100%, 60%);
background: hsl(204, 70%, 53%);

Formato:

  • hsl(tono, saturación, luminosidad)
  • H (Hue): Tono (0~360 grados)
  • S (Saturation): Saturación (0~100%)
  • L (Lightness): Luminosidad (0~100%)

Rueda de tonos (Hue):

0° / 360°  →  Rojo
60°        →  Amarillo
120°       →  Verde
180°       →  Cian
240°       →  Azul
300°       →  Magenta

Ejemplos:

hsl(0, 100%, 50%)    →  Rojo puro
hsl(120, 100%, 50%)  →  Verde puro
hsl(240, 100%, 50%)  →  Azul puro
hsl(0, 0%, 50%)      →  Gris
hsl(0, 100%, 100%)   →  Blanco
hsl(0, 0%, 0%)       →  Negro

Comparación de formatos de color​

El mismo color expresado de tres formas:

🔴 Rojo brillante​

HEX:  #FF5733
RGB:  rgb(255, 87, 51)
HSL:  hsl(9, 100%, 60%)

🔵 Azul​

HEX:  #3498db
RGB:  rgb(52, 152, 219)
HSL:  hsl(204, 70%, 53%)

🟢 Verde​

HEX:  #2ecc71
RGB:  rgb(46, 204, 113)
HSL:  hsl(145, 63%, 49%)

¿Cuándo usar qué formato?​

Usar HEX 📝​

  • Cuando el diseñador da códigos de color (lo más común)
  • Para especificar colores simplemente
  • Muy usado en archivos CSS
.button {
  background-color: #3498db;
  color: #ffffff;
}

Usar RGB 🎨​

  • Cuando se necesita transparencia (alpha)
  • Cuando se calculan colores con JavaScript
  • Cuando se cambian colores dinámicamente
.overlay {
  background-color: rgba(0, 0, 0, 0.5); /* Negro semitransparente */
}

Usar HSL 🌈​

  • Cuando se quiere cambiar solo el tono
  • Cuando se quiere ajustar solo la luminosidad
  • Para crear colores de tonos similares
.primary {
  background: hsl(200, 70%, 50%);
}
.primary-light {
  background: hsl(200, 70%, 70%); /* Solo luminosidad cambiada */
}
.primary-dark {
  background: hsl(200, 70%, 30%); /* Más oscuro */
}

Ejemplos prácticos​

Ejemplo 1: Color de botón 🔘​

/* Botón azul */
.button {
  background-color: #3498db;
  color: #ffffff;
}

/* Al pasar el ratón */
.button:hover {
  background-color: #2980b9; /* Azul un poco más oscuro */
}

Ejemplo 2: Fondo degradado 🌅​

.gradient-bg {
  background: linear-gradient(
    to right,
    #667eea,   /* Violeta */
    #764ba2    /* Magenta */
  );
}

Ejemplo 3: Overlay semitransparente 👻​

.modal-overlay {
  background-color: rgba(0, 0, 0, 0.7); /* Negro 70% opaco */
}

Usar herramientas de color​

Convertir colores​

En Color Converter:

  • Conversión HEX → RGB → HSL
  • Selección de color con el selector
  • Copia en diferentes formatos

Uso:

  1. Abrir Color Converter
  2. Seleccionar el color deseado con el selector
  3. ¡Generación automática de códigos HEX, RGB, HSL!
  4. Copiar y usar el formato necesario

Crear degradado CSS​

En Gradient Generator:

  • Degradado con 2 o más colores
  • Ajuste de dirección
  • Generación automática de código CSS

Consejos para elegir colores 💡​

1. Armonía de colores​

Colores complementarios (opuestos):

Rojo(0°) ↔ Cian(180°)
Azul(240°) ↔ Amarillo(60°)

Colores análogos (similares):

hsl(200, 70%, 50%)  Azul
hsl(210, 70%, 50%)  Azul un poco más violeta
hsl(190, 70%, 50%)  Azul un poco más cian

2. Contraste de luminosidad​

Para que el texto sea claramente visible:

/* Buen contraste ✅ */
.good-contrast {
  background: #000000;  /* Negro */
  color: #ffffff;       /* Blanco */
}

/* Mal contraste ❌ */
.bad-contrast {
  background: #cccccc;  /* Gris claro */
  color: #ffffff;       /* Blanco - ¡Difícil de ver! */
}

3. Mantener coherencia​

Usar colores similares para elementos similares:

/* Serie de colores Primary */
.primary       { background: hsl(200, 70%, 50%); }
.primary-light { background: hsl(200, 70%, 70%); }
.primary-dark  { background: hsl(200, 70%, 30%); }

/* Serie de colores Success */
.success       { background: hsl(120, 60%, 50%); }
.success-light { background: hsl(120, 60%, 70%); }
.success-dark  { background: hsl(120, 60%, 30%); }

Códigos de color frecuentemente usados​

Colores básicos​

Rojo:    #FF0000  rgb(255, 0, 0)    hsl(0, 100%, 50%)
Verde:   #00FF00  rgb(0, 255, 0)    hsl(120, 100%, 50%)
Azul:    #0000FF  rgb(0, 0, 255)    hsl(240, 100%, 50%)
Amarillo: #FFFF00  rgb(255, 255, 0)  hsl(60, 100%, 50%)
Magenta: #FF00FF  rgb(255, 0, 255)  hsl(300, 100%, 50%)
Cian:    #00FFFF  rgb(0, 255, 255)  hsl(180, 100%, 50%)

Colores acromáticos​

Blanco:      #FFFFFF  rgb(255, 255, 255)
Gris claro:  #CCCCCC  rgb(204, 204, 204)
Gris:        #808080  rgb(128, 128, 128)
Gris oscuro: #333333  rgb(51, 51, 51)
Negro:       #000000  rgb(0, 0, 0)

Colores populares​

Azul cielo: #87CEEB  rgb(135, 206, 235)
Rosa:       #FFC0CB  rgb(255, 192, 203)
Naranja:    #FFA500  rgb(255, 165, 0)
Violeta:    #800080  rgb(128, 0, 128)
Oro:        #FFD700  rgb(255, 215, 0)

Código HEX abreviado​

Si los mismos dígitos se repiten, se puede abreviar:

#FF0000  →  #F00   (Rojo)
#00FF00  →  #0F0   (Verde)
#0000FF  →  #00F   (Azul)
#FFFFFF  →  #FFF   (Blanco)
#000000  →  #000   (Negro)
#CCCCCC  →  #CCC   (Gris)

Usar nombres de colores​

En CSS también se pueden usar nombres de colores:

color: red;
color: blue;
color: green;
color: white;
color: black;

¡Pero es mejor usar códigos de color precisos!

Considerar la accesibilidad ♿​

Verificar relación de contraste​

  • Texto normal: mínimo 4.5:1
  • Texto grande: mínimo 3:1

Buen ejemplo:

background: #000000;  /* Negro */
color: #FFFFFF;       /* Blanco - Contraste 21:1 */

Mal ejemplo:

background: #777777;  /* Gris */
color: #888888;       /* Gris ligeramente más claro - Contraste demasiado bajo */

Práctica: Experimentar con colores​

Práctica 1: Mismo color, diferente luminosidad​

.color-1 { background: hsl(200, 70%, 20%); } /* Muy oscuro */
.color-2 { background: hsl(200, 70%, 40%); } /* Oscuro */
.color-3 { background: hsl(200, 70%, 60%); } /* Normal */
.color-4 { background: hsl(200, 70%, 80%); } /* Claro */

Práctica 2: Misma luminosidad, diferente color​

.color-1 { background: hsl(0, 70%, 50%); }   /* Rojo */
.color-2 { background: hsl(120, 70%, 50%); } /* Verde */
.color-3 { background: hsl(240, 70%, 50%); } /* Azul */
Consejo

¡Experimenta cambiando directamente los colores en Color Converter!

Preguntas frecuentes (FAQ)​

P1: ¿Qué significan los números y letras en HEX?​

R: Se usa el sistema hexadecimal.

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
                                ↑
                        A=10, B=11 ... F=15

P2: ¿Por qué RGB llega hasta 255?​

R: La computadora expresa cada color en 8 bits (0~255).

0 = Mínimo (sin color)
255 = Máximo (color lleno)

P3: ¿Cómo crear un color transparente?​

R: Usa RGBA o HSLA:

rgba(255, 0, 0, 0.5)   /* Rojo semitransparente */
hsla(0, 100%, 50%, 0.5) /* Rojo semitransparente */

P4: ¿Cómo crear un degradado?​

R: Usa Gradient Generator o:

background: linear-gradient(to right, #667eea, #764ba2);

Próximos pasos 🚀​

Ahora que comprendes los colores:

  1. ✅ Color Converter - Practicar conversión de colores
  2. ✅ Gradient Generator - Crear degradados
  3. ✅ Shadow Generator - Crear sombras de colores
  4. ✅ Border Radius Generator - Crear esquinas redondeadas

Conclusión​

¡Los colores Web no son difíciles!

Puntos para recordar:

  • HEX: #RRGGBB - Lo más común
  • RGB: rgb(rojo, verde, azul) - Puede agregar transparencia
  • HSL: hsl(tono, saturación, luminosidad) - Fácil de entender para humanos

¡Experimentando a menudo con la herramienta Color Converter, te familiarizarás rápidamente! 🎨

El color es un elemento importante que determina el ambiente del sitio web. ¡Prueba varios colores!