Cómo crear un tono más claro/más oscuro de un color para el estado de desplazamiento de un botón

He estado diseñando botones durante un tiempo, pero cuando se trata de seleccionar los colores para el estado de desplazamiento de un degradado o sólido, ha sido principalmente una cuestión de observar un tono más oscuro.

¿Existe una teoría de color estructurada que ayudaría a juzgar mejor cuál sería un tono más apropiado para usar?

¿Qué tan oscuro debo ir del original?

¿Cómo puedo definir tonos más claros o más oscuros del "mismo" color?

Dependería de los colores utilizados en el diseño. Sugeriría experimentar porque dependería del diseño final.

Respuestas (2)

Cuando busco un ligero cambio en la luminosidad, generalmente hago los cálculos, en realidad, es simple contar.

El formato hexadecimal para los colores es RRGGBB, que significa rojo, verde y azul. El hexadecimal se cuenta del 0 al F (así que después del 9 viene la A).

Si tengo #191970como color de botón principal, agregaré 1 o 2 a cada valor de color, lo que dará como resultado un color similar pero más claro. Agregar 1 a cada uno daría como resultado #1A1A71.

Se podría hacer lo mismo para encontrar un tono más oscuro. Restar 1 de cada valor de color #191970daría como resultado #18186F.

Sin embargo, es probable que sumar o restar 1 o 2 de cada valor de color resulte en una diferencia indistinguible, por lo que probablemente deba sumar o restar al menos 10 de cada uno.

Si está usando el formato de número (255, 255, 255), simplemente puede agregar a cada número usando operaciones normales de base 10.

Agregar la misma cantidad a cada valor de color asegura que el tono y la saturación permanezcan consistentes y que los colores resultantes se mezclen armoniosamente en un diseño.

Esta es una técnica bastante inteligente, ¡gracias por compartir! Por curiosidad, ¿es esta una convención que creaste tú mismo o algo fundamental?

O bien, puede dejar que algún generador en línea haga las elecciones de color por usted, y simplemente copie el código que necesita: el botón de degradado CSS es solo un ejemplo.