Tonalidades de un color de marca

Introduzca el color principal de su marca y obtenga una paleta de diez tonalidades (de 50 a 900), al estilo de un sistema de diseño, para construir una guía de colores coherente. Cálculo 100% local en su navegador.

Tonalidades generadas

Cómo funciona

Un sistema de diseño sólido nunca se limita a un único tono: hacen falta variantes más claras para los fondos y los estados deshabilitados, y variantes más oscuras para el texto o los estados al pasar el cursor. Esta herramienta convierte su color a HSL, conserva el matiz original y varía únicamente la luminosidad (y ligeramente la saturación en los extremos) para generar diez tonalidades numeradas del 50 (muy claro) al 900 (muy oscuro), siguiendo el modelo de las paletas de Tailwind CSS.

¿Qué tonalidad se corresponde mejor con mi color original?

La tonalidad 500 se calcula para acercarse lo más posible al color que ha introducido; las tonalidades inferiores se aclaran progresivamente hacia el blanco y las superiores se oscurecen progresivamente hacia el negro.

¿Puedo copiar una sola tonalidad o toda la paleta?

Haga clic en una muestra para copiar su código HEX de forma individual, o utilice el botón «Copiar toda la paleta» para obtener la lista completa en el formato número: #hex, lista para pegar en un archivo de configuración CSS o de Tailwind.

El cálculo de las tonalidades se realiza íntegramente en su navegador; el color de su marca nunca se envía a un servidor.