Por qué son importantes los formatos de color
El color parece simple en la superficie: lo ves, lo eliges, lo usas. Pero el trabajo de diseño profesional se topa constantemente con un problema frustrante: el mismo color tiene diferentes representaciones dependiendo de dónde lo utilice, y elegir el formato incorrecto hace que su flujo de trabajo sea más difícil de lo necesario.
HEX: El estándar web
Códigos de color hexadecimales como#667eeason el formato más común en el desarrollo web. Codifican valores rojo, verde y azul (0–255) como números hexadecimales de dos dígitos concatenados en una cadena de seis caracteres. El formato es compacto, fácilmente copiable y universalmente compatible con CSS, HTML y herramientas de diseño.
Cuando los tres pares son dígitos idénticos, el código se puede acortar:#ffffffse convierte#fff. Esta abreviatura funciona en todos los principales navegadores y preprocesadores.
RGB: Transparencia y Control Programático
RGB (y su variante RGBA) se convierte en el formato preferido cuando necesita transparencia o cuando calcula colores mediante programación.rgba(102, 126, 234, 0,5)le da a su color un 50% de opacidad, imposible de expresar directamente en HEX (aunque HEX admite una forma de 8 caracteres como#667eea80que pocos desarrolladores conocen).
HSL: el arma secreta del constructor de paletas
HSL (Tono, Saturación, Luminosidad) es el máslegible por humanosformato de color. El tono es un ángulo (0–360°) en la rueda de colores. La saturación es lo vivo que es el color. La luminosidad es cuán claro u oscuro.
Esto hace que la creación de paletas sea trivialmente fácil. Para crear 10 tonos del mismo tono para un sistema de diseño:
- Mantenga H y S iguales
- Establezca L en: 10, 20, 30, 40, 50, 60, 70, 80, 90, 95
- Ahora tienes una escala de colores completa de 10 pasos.
Accesibilidad: relaciones de contraste
Los estándares de accesibilidad WCAG 2.1 AA requieren una relación de contraste de 4,5:1 entre el texto y su fondo para texto de tamaño normal y de 3:1 para texto grande. Antes de finalizar cualquier combinación de colores en su interfaz de usuario, pruebe la relación de contraste. Las relaciones de contraste fallidas son una de las violaciones de accesibilidad más comunes en el diseño web.
| Estándar | Texto normal | Texto grande (18 puntos+) |
|---|---|---|
| WCAG-AA | 4.5:1 | 3:1 |
| WCAG AAA | 7:1 | 4.5:1 |
¿Por qué los colores se ven diferentes en la impresión y en la pantalla?
Las pantallas utilizan el modelo RGB (luz aditiva). Las impresoras utilizan CMYK (tinta sustractiva). El mismo color HEX puede verse notablemente diferente cuando se imprime. Para trabajos de color con precisión de impresión, convierta a CMYK en una herramienta profesional como Adobe Illustrator o InDesign.
¿Qué hace realmente la herramienta del cuentagotas?
El cuentagotas utiliza la API EyeDropper de su navegador para muestrear los colores de los píxeles desde cualquier lugar de la pantalla, no solo desde la ventana del navegador. Lee los valores RGB exactos de cualquier píxel y los convierte a los tres formatos al instante.