Guías de color
Guías breves y prácticas sobre el color en pantalla: formatos, contraste, paletas, modo oscuro y CSS. Cada número está calculado y cada ejemplo se puede copiar.
- OKLCH explicado: el formato de color que por fin coincide con lo que vesOKLCH describe un color según lo claro que se ve, lo intenso que es y qué tono tiene. A diferencia de HSL, el mismo valor de luminosidad se ve igual de claro en cualquier tono, así que las paletas, los estados hover y el contraste accesible se vuelven predecibles.28 de septiembre de 2026Lectura: 3 min
- APCA frente a WCAG 2: en qué comprobación de contraste confiarLa relación de contraste de WCAG 2 es lo que exige la ley. APCA es un modelo más reciente que predice mucho mejor la legibilidad, sobre todo en temas oscuros y colores saturados. Si compruebas los dos, tendrás texto que cumple la normativa y que además se lee con facilidad.28 de septiembre de 2026Lectura: 3 min
- Gama de colores explicada: sRGB, Display P3 y colores fuera de gamaUna gama de colores (en inglés, gamut) es el conjunto de colores que puede mostrar una pantalla o un espacio de color. La web se construyó sobre sRGB, pero hoy la mayoría de los móviles y muchos portátiles muestran Display P3, con rojos, verdes y naranjas bastante más vivos.28 de septiembre de 2026Lectura: 2 min
- Formatos de color explicados: HEX, RGB, HSL, OKLCH y los demásEl mismo color se puede escribir de una docena de formas. Aquí tienes qué significa cada formato, cuándo usarlo y cómo se ve el mismo color en todos ellos.28 de septiembre de 2026Lectura: 2 min
- Códigos de color hex explicados: cómo funciona #RRGGBBUn código de color hex como #1e90ff son tres pares de dígitos hexadecimales: la cantidad de luz roja, verde y azul, cada una de 00 (nada) a ff (toda, 255). Añade un cuarto par para fijar la opacidad: 80 significa alrededor del 50 % y ff, totalmente opaco.28 de septiembre de 2026Lectura: 7 min
- Cómo elegir una paleta de colores para una web o una appParte de un color de marca, genera con él una escala de 50 a 950, añade grises ligeramente tintados y cuatro colores semánticos, y comprueba el contraste y el daltonismo en cada par de texto. Elige los pasos por su luminosidad OKLCH, no a ojo: sobre fondo blanco, el texto cumple WCAG AA en cuanto la luminosidad baja a unos 0,55, sea cual sea el tono.28 de septiembre de 2026Lectura: 7 min
- Colores para modo oscuro: cómo elegir fondos, texto y acentosUsa un fondo gris oscuro como #121212 en lugar de negro puro, texto blanco roto como #e5e5e5 en lugar de blanco puro, y versiones más claras y menos saturadas de tus colores de marca. Comprueba el texto con APCA además de con WCAG 2, porque WCAG 2 sobrevalora el contraste sobre fondos oscuros.28 de septiembre de 2026Lectura: 7 min
- Armonías de color: complementaria, análoga, triádica y másUna armonía de color elige tonos a ángulos fijos en la rueda de color: 180° de separación en la complementaria, 30° en la análoga y 120° en la triádica. Si giras el tono en OKLCH en lugar de HSL, todos los colores mantienen la misma luminosidad y ninguno destaca por accidente.28 de septiembre de 2026Lectura: 6 min
- CSS color-mix() y colores relativos: tintes, hover y transparenciacolor-mix() mezcla dos colores en el espacio de color que elijas, y la sintaxis de color relativo te permite editar un canal de un color existente, como en oklch(from var(--brand) calc(l - 0.1) c h). Las dos funcionan en el navegador, aceptan variables CSS y sustituyen a la mayoría de las funciones de color de Sass. Mezcla en oklab para tintes y hover, y en srgb para transparencias.28 de septiembre de 2026Lectura: 7 min
- Paletas aptas para daltónicos: cómo comprobar y corregir tus coloresUna paleta apta para daltónicos mantiene distinguible cada par de colores con protanopía, deuteranopía, tritanopía y en escala de grises. La solución más fiable no es un matiz especial, sino una diferencia de luminosidad: los colores separados unos 0.2 en la luminosidad de OKLCH siguieron siendo distintos en todas las simulaciones que hicimos. Acompáñalo de iconos o etiquetas, porque el color por sí solo siempre le falla a alguien.28 de septiembre de 2026Lectura: 7 min
- Colores de Tailwind CSS: la paleta v4 en OKLCH, colores propios y tonosTailwind CSS v4 trae 26 escalas de color con 11 tonos cada una, de 50 a 950: 286 colores definidos en OKLCH como variables CSS del tipo --color-blue-500. Los tuyos se añaden con @theme { --color-brand-500: oklch(...) }. El mismo número de tono no significa la misma luminosidad: blue-600 es el azul más claro que alcanza 4.5:1 sobre blanco, mientras que el amarillo necesita el 700.28 de septiembre de 2026Lectura: 7 min