CSS-эквивалент для оттенка текста

В CSS нет оттенка, оттенка, насыщенности или яркости. Вы должны «встроить» эти свойства в свой цвет RGB. Чтобы применить оттенок к вашему RGB, используйте это выражение:

когда R, G, B от 0 до 255, оттенок от 0 до 1

new R = tint*R + (1-tint)*255;
new G = tint*G + (1-tint)*255;
new B = tint*B + (1-tint)*255;

Оттенок – это выпуклое сочетание вашего цвета и белого цвета. См. Википедию.

Решение Ивана Кукира верное, я просто добавляю объяснение, так как это может помочь кому-то позже.

Объяснение. Под оттенком подразумевается добавление белого к цвету. Оттенок %X подразумевает = есть смесь белого и вашего цвета, где белый составляет (100-X)% смеси, а ваш цвет составляет X% в смеси.
Таким образом, скажем, для красного цвета (255,0, 0) и оттенок .6 => Создайте смесь из 60% КРАСНОГО и 40% БЕЛОГО.

Следовательно, результирующая смесь должна быть примерно такой -
.6 * КРАСНЫЙ + .4 * БЕЛЫЙ
Это можно проследить для смешивания любых 2 цветов (C1, C2) в определенной пропорции = p:q

new R = p/(p+q) * R1 + q/(p+q) * R2
new G = p/(p+q) * G1 + q/(p+q) * G2
new B = p/(p+q) * B1 + q/(p+q) * B2

Для оттенка (R2,G2,B2) = (255 255 255)

new R = tint*R + (1-tint)*255;
new G = tint*G + (1-tint)*255;
new B = tint*B + (1-tint)*255;

К сожалению, нет способа сделать оттенок текста с помощью простого CSS.

Цвета в CSS можно указать следующими способами:

• Шестнадцатеричные цвета — #RRGGBB
• Цвета RGB - rgb(красный, зеленый, синий)
• Цвета RGBA - rgb(красный, зеленый, синий, альфа)
• Цвета HSL - hsl(оттенок, насыщенность, яркость)
• Цвета HSLA — hsl (оттенок, насыщенность, яркость, альфа-канал)
• Предопределенные/кроссбраузерные названия цветов — 'red', 'aqua' и т. д.

Источник

Поэтому для этого вам понадобится JS-скрипт. (См. ответ Ивана Кукира);

Для этого вы можете использовать переменные CSS — см. в этом примере. Определите R, G, B и оттенок как четыре разные переменные CSS.

body {
    --content-R: 100%;
    --content-G: 0%;
    --content-B: 0%;
    --text-tint: 0.5;
}

Затем вы можете использовать это как:

.content {
   color: rgb(
        calc(var(--content-R) * var(--text-tint) + 100% - 100% * var(--text-tint)),
        calc(var(--content-G) * var(--text-tint) + 100% - 100% * var(--text-tint)),
        calc(var(--content-B) * var(--text-tint) + 100% - 100% * var(--text-tint))
    );
}

Примечание:

• Это работает только в том случае, если цвета определены с использованием процентов от 0% до 100% (вместо целых чисел от 0 до 255). Это связано с тем, что функция rgb будет принимать числа с плавающей запятой в качестве процентов. Попытка использовать целое число 255 будет иметь расчетное значение, скажем, 255 * 0,5, что равно 127,5, что не является допустимым целочисленным значением цвета (поэтому цвет rgb не будет работать). Вы также должны быть осторожны с ограничениями calc. функция.

• Вы можете независимо изменять цвета и оттенки дочерних элементов, используя каскадные стили (это не сработало, когда я поместил rgb calc в собственную переменную CSS body).

• Я пробовал это только в Chrome 65 — другие браузеры могут действовать иначе!

• Это может отрицательно сказаться на производительности механизма стилей CSS в браузере?

.Less имеет для этого очень простую реализацию.

После того, как вы добавите файлы .less, вы можете затемнить и осветлить их по желанию.

.element{
  color:darken(#444,20%);
  // or
  // color: lighten(#444,50%);
}

взято с сайта less.org

// Variables
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);