Si estás diseñando o tocando código web, tarde o temprano aparece esta duda: ¿cómo indicar colores en HTML?
Aunque solemos decir "en HTML", en realidad los colores se aplican sobre todo con CSS. Lo importante es entender los formatos más usados para elegir el correcto según cada caso.
Formatos principales de color en web
1. HEX (hexadecimal)
Es el formato más conocido. Usa seis caracteres para representar rojo, verde y azul.
color: #1a73e8;
background-color: #f5f7fb;2. RGB
Define color con valores de 0 a 255 para cada canal.
color: rgb(26, 115, 232);3. RGBA
Igual que RGB, pero añade transparencia (alpha) de 0 a 1.
background-color: rgba(26, 115, 232, 0.15);4. HSL
Usa tono, saturación y luminosidad. Es muy práctico para crear variaciones de una misma paleta.
color: hsl(214, 82%, 51%);
¿Qué formato de color conviene usar?
- HEX: simple y estándar para la mayoría de estilos.
- RGB/RGBA: útil cuando necesitas transparencia.
- HSL: excelente para sistemas de diseño y ajustes rápidos de tono/luz.
Buenas prácticas para elegir colores web
1. Define una paleta base
Evita improvisar color por color. Trabaja con variables y una paleta limitada para mantener coherencia.
2. Cuida contraste y accesibilidad
Texto y fondo deben tener contraste suficiente para lectura cómoda, especialmente en móvil.
3. Usa variables CSS
:root {
--color-primary: #1a73e8;
--color-text: #1f2937;
--color-bg: #f9fafb;
}4. Piensa en marca y conversión
El color no es solo estética. También guía la atención y afecta al comportamiento del usuario en botones y llamadas a la acción.
Errores comunes al indicar colores en HTML/CSS
- Usar demasiados colores sin jerarquía.
- No definir estados hover/active.
- Ignorar el modo móvil y la legibilidad.
Conclusión
Para trabajar colores web con criterio, no basta con saber un código HEX. Lo importante es combinar formato técnico, coherencia visual y accesibilidad.
¿Quieres una web con diseño profesional y paleta bien trabajada? En Icono Studio cuidamos cada detalle visual para que tu marca se vea mejor y convierta más. Cuéntanos tu idea.
