Generador de colores monocromáticos

Devuelve cinco colores en códigos hexadecimales de seis dígitos en minúsculas. El color 3 es el color base; los colores 1 y 2 son versiones más oscuras, y los colores 4 y 5, versiones más claras del mismo tono.

La herramienta convierte el código hexadecimal a HSL y solo modifica la luminosidad: menos 30, menos 15, más 15 y más 30 puntos porcentuales. El matiz y la saturación se mantienen, por lo que los cinco colores pertenecen a la misma familia cromática.

Sí. Los pasos más oscuros nunca bajan del 10 % de luminosidad, y los más claros nunca superan el 90 %, por lo que la escala evita el negro puro y el blanco puro.

Debido a los límites del 10 % y el 90 %, los pasos cercanos a los extremos se igualan. Para #000000, los dos pasos más oscuros pasan a ser #1a1a1a, que es más claro que el color base; y para #ffffff, los dos pasos más claros son #e6e6e6.

Para #ff0000, la herramienta devuelve #660000, #b30000, #ff0000, #ff4d4d y #ff9999. El rojo tiene una luminosidad del 50 %, por lo que obtiene el rango completo de dos pasos más oscuros y dos más claros.

Introduce un código hexadecimal de 3 o 6 dígitos, con o sin #, como #3366cc o 36c. No se aceptan las notaciones RGB y HSL ni los nombres de colores; conviértelos primero a hexadecimal.

El matiz, la saturación y la luminosidad se redondean a números enteros, por lo que la conversión a HSL y de vuelta puede cambiar un canal en un paso. #ff5733, por ejemplo, aparece como #ff5833 en el centro de la escala.

Sí. A diferencia de los esquemas basados en el matiz, una escala monocromática modifica la luminosidad, por lo que un gris produce grises más claros y más oscuros. El negro y el blanco están limitados por el intervalo del 10 al 90 % descrito anteriormente.

Usa los colores más oscuros para el texto y los bordes, el color base para las acciones principales y los más claros para los fondos y los estados al pasar el cursor. Comprueba el contraste del texto con una herramienta de contraste WCAG, porque entre los pasos contiguos solo hay 15 puntos de diferencia en luminosidad.

Sí. Esta herramienta aplica exactamente la opción monocromática del Generador de paletas de colores, por lo que ambas devuelven los mismos cinco códigos hexadecimales para el mismo color base.