El mismo color, cuatro maneras de escribirlo
Pones #84cc16 en tu hoja de estilos. El navegador lo lee como rgb(132, 204, 22). El diseñador te lo manda desde Figma como oklch(78% 0.18 130). La herramienta de accesibilidad te dice que el contraste va justito.
Es el mismo verde lima cada vez. La notación cambia según quién esté hablando. Cada una sirve para un trabajo distinto, y la mayoría de hojas de estilo en 2026 las siguen tratando como intercambiables. No lo son.
Piénsalo como medir distancia. Metros y pies miden lo mismo, pero no pondrías la meta de una carrera en “2 kilómetros” y luego reportarías la zancada del ganador en milímetros. Aquí pasa igual. Cada notación responde a una pregunta distinta.
Hex y RGB: cómo ve el color la pantalla
Una pantalla mezcla tres luces para hacer cualquier color: rojo, verde, azul. Hex y RGB le dicen cuánto de cada una. #84cc16 significa “esta cantidad de rojo, esta de verde, esta de azul”, escrito como una cadena corta.
color: #84cc16;
color: rgb(132 204 22);
color: rgb(132 204 22 / 0.8);Hex es lo que guardas en design tokens, copias desde Figma y pegas en Slack. RGB es lo que escribes cuando además necesitas transparencia. Si solo quieres el ida y vuelta entre los dos, el convertidor de hex a RGB lo hace en tu navegador sin abrir un picker completo.
Ninguno te ayuda si la pregunta es “haz este color un 10 por ciento más oscuro”. Puedes oscurecer un hex a mano, pero el resultado casi nunca parece un 10 por ciento más oscuro, porque hex describe luz, no cómo lo lee el ojo.
HSL: parece intuitivo y te traiciona
HSL parte un color en tres mandos que puedes imaginar: tono (qué color), saturación (qué tan vivo), luminosidad (qué tan brillante). A los diseñadores les encanta diez segundos, luego empiezan una escala tonal y se les desmonta.
hsl(82 78% 44%); /* el mismo lima que #84cc16 */
hsl(220 78% 44%); /* un azul con la MISMA matemática, pero visiblemente más oscuro */Las dos líneas tienen luminosidad 44%. Tu ojo ve el lima brillante, el azul mucho más oscuro. La matemática dice que son iguales. La matemática se equivoca sobre cómo funcionan los ojos humanos.
Para un retoque puntual del tipo “este rojo, pero un poco más claro”, HSL va bien. Para un sistema de diseño donde un botón necesita la misma luminosidad en hover, focus, error y éxito, HSL te dará pasos irregulares y tu diseñador te va a preguntar muy educadamente por qué. El convertidor de hex a HSL basta cuando solo quieres ajustar un único token.
OKLCH: HSL que sí encaja con tus ojos
OKLCH es el nuevo en CSS, soportado en todos los navegadores desde 2023. Misma idea que HSL (luminosidad, saturación, tono), pero la matemática sí se ajusta a cómo los humanos vemos el brillo.
oklch(78% 0.18 130); /* el mismo lima que #84cc16 */
oklch(78% 0.18 250); /* mismo brillo, pero azul en lugar de lima */
oklch(50% 0.18 130); /* mismo lima, la mitad de brillo */El truco: fijas una luminosidad, la bloqueas, vas barriendo entre colores. Cada color del barrido se ve igual de brillante para el ojo humano. Eso es lo que siempre quisiste de tu paleta de acentos y nunca acababas de conseguir.
Tailwind 4 trae sus colores por defecto en OKLCH. Adobe está migrando su selector a OKLCH. Si construyes un sistema de diseño en 2026 con otra cosa, tus colores de acento van a derivar y no vas a saber por qué.
La pega es que casi ninguna herramienta downstream habla OKLCH todavía. La mayoría de selectores de CMS, guías de marca y PDFs para stakeholders quieren hex. Así que diseñas en OKLCH y exportas a hex. El convertidor de color de AldeaCode hace ese ida y vuelta en vivo, en el navegador, sin subida.
¿Y el contraste y la accesibilidad?
Dos colores pueden tener exactamente la misma luminosidad en OKLCH, y el verificador de contraste WCAG decirte que una combinación pasa y la otra no. Pasa porque las herramientas de contraste miden algo distinto a “cuánto brillaba esto”.
Por ahora: diseña en OKLCH para que tus colores se mantengan coherentes, pero siempre pasa el emparejamiento final por un verificador de contraste antes de subirlo. Las dos herramientas no se contradicen, responden a preguntas distintas.
Viene un modelo nuevo de contraste llamado APCA que casa mejor con lo que los humanos leemos de verdad. Cuando sea el estándar, OKLCH y el verificador se llevarán mejor. Hasta entonces, sigue usando los dos.
Un flujo de trabajo práctico
Elige los colores de marca y de acento en OKLCH. Bloquea la luminosidad, cambia tono y saturación para sacar la escala tonal. Exporta a hex para todo lo demás (Figma, design tokens, el manual de marca que tu cliente te va a mandar por correo).
Usa HSL solo para retoques rápidos donde el match perceptual exacto no importa. Usa RGB plano cuando necesites alpha (transparencia).
Tira del convertidor de color para puentear un diseño de terceros con tu hoja de estilos, del generador de hash cuando versiones la paleta como hash de contenido, y del formateador JSON para el archivo de design tokens que entregas al cliente. Los navegadores parsean OKLCH nativamente hoy, así que la única razón para no escribirlo directo en CSS es que tu cadena de build lo descarte. Si pasa eso, el problema es la cadena, no el color.