Aprende a definir colores con precisión y a garantizar buen contraste.
Hex, RGB y HSL son formas equivalentes de definir color, cada una con ventajas distintas.
HSL es más intuitivo para ajustar brillo y saturación.
El canal alfa permite transparencias sin imágenes.
El contraste es clave para accesibilidad y lectura.
Conoce cuándo usar hex, rgb y hsl.
Hex es común en diseño visual, RGB es útil para manipulación y HSL para ajustes de tono y luz.
Si necesitas variar un color de forma controlada, HSL suele ser la mejor opción.
Evita colores sueltos y construye consistencia.
Define colores base en :root y reutilízalos en botones, fondos y textos.
Así puedes ajustar la identidad visual desde un solo lugar.
Un buen color también se lee bien.
El contraste suficiente mejora la lectura y la accesibilidad.
Evita texto gris claro sobre fondos claros: parece elegante pero se lee mal.
Aprende a definir colores con precisión y a garantizar buen contraste.
Código del tema: display: grid; gap: 1rem;
Conoce cuándo usar hex, rgb y hsl.
Hex es común en diseño visual, RGB es útil para manipulación y HSL para ajustes de tono y luz.
Si necesitas variar un color de forma controlada, HSL suele ser la mejor opción.
.color-hex { color: #1d4ed8; }
.color-rgb { color: rgb(29, 78, 216); }
.color-hsl { color: hsl(221, 79%, 48%); }
Evita colores sueltos y construye consistencia.
Define colores base en :root y reutilízalos en botones, fondos y textos.
Así puedes ajustar la identidad visual desde un solo lugar.
:root {
--brand: hsl(221, 79%, 48%);
--brand-soft: hsl(221, 79%, 95%);
--text: hsl(222, 22%, 20%);
}
.button {
background: var(--brand);
color: white;
}
Un buen color también se lee bien.
El contraste suficiente mejora la lectura y la accesibilidad.
Evita texto gris claro sobre fondos claros: parece elegante pero se lee mal.
Visualiza cómo ajustar color de forma más intuitiva que con valores hex.
