Динамически изменить цвет на светлый или темный в процентах CSS (Javascript)

Question

У нас есть большое приложение на сайте, и у нас есть несколько ссылок, которые, скажем, синего цвета, как синие ссылки на этом сайте. Теперь я хочу сделать несколько других ссылок, но с более светлым цветом. Очевидно, что я могу просто сделать это путем добавления шестнадцатеричного кода в файл CSS, но наш сайт позволяет пользователю решать, какие цвета они хотят для своего настраиваемого профиля / сайта (например, Twitter).

Итак, мой вопрос: можем ли мы уменьшить цвет в процентах?

Скажем, следующий код CSS:

a {
  color: blue;
}

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

OR

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

Есть ли способ уменьшить цвет на процент?

Answer 1

Теперь вы можете сделать это с помощью фильтров CSS. Поддержка не очень удобна для разных браузеров, но поскольку спецификация продолжает реализовываться и очищаться, это будет очень удобно.

.button {
  color: #ff0000;
}

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

<button class="button">Foo lorem ipsum</button>

Вот некоторые сведения о различных фильтрах, которые вы можете использовать: http://code.tutsplus.com/tutorials/say-hello-to-webkit-filters--net-23318

Обновление

Кажется, что все больше и больше голосов получают, когда фильтры попадают в мейнстрим. Вот текущая совместимость: http://caniuse.com/#feat=css-filters

Answer 2

Если вы используете стек, который позволяет использовать SASS , вы можете использовать функцию lighten:

$linkcolour: #0000FF;

a {
  color: $linkcolour;
}

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

Answer 3

есть "непрозрачность" что заставит фон сиять через:

opacity: 0.5;

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

Answer 4

HSL Цвета дают ответ, значение цвета HSL указывается с помощью: hsl (оттенок [0,255],% насыщенности,% яркости).

HSL поддерживается в IE9 +, Firefox, Chrome, Safari и в Opera 10 +

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

Answer 5

В LESS вы должны использовать следующие переменные:

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

Это займет 1-ю переменную и осветлит ее на 20% (или любой другой процент). В этом примере вы получите более светлый цвет: #ccc

Answer 6

Если вы хотите более темный цвет, вы можете использовать rgba черный с низкой непрозрачностью:

rgba(0,0,0,0.3)

Для использования белого цвета:

rgba(255,255,255,0.3).

Answer 7

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

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

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

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

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

Если вы не используете расширение .css, убедитесь, что правильно установили MIME-тип, чтобы браузер мог интерпретировать файл как CSS.

(Обратите внимание: чтобы сделать цвета светлее, нужно повысить каждое из значений RGB)

Answer 8

, если вы решите использовать http://compass -style.org / , основанную на sass инфраструктуру css, она предоставляет очень полезные darken() и lighten() функции sass для динамической генерации CSS. это очень чисто:

@import compass/utilities

$link_color: #bb8f8f
a
  color: $link_color
a:visited
  color: $link_color
a:hover
  color: darken($link_color,10)

создает

a {
  color: #bb8f8f;
}

a:visited {
  color: #bb8f8f;
}

a:hover {
  color: #a86f6f;
}

Answer 9

На момент написания этой статьи, я нашел лучшую реализацию чистого CSS для манипулирования цветом:

Используйте переменные CSS для определения цветов в HSL вместо формата HEX / RGB, затем используйте calc() для управления ими.

Вот базовый пример:

:root {
  --link-color-h: 211;
  --link-color-s: 100%;
  --link-color-l: 50%;
  --link-color-hsl: var(--link-color-h), var(--link-color-s), var(--link-color-l);

  --link-color: hsl(var(--link-color-hsl));
  --link-color-10: hsla(var(--link-color-hsl), .1);
  --link-color-20: hsla(var(--link-color-hsl), .2);
  --link-color-30: hsla(var(--link-color-hsl), .3);
  --link-color-40: hsla(var(--link-color-hsl), .4);
  --link-color-50: hsla(var(--link-color-hsl), .5);
  --link-color-60: hsla(var(--link-color-hsl), .6);
  --link-color-70: hsla(var(--link-color-hsl), .7);
  --link-color-80: hsla(var(--link-color-hsl), .8);
  --link-color-90: hsla(var(--link-color-hsl), .9);

  --link-color-warm: hsl(calc(var(--link-color-h) + 80), var(--link-color-s), var(--link-color-l));
  --link-color-cold: hsl(calc(var(--link-color-h) - 80), var(--link-color-s), var(--link-color-l));

  --link-color-low: hsl(var(--link-color-h), calc(var(--link-color-s) / 2), var(--link-color-l));
  --link-color-lowest: hsl(var(--link-color-h), calc(var(--link-color-s) / 4), var(--link-color-l));

  --link-color-light: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) / .9));
  --link-color-dark: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) * .9));
}

.flex {
  display: flex;
}

.flex > div {
  flex: 1;
  height: calc(100vw / 10);
}

<h3>Color Manipulation (alpha)</h3>

<div class="flex">
  <div style="background-color: var(--link-color-10)"></div>
  <div style="background-color: var(--link-color-20)"></div>
  <div style="background-color: var(--link-color-30)"></div>
  <div style="background-color: var(--link-color-40)"></div>
  <div style="background-color: var(--link-color-50)"></div>
  <div style="background-color: var(--link-color-60)"></div>
  <div style="background-color: var(--link-color-70)"></div>
  <div style="background-color: var(--link-color-80)"></div>
  <div style="background-color: var(--link-color-90)"></div>
  <div style="background-color: var(--link-color)"></div>
</div>

<h3>Color Manipulation (Hue)</h3>

<div class="flex">
  <div style="background-color: var(--link-color-warm)"></div>
  <div style="background-color: var(--link-color)"></div>
  <div style="background-color: var(--link-color-cold)"></div>
</div>

<h3>Color Manipulation (Saturation)</h3>

<div class="flex">
  <div style="background-color: var(--link-color)"></div>
  <div style="background-color: var(--link-color-low)"></div>
  <div style="background-color: var(--link-color-lowest)"></div>
</div>

<h3>Color Manipulation (Lightness)</h3>

<div class="flex">
  <div style="background-color: var(--link-color-light)"></div>
  <div style="background-color: var(--link-color)"></div>
  <div style="background-color: var(--link-color-dark)"></div>
</div>

Я также создал CSS-фреймворк (все еще на ранней стадии), чтобы обеспечить базовую поддержку переменных CSS под названием root-переменные .

Answer 10

Вы можете использовать небольшой javascript для вычисления более темного и светлого цвета, используя rgb ().

Fiddle : Не очень хорошо, но это только для иллюстрации.

По сути, он устанавливает цвет и выбирает 20 цветов с одинаковым количеством (по сравнению друг с другом) rgb только с 10.

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))      );
};