Эквивалент CSS для текста Tint

Question

Я пытаюсь экспортировать файлы из Adobe InDesign в базовый HTML + CSS.

Пользователь может выбрать текст и изменить цвет текста. Используя SDK InDesign, я могу получить значения RGB для этого цвета, а в файле CSS объявить color: rgb(R,G,B), который отлично работает.

Вы также можете изменить значение оттенка текста. До сих пор я просто принимал значение оттенка, преобразовывая его в диапазон 0-1, а в CSS помещал запись как color: rgba(R,G,B,Tint)

Во время тестирования я понял, что tint = 0 на самом деле означает белый текст, но это не показать на HTML, потому что A (в RGBA) = 0 означает прозрачность !!!

Кто-нибудь знает, как обрабатывать значения оттенков в CSS?

Answer 1

В 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; 

Оттенок является выпуклой комбинацией вашего цвета и белый цвет. См. Wikipedia.

Answer 2

К сожалению, нет способа сделать текстовый оттенок, используя простой CSS.

Цвета в CSS могут быть определены следующими способами:

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

Source

Для этого вам понадобится сценарий JS. (см. Ответ Ивана Кукира);

Answer 3

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

Пояснение - Оттенок означает добавление белого цвета. Оттенок% X означает = есть смесь белого цвета и вашего цвета, где белый (100-X)% смеси, а ваш цвет составляет X% в смеси.
Таким образом, скажем, для цвета Красный (255,0,0) и оттенка .6 => Создайте смесь с 60% красным и 40% белым.

Таким образом, в результате чего смесь должна быть что-то вроде -
0,6 * красный + 0,4 * БЕЛАЯ
Это может следовать для смешивания любых 2 цвета (C1, C2) в определенной пропорции = р: д

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; 

Answer 4

.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%);