Динамично измените цвет на более легкий или более темный на процент CSS (JavaScript)

Not directly, no. But you could use a site, such as colorschemedesigner.com, that will give you your base color and then give you the hex and rgb codes for different ranges of your base color.

Once I find my color schemes for my site, I put the hex codes for the colors and name them inside a comment section at the top of my stylesheet.

Some other color scheme generators include:

• http://www.colorschemer.com/online.html
• http://colorschemegenerator.com/
• http://www.cssjuice.com/25-popular-color-scheme-and-palette-generators/

See my comment on Ctford's reply.

I'd think the easy way to lighten a color would be to take each of the RGB components, add to 0xff and divide by 2. If that doesn't give the exact results you want, take 0xff minus the current value times some constant and then add back to the current value. For example if you want to shift 1/3 of the way toward white, take (0xff - current)/3+current.

You'd have to play with it to see what results you got. I would worry that with this simple a formula, a factor big enough to make dark colors fade nicely might make light colors turn completely white, while a factor small enough to make light colors only lighten a little might make dark colors not lighten enough.

Still, I think going by a fraction of the distance to white is more promising than a fixed number of steps.

Насколько я знаю, вы не можете сделать это в CSS.

Но я думаю, что небольшая логика на стороне сервера может легко сделать то, что вы предлагаете. Таблицы стилей CSS обычно являются статическими ресурсами, но нет причин, по которым они не могут быть динамически сгенерированы серверным кодом. Ваш серверный сценарий должен:

1. Проверять параметр URL, чтобы определить пользователя и, следовательно, выбранный пользователем цвет. Используйте параметр URL, а не переменную сеанса, чтобы вы все еще могли кэшировать CSS.
2. Разбейте цвет на его красный, зеленый и синий компоненты
3. Увеличьте каждый из трех компонентов на заданную величину. Поэкспериментируйте с этим, чтобы получить желаемые результаты.
4. Сгенерировать CSS, включающий новый цвет

Ссылки на эту страницу, генерирующую CSS, будут выглядеть примерно так:

<link rel="stylesheet" href="http://yoursite.com/custom.ashx?user=1231">

Если вы не используете.

Есть "непрозрачность" который заставит просвечивать фон:

opacity: 0.5;

но я не уверен, что вы это имеете в виду. Определить «уменьшить цвет»: сделать прозрачным? Или добавить белый?

Вы можете использовать RGBa («a» означает альфа-прозрачность), но это еще не широко поддерживается. Однако это будет , поэтому вы можете использовать его сейчас и добавить запасной вариант:

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 */
    }

Вы можете использовать библиотеку JavaScript, такую ​​как JXtension, которая дает пользователю возможность сделать цвет светлее или темнее. Если вы хотите найти документацию для этой новой библиотеки, щелкните здесь . Вы также можете использовать JXtension для комбинирования одного цвета с другим.