Generador de paleta monocromática

Un generador de paleta monocromática toma un color hex CSS y un recuento entero de pasos, y devuelve N muestras que comparten el mismo matiz y la misma saturación mientras la luminosidad avanza en incrementos iguales del negro al blanco. Los diseñadores eligen esta armonía clásica de un solo matiz cuando un azul marino de marca debe seguir siendo azul marino desde superficies profundas hasta fondos pálidos, sin desviarse hacia un matiz vecino como haría un esquema análogo. La herramienta convierte hex a HSL, mantiene fijos H y S, y sitúa la luminosidad en i veces cien dividido entre N menos uno, de modo que cinco pasos caen en cero, veinticinco, cincuenta, setenta y cinco y cien por ciento.

Cómo una paleta monocromática escala la luminosidad

Parta de un color hex CSS como #3366cc o la forma corta #36c. El analizador recorta espacios, pasa los dígitos a minúsculas, expande códigos de tres dígitos con la regla CSS de duplicación y convierte cada par en enteros de rojo, verde y azul de cero a doscientos cincuenta y cinco.

Esos canales se proyectan a matiz, saturación y luminosidad con las fórmulas habituales de CSS y W3C: la luminosidad es la media de las fracciones máxima y mínima del canal, la saturación depende de esa luminosidad y el matiz se mide en grados alrededor de la rueda de color, con grises acromáticos que informan matiz cero.

Un esquema monocromático no rota el matiz y no mezcla hacia el negro o el blanco en RGB; varía solo el porcentaje de luminosidad mientras el matiz y la saturación permanecen exactamente en los valores del color base.

Para el índice de paso i desde cero hasta N menos uno, la luminosidad es i veces cien dividido entre N menos uno, de modo que la primera muestra es siempre negro puro con luminosidad cero, la última es siempre blanco puro con luminosidad cien, y los topes intermedios quedan igualmente espaciados en luminosidad HSL. Tras conocer cada nueva luminosidad, la misma ruta CSS de matiz a RGB convierte HSL de nuevo a canales enteros y un código hex de seis dígitos en minúsculas.

Cinco pasos sobre un azul de luminosidad media producen por tanto negro, un marino profundo, un tono medio cercano al original, un cielo pálido y blanco, todos aún con el matiz y la saturación originales. No hay semillas aleatorias, marcas de tiempo de reloj ni llamadas de red, de modo que las mismas entradas producen siempre la misma paleta ordenada. Las formas hex con alfa de cuatro u ocho dígitos se rechazan porque este contrato es solo RGB opaco.

Los pasos no enteros o los valores fuera de dos a veintiuno fallan la validación para que los clientes no superen en silencio el rango permitido.

Qué envía y qué recibe de vuelta

Envíe dos campos: color como cadena hex y steps como entero entre dos y veintiuno inclusive. Cada muestra de paleta incluye index, hex, enteros r g b, números de matiz saturación luminosidad y cadenas imprimibles rgb y hsl. El color original se devuelve siempre como base para que los clientes puedan mostrar la semilla junto a la rampa; esa semilla aparece dentro de swatches solo cuando su luminosidad cae exactamente en un tope par, por ejemplo luminosidad cincuenta con cinco pasos.

Las comprobaciones típicas incluyen cinco pasos sobre #3366cc, tres pasos sobre el rojo corto #f00 y confirmar que una cadena no hex falla la validación. Conecte el formulario gratuito del navegador para revisiones de diseño y rampas rápidas, e invoque el mismo contrato desde scripts cuando necesite generación masiva de escalas de tokens. Mantenga steps en el rango documentado en lugar de confiar en recortes silenciosos: esta herramienta falla de forma explícita para que los sistemas de diseño sigan siendo predecibles.

Dónde aparecen las paletas monocromáticas en el trabajo real

Los diseñadores de producto construyen rampas de IU de un solo matiz para que un primario de marca cubra texto, superficies, chips y estados deshabilitados sin introducir un segundo matiz que luche contra la identidad. Los revisores de accesibilidad exploran compañeros de un color de texto o icono a lo largo de una escalera de luminosidad y entregan candidatos a un verificador de contraste en lugar de adivinar tonos medios a ojo.

Los equipos de marketing producen pasteles de campaña y acentos profundos a partir de un logotipo saturado para banners sociales y cabeceras de correo, preservando la identidad de matiz de la marca. Los ingenieros frontend programan rampas monocromáticas en integración continua para que un solo color de marca rinda una escalera documentada para gráficos, insignias y botones secundarios.

Los autores de currículos que enseñan armonía del color pueden mostrar que un esquema monocromático es el miembro de un solo matiz de la familia clásica que también incluye rotaciones complementarias, análogas, triádicas y tetrádicas: esos otros aterrizajes rotan el matiz, mientras que esta página solo recorre la luminosidad. Si más adelante necesita un opuesto complementario, un par de vecinos análogos, una tríada de ciento veinte grados o un solo paso de aclarado, trátelos como intenciones de búsqueda y aterrizajes separados en lugar de sobrecargar esta página monocromática.

Los colores CSS con nombre como tomato quedan fuera de alcance; resuélvalos primero a hex.