Cambia dinámicamente de color a más claro o más oscuro por porcentaje CSS (Javascript)

Tenemos una gran aplicación en el sitio y tenemos algunos enlaces que son, digamos color azul como los enlaces azules en este sitio. Ahora quiero hacer algunos otros enlaces, pero con un color más claro. Obviamente, solo puedo hacer simplemente añadiendo el código hexadecimal en el archivo CSS, pero nuestro sitio permite al usuario decidir qué colores quieren para su perfil / sitio personalizado (como Twitter).

Entonces, mi pregunta es: ¿podemos reducir el color por porcentaje?

Digamos que el siguiente código es CSS:

a { color: blue; } a.lighter { color: -50%; // obviously not correct way, but just an idea } 

O

 a.lighter { color: blue -50%; // again not correct, but another example of setting color and then redcuing it } 

¿Hay alguna manera de reducir un color por porcentaje?

Si está utilizando una stack que le permite usar SASS , puede usar la función lighten :

 $linkcolour: #0000FF; a { color: $linkcolour; } a.lighter { color: lighten($linkcolour, 50%); } 

Ahora puede hacer esto con filtros CSS. El soporte es cruzado de navegación dudoso pero a medida que la especificación continúa siendo implementada y limpiada, esto será realmente útil.

 .button { color: #ff0000; } /* note: 100% is baseline so 85% is slightly darker, 20% would be significantly darker */ .button:hover { filter: brightness(85%); } 
  

Hay “opacidad” que hará brillar el fondo:

 opacity: 0.5; 

pero no estoy seguro de que esto es lo que quieres decir. Definir “reducir el color”: ¿hacer transparente? O agregue blanco?

Los colores HSL proporcionan una respuesta, un valor de color HSL se especifica con: hsl (hue [0,255],% de saturación,% de luminosidad).

HSL es compatible con IE9 +, Firefox, Chrome, Safari y en Opera 10+

 a { color:hsl(240,65%,50%); } a.lighter { color:hsl(240,65%,75%); } 

En LESS, usarías las siguientes variables:

 @primary-color: #999; @primary-color-lighter: lighten(@primary-color, 20%); 

Esto tomaría la primera variable y la aclararía un 20% (o cualquier otro porcentaje). En este ejemplo, terminarías siendo tu color más claro: #ccc

Si desea un color más oscuro, puede usar rgba black con baja opacidad:

 rgba(0,0,0,0.3) 

Para un uso más ligero blanco:

 rgba(255,255,255,0.3). 

Por lo que sé, no hay forma de que puedas hacer esto en CSS.

Pero creo que una pequeña lógica del lado del servidor podría hacer lo que sugiera. Las hojas de estilo CSS son normalmente activos estáticos, pero no hay ninguna razón por la que no puedan generarse dinámicamente por el código del lado del servidor. Su secuencia de comandos del lado del servidor:

  1. Verifique un parámetro de URL para determinar el usuario y, por lo tanto, el color elegido por el usuario. Use un parámetro de URL en lugar de una variable de sesión para que pueda almacenar en caché el CSS.
  2. Divida el color en sus componentes rojo, verde y azul
  3. Incrementa cada uno de los tres componentes por una cantidad establecida. Experimenta con esto para obtener los resultados que buscas.
  4. Generar CSS incorporando el nuevo color

Los enlaces a esta página generadora de CSS se verían como:

  

Si no utiliza la extensión .css, asegúrese de configurar correctamente el tipo MIME para que el navegador sepa interpretar el archivo como CSS.

(Tenga en cuenta que para aclarar los colores, debe boost cada uno de los valores RGB)

si decide utilizar http://compass-style.org/ , un marco css basado en sass, proporciona funciones muy útiles de darken() y lighten() sass para generar dinámicamente css. está muy limpio:

 @import compass/utilities $link_color: #bb8f8f a color: $link_color a:visited color: $link_color a:hover color: darken($link_color,10) 

genera

 a { color: #bb8f8f; } a:visited { color: #bb8f8f; } a:hover { color: #a86f6f; } 

Puede usar un pequeño javascript para calcular el color más oscuro y más claro con el rgb ().

Fiddle : No es realmente agradable, pero es solo para ilustrar.

Lo que hace esencialmente es establecer un color y selecciona 20 colores con la misma cantidad (comparada entre sí) de rgb solo con 10 de diferencia.

 for (var i=-10; i < $('.row:eq(0) .block').length/2 ; i++) { var r = 91; var g = 192; var b = 222; $('.row:eq(1) .block:eq('+(i+10)+')').css('background' , color(r+(i*10),g+(i*10),b+ (i*10)) ); }; 

Una respuesta simple es usar un PNG blanco transparente al 50% sobre el color:

 div { background-color:red; } div:hover { background-image:url('lighten.png'); } 

Donde lighten.png es un PNG de un relleno blanco con un 50% de transparencia.

Puede usar RGBa (‘a’ siendo transparencia alfa), pero aún no es ampliamente compatible. Lo será , sin embargo, para que pueda usarlo ahora y agregar una alternativa:

 a:link { color: rgb(0,0,255); } a:link.lighter { color: rgb(128,128,255); /* This gets applied only in browsers that don't apply the rgba line */ } a:link.lighter { /* This comes after the previous line, so has priority in supporting browsers */ color: rgba(0,0,255,0.5); /* last value is transparency */ } 

No directamente, no. Pero puede usar un sitio, como colorschemedesigner.com , que le dará su color base y luego le dará los códigos hexadecimales y rgb para diferentes rangos de su color base.

Una vez que encuentro mis esquemas de color para mi sitio, coloco los códigos hexadecimales para los colores y los nombro dentro de una sección de comentarios en la parte superior de mi hoja de estilo.

Algunos otros generadores de esquema de color incluyen:

Tratar:

 a { color: hsl(240, 100%, 50%); } a:hover { color: hsl(240, 100%, 70%); } 

Sé que es tarde, pero podría usar un contenedor para sus botones y cambiar el nivel de opacidad de la función de color rgba, como se dice en otras respuestas, pero sin un ejemplo explícito.

Aquí hay un bolígrafo:

https://codepen.io/aronkof/pen/WzGmjR

 #wrapper { width: 50vw; height: 50vh; background-color: #AAA; margin: 20px auto; border-radius: 5px; display: grid; place-items: center; } .btn-wrap { background-color: #000; display: inline-block; } button { transition: all 0.6s linear; background-color: rgba(0, 255, 0, 1); border: none; outline: none; color: #fff; padding: 50px; font-weight: 700; font-size: 2em; } button:hover { background-color: rgba(0, 255, 0, .5); } 
 

Vea mi comentario sobre la respuesta de Ctford.

Creo que la manera más fácil de aclarar un color sería tomar cada uno de los componentes RGB, agregar a 0xff y dividir entre 2. Si eso no da los resultados exactos que deseas, toma 0xff menos el valor actual multiplicado por una constante y luego agrega de nuevo al valor actual. Por ejemplo, si desea desplazar 1/3 del camino hacia el blanco, tome (0xff – stream) / 3 + stream.

Tendrás que jugar con él para ver qué resultados obtienes. Me preocuparía que con esta fórmula simple, un factor lo suficientemente grande como para hacer que los colores oscuros se desvanezcan bien podría hacer que los colores claros se vuelvan completamente blancos, mientras que un factor lo suficientemente pequeño como para hacer que los colores claros solo aligeren un poco puede hacer que los colores oscuros no aclaren lo suficiente.

Aún así, creo que ir por una fracción de la distancia a blanco es más prometedor que una cantidad fija de pasos.

Puede usar una biblioteca de JavaScript como JXtension que le da al usuario la capacidad de hacer que un color sea más claro o más oscuro. Si desea encontrar documentación para esta nueva biblioteca, haga clic aquí . También puede usar JXtension para combinar un color con otro.

Parece que jPaq ( http://jpaq.org/ ) es el reemplazo de JXtension. El beneficio de usar jPaq es el hecho de que puede descargar solo lo que necesita en lugar de la biblioteca completa de JavaScript. Aquí hay un enlace a la página de descarga para la clase Color: http://jpaq.org/download/1.0.0.1008 .

Encontré una clase de PHP que me permite hacer este lado del servidor. Acabo de generar un estilo de color CSS en línea para todo lo que necesito para ser más claro / más oscuro. Funciona genial.

http://www.barelyfitz.com/projects/csscolor/

(Tenga en cuenta que la clase usa PEAR para arrojar errores, pero no quería incluir PEAR solo para modificar los colores, así que eliminé todas las referencias de PEAR)

Lo convertí en una clase estática con métodos estáticos, así que puedo llamar a las funciones “aclarar” y “oscurecer” directamente sin crear un objeto nuevo.

Uso de muestra:

 $original_color = 'E58D8D'; $lighter_color = Css::lighten($original_color, .7); $darker_color = Css::darken($original_color, .7); 

Escribí un complemento para jquery que tiene este mismo problema. Tomo el color como una propiedad, o el color establecido de la propiedad css que ellos quieren, y lo ejecuto a través de algunos cálculos. Hexágono a RGB, luego multiplique el porcentaje de compensación, luego regrese un nuevo valor. Avísame si quieres un ejemplo.

Reuniéndolo todo, una solución de tabla hecha puramente con DIV y CSS, pruébelo;) Aunque el navegador debería ser compatible con los colores RGBA …

     
First Line
FL C2
FL C3>
Second Line
SL C2
SL C3>
Third Line
TL C2
TL C3>
Forth Line
FL C2
FL C3>
Fifth Line
FL C2
FL C3>
Sixth Line
SL C2
SL C3>
Seventh Line
SL C2
SL C3>
Eight Line
EL C2
EL C3>
Nineth Line
NL C2
NL C3>
Tenth Line
TL C2
TL C3>

Para css llamado color ‘azul’, hay ‘azul claro’

Para ‘verde’, hay ‘verde claro’

Para ‘gris’, hay ‘lightgrey’

Para ‘amarillo’, hay ‘lightyellow’

Intente navegar en esta lista de colores css named para obtener más información: http://www.w3schools.com/CSS/css_colornames.asp