Colores web-safe

Funciones

• Los 216 colores, agrupados por tono, cada uno con su muestra
• Cada color en forma de seis dígitos y en forma corta de tres
• También RGB y HSL, listos para pegar en una hoja de estilos
• Escribe cualquier color y sabrás si es web-safe
• Si no lo es, el web-safe más cercano y cuánto dista
• Se muestran los valores de los tres canales, que es la respuesta a por qué la forma corta siempre funciona
• La forma corta (#f00) y la larga (#ff0000) funcionan igual, en cualquier combinación de mayúsculas
• Cada color indica si sobre él se lee mejor en negro o en blanco, con la relación de contraste WCAG
• Los 216 valores en un desplegable con búsqueda, agrupados por tono
• Vacío muestra la paleta entera como carta de referencia
• Tolerancia al pegado: las comillas y los caracteres de ancho completo alrededor de un valor no rompen la búsqueda
• Los valores se copian fila a fila, para llevarlos a un archivo de diseño o al código

Cómo se usa

1. Escribe un valor de color, como #f00 o #336699
2. El resultado da la forma larga, la corta, el RGB, el HSL, los valores de canal y qué color de texto se lee mejor
3. Escribe un color que no esté en la paleta, como #123456, y dará el más cercano con su distancia
4. Deja el cuadro vacío para listar los 216 colores agrupados por tono

Preguntas frecuentes

¿Sigue teniendo sentido la paleta web-safe?

Como restricción técnica, no, y conviene decirlo con claridad. Su premisa era que las pantallas solo producían 216 colores, y cualquier pantalla actual muestra muchos más, así que ya no hace falta para garantizar que un color se vea igual en todas partes. Para lo que sigue sirviendo es para otras tres cosas. Está espaciada por igual: seis niveles por canal forman una paleta ya hecha muy regular, así que es difícil elegir varios colores que se amontonen. Se puede escribir en forma corta, así que `#f00` es más corto y más fácil de recordar que `#ff0000`. Y es coherente entre herramientas: muchos sistemas antiguos, bibliotecas de gráficos y temas de terminal usan exactamente este conjunto. Tómala como una paleta cómoda, no como una lista de conformidad.

¿Por qué los 216 se pueden escribir en forma corta de tres dígitos?

Porque cada canal solo toma seis valores: 0, 51, 102, 153, 204 y 255. En hexadecimal son `00`, `33`, `66`, `99`, `cc` y `ff` —los dos dígitos iguales—, así que cada dígito de la forma de seis es una repetición y se puede quitar la mitad. Lo recíproco también vale: si un color tiene forma corta, al expandir cada uno de sus tres dígitos sale un par duplicado, así que sus valores de canal están forzosamente entre esos seis. Las dos condiciones se implican mutuamente, y por eso «tiene forma corta» y «es web-safe» describen el mismo conjunto de colores.

¿Cómo se elige el color «más cercano»?

Con una distancia ponderada en el espacio RGB (la fórmula redmean): una diferencia de 255 cuenta más en el canal verde que en el azul, porque el ojo es más sensible al verde y menos al azul. La distancia euclídea normal —que trata los tres canales por igual— devuelve a menudo un color cercano que se ve claramente mal. No se usa el estándar más preciso CIEDE2000 porque la tarea aquí es elegir uno entre 216 candidatos, cosa que redmean ya resuelve por debajo de lo que distingue el ojo, en tres líneas difíciles de escribir mal.

¿En qué unidad está la distancia?

En ninguna. Es el valor que produce la fórmula anterior y solo tiene sentido comparado con otros de la misma fórmula: más cerca de 0 significa más parecido, más grande significa más distante. No es un ΔE de ningún estándar de color, así que no lo compares con números de otras herramientas: cambia la fórmula de distancia y el número para el mismo par cambia también. Su única misión es decir cuánto se acerca de verdad el color más próximo.