Selector de Colores
Elija un color y recíbalo en cinco tonos claros y oscuros, listos para pegar en una hoja de estilos.
Resultados
Tonos claros y oscuros
#0e212f #1e4867 #2e6f9e #4994ca #81b5da
Dos pasos más oscuro
#0e212f
Un paso más oscuro
#1e4867
El color en sí
#2e6f9e
Un paso más claro
#4994ca
Dos pasos más claro
#81b5da
Qué hace esta herramienta
Elija el color en el cuadro, con cuentagotas en la mayoría de los sistemas, y vuelve en cinco pasos: dos más oscuros, el color y dos más claros.
Fórmula
mantiene el matiz y varía la luminosidad en cinco pasos
Variables
| Símbolo | Significado | Unidad |
|---|---|---|
color | Elija un color | — |
OUT | Tonos claros y oscuros | — |
S1 | Dos pasos más oscuro | — |
S2 | Un paso más oscuro | — |
S3 | El color en sí | — |
S4 | Un paso más claro | — |
S5 | Dos pasos más claro | — |
Ejemplo resuelto
- Elija un color#2e6f9e
- Tonos claros y oscuros#0e212f #1e4867 #2e6f9e #4994ca #81b5da
- Dos pasos más oscuro#0e212f
- Un paso más oscuro#1e4867
- El color en sí#2e6f9e
- Un paso más claro#4994ca
- Dos pasos más claro#81b5da
Limitaciones
- El cálculo se realiza íntegramente en su navegador. Los valores introducidos nunca se envían a un servidor.
Preguntas frecuentes
¿Por qué cinco pasos del mismo color?
Porque un color solo nunca basta: un botón necesita una versión más oscura para el estado pulsado y otra más clara para el fondo. Variar sólo la luminosidad mantiene la familia.