Valores de color CSS
Los colores con nombre te sirven para empezar. Marcas y diseños necesitan valores exactos — un teal concreto, una capa suave, un tono que puedas mover un poco. Eso llega con los formatos de valor de color: hex, rgb() / rgba() y hsl() / hsla().
¿Qué es un valor de color?
Un valor de color es lo que escribes tras una propiedad que acepta color — por ejemplo tras color: o más adelante background-color:. La misma propiedad de antes; formas más ricas de escribir el color. Las palabras con nombre siguen contando como valores. Hoy añadimos los formatos numéricos que usarás cada semana.
Formatos de un vistazo
Elige el formato según la tarea. No necesitas toda la sintaxis el primer día — aprende el mapa y practica los tres de cada día.
📊 Formatos de valor de color CSS
| Formato | Ejemplo | Mejor para |
|---|---|---|
| Con nombre | teal |
Demos rápidas, enseñanza, borradores |
| Hex | #0f766e |
Herramientas de diseño, tokens de marca, pegar desde Figma |
rgb() / rgba() |
rgb(15 118 110) / rgba(15, 118, 110, 0.85) |
Pensar en canales, transparencia con alfa |
hsl() / hsla() |
hsl(174 77% 25%) |
Ajustar tono/luminosidad sin salir de la familia |
Colores hex
Los valores hex empiezan con # y dígitos hex (0–9, a–f). Formas comunes: seis dígitos #rrggbb (completo) y tres #rgb (corto — cada dígito se duplica). Mayúsculas o minúsculas da igual.
Hex en texto y nota suave
cssh1 {
color: #0f172a;
}
.note {
color: #0f766e;
}Cómo leer #0f766e
Los pares son rojo, verde, azul: 0f / 76 / 6e. Las apps de diseño suelen exportar esta cadena — pégala en CSS tal cual y conserva el #.
rgb() y rgba()
rgb() mezcla canales rojo, verde y azul de 0 a 255 (o porcentajes en sintaxis moderna). Añade alfa con rgba() o un cuarto valor para que el color sea parcialmente transparente.
Canales RGB y fundido RGBA
css.lead {
color: rgb(51, 65, 85);
}
.overlay-label {
color: rgba(15, 118, 110, 0.9);
}Alfa en una frase
El alfa es la transparencia de ese color — 1 (o 100%) es sólido; valores menores dejan ver lo de detrás. No es lo mismo que quitar el elemento del layout.
hsl() para pensar en tono
hsl() usa tono (ángulo en la rueda), saturación (%) y luminosidad (%). Útil cuando quieres «misma familia, un poco más claro» sin recalcular hex a mano.
Acento HSL que puedes ajustar
css.badge {
color: hsl(174, 77%, 28%);
border: 2px solid hsl(174, 77%, 20%);
}Hábito de ajuste
Mantén el tono, sube la luminosidad para texto más suave o bájala para un título más fuerte. La saturación controla lo vivo que se siente el color.
¿Qué formato usar?
- Hex — por defecto al copiar de un archivo de diseño o paleta de marca
rgb()/rgba()— cuando importan los canales o necesitas alfa rápidohsl()— al explorar o ajustar una familia de colores relacionados- Con nombre — sigue bien para bocetos y demos didácticas
Todos son válidos hoy encolor; los reutilizarás en fondos después.
Pruébalo tú
- Página con
h1,.leady.note. - Título con hex (
#0f172a), lead conrgb(51, 65, 85)y note con#0f766e. - Añade
.badgeconhsl(174, 77%, 28%)y un borde HSL más oscuro del mismo tono. - Suaviza una etiqueta con
rgba(15, 118, 110, 0.75)— debe verse menos sólida que1. - Opcional: forma corta solo si los pares se duplican de verdad; si no, deja seis dígitos.
Errores frecuentes
- Olvidar
#antes del hex (0f766esolo no es un color válido) - Letras fuera de
a–fen hex - Canales RGB fuera de
0–255(o unidades mezcladas mal) - Esperar que el alfa quite espacio de layout como
display: none - Tratar cada formato como «más específico» en la cascada — el formato no cambia la especificidad
Resumen
- Los valores de color son formatos para las mismas propiedades que aceptan color
- Hex es el formato cotidiano al pegar desde diseño
rgb()/rgba()exponen canales y alfahsl()ayuda a pensar en tono, saturación y luminosidad- Los colores con nombre siguen válidos; elige el formato según el trabajo
- Practica hex más un formato funcional (
rgbaohsl) hasta que ambos resulten naturales
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior