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

У вас есть свойство "opacity", которое делает фон полупрозрачным:

opacity: 0.5;

Но я не совсем уверен, что это то, что вы имеете в виду. Пожалуйста, уточните, что именно вы подразумеваете под "уменьшением цвета": вы хотите сделать элемент прозрачным или, возможно, добавить белый цвет?

HSL цвета предоставляют удобный способ работы с цветами в CSS. Значение цвета в HSL задается следующим образом: hsl(оттенок, насыщенность%, яркость%), где диапазон оттенка — от 0 до 255.

Поддержка HSL есть в следующих браузерах: IE9 и выше, Firefox, Chrome, Safari, а также в Opera 10 и выше.

Пример использования HSL в CSS:

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

В этом примере первый цвет (для элемента a) имеет оттенок 240 (глубокий синий), 65% насыщенности и 50% яркости, в то время как второй цвет (для элемента a.lighter) немного более светлый с теми же оттенком и насыщенностью, но с яркостью 75%. Это позволяет легко управлять цветами и создавать гармоничные палитры.

Это старый вопрос, но большинство ответов требуют использования препроцессоров или JavaScript, или же они не только изменяют цвет элемента, но и цвет вложенных в него элементов. Я хочу предложить довольно сложный способ реализации только с помощью CSS. Вероятно, в будущем, с более продвинутыми функциями CSS, это станет проще.

Идея основана на использовании:

• RGB-цветов, чтобы иметь отдельные значения для красного, зеленого и синего;
• CSS-переменных для хранения значений цвета и затемненности;
• функции calc, чтобы применить изменения.

По умолчанию затемненность будет равна 1 (за 100%, обычный цвет), и если вы умножите на число от 0 до 1, то вы сделаете цвет темнее. Например, если вы умножите каждое значение на 0,85, вы сделаете цвета на 15% темнее (100% - 15% = 85% = 0,85).

Вот пример, я создал три класса: .dark, .darker и .darkest, которые будут делать оригинальный цвет темнее на 25%, 50% и 75% соответственно:

html {
  --clarity: 1;
}

div {
  display: inline-block;
  height: 100px;
  width: 100px;
  line-height: 100px;
  color: white;
  text-align: center;
  font-family: arial, sans-serif;
  font-size: 20px;
  background: rgba(
                  calc(var(--r) * var(--clarity)), 
                  calc(var(--g) * var(--clarity)), 
                  calc(var(--b) * var(--clarity))
                );
}

.dark    { --clarity: 0.75; }
.darker  { --clarity: 0.50; }
.darkest { --clarity: 0.25; }

.red {
  --r: 255;
  --g: 0;
  --b: 0;
}

.purple {
  --r: 205;
  --g: 30;
  --b: 205;
}

<div class="red">0%</div>
<div class="red dark">25%</div>
<div class="red darker">50%</div>
<div class="red darkest">75%</div>

<br/><br/>

<div class="purple">0%</div>
<div class="purple dark">25%</div>
<div class="purple darker">50%</div>
<div class="purple darkest">75%</div>

Этот метод позволяет настраивать затемненность цвета без дополнительных инструментов и сохраняет оригинальный цвет элементов.

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

rgba(0, 0, 0, 0.3);

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

rgba(255, 255, 255, 0.3);

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

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

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