Generador de Tonos de Color

Estas son las tres formas clásicas de alterar un color manteniendo su matiz reconocible. Una sombra mezcla el color con negro, haciéndolo más oscuro. Un matiz lo mezcla con blanco, haciéndolo más claro y suave. Un tono lo mezcla con gris, atenuándolo sin llevarlo hacia el negro o blanco puro. Esta herramienta genera los tres como una tira de 11 pasos, desde el color original hasta el 0%.

Cada paso mezcla los canales rojo, verde, y azul de tu color hacia el objetivo (negro, blanco, o gris) en un porcentaje fijo, el mismo enfoque simple de interpolación lineal usado por la mayoría de las herramientas de referencia de color, en lugar de ajustar la luminosidad en HSL. Eso mantiene la progresión visualmente uniforme y coincide con lo que obtendrías al mezclar pintura o tinta hacia negro, blanco, o gris.

Complementario solo rota el matiz 180° alrededor de la rueda de colores manteniendo la misma saturación y luminosidad, así que un rojo vivo se convierte en un cian igualmente vivo, esta es la "color opuesto" usado en la teoría del color y el diseño. Invertido, en cambio, invierte cada valor rojo, verde y azul (255 menos el original), lo que también cambia el brillo, el blanco se vuelve negro con la inversión, pero permanece blanco con la operación complementaria ya que no hay matiz que rotar.

Triádico elige otros dos colores espaciados uniformemente 120° en la rueda de color, dando tres colores con fuerte contraste que aún se sienten equilibrados juntos. Análogo elige colores a 30° a cada lado de tu matiz, colores que están uno junto al otro en la rueda y naturalmente se ven armoniosos. Monocromático mantiene el matiz y saturación exactos de tu color pero varía solo la luminosidad, dando un conjunto de colores garantizados para combinar ya que en realidad son el mismo color en diferentes niveles de brillo.

Los 216 colores seguros para web son la paleta que se representaba de forma idéntica en las antiguas pantallas de 256 colores, cada canal rojo, verde, y azul limitado a uno de seis valores (0, 51, 102, 153, 204, 255). Las pantallas modernas no necesitan esta restricción, pero el equivalente seguro para web sigue siendo útil como referencia para estilos retro o salidas de color extremadamente limitado.

HSL, HSV, y CMYK describen todos el mismo color mediante diferentes modelos construidos para diferentes propósitos. HSL y HSV ambos describen el matiz, y la diferencia entre el "valor" de HSV y la "luminosidad" de HSL significa que el mismo color puede reportar un porcentaje de saturación diferente entre los dos. CMYK describe cuánta tinta cian, magenta, amarilla, y negra mezclaría una impresora, lo cual sigue reglas de color sustractivo en lugar de las reglas de luz aditiva roja, verde, y azul que usan RGB y HSL/HSV, así que no es una conversión directa simple.

Sí. Haz clic en cualquier código hex en la fila de Valores de color, en cualquier muestra de sombra, matiz, tono, o esquema de color, para copiarlo a tu portapapeles. La sección de Código CSS al final tiene reglas ya preparadas de background-color, color, border-color, y box-shadow con sus propios botones de copiar.