Динамически изменить цвет на светлый или темный в процентах 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

Смотрите мой комментарий к ответу Ctford.

Я думаю, что простой способ осветить цвет - это взять каждый из компонентов RGB, добавить 0xff и разделить на 2. Если это не дает желаемых результатов, возьмите 0xff минус текущее значение. раз некоторая константа, а затем добавить обратно к текущему значению. Например, если вы хотите сместить 1/3 пути к белым, возьмите (0xff - current) /3+current.

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

Тем не менее, я думаю, что преодоление доли расстояния до белого более перспективно, чем фиксированное количество шагов.

Answer 2

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

Answer 3

Похоже, jPaq (http://jpaq.org/) - это замена JXtension. Преимущество использования jPaq заключается в том, что вы можете загружать только то, что вам нужно, вместо полной библиотеки JavaScript. Вот ссылка на скачивание страница только для класса Color: http://jpaq.org/download/1.0.0.1008.

Answer 4

Я нашел класс PHP, который позволяет мне работать на этой стороне сервера. Я просто вывожу встроенный цветовой стиль CSS для всего, что мне нужно, чтобы он был светлее / темнее. Прекрасно работает.

http://www.barelyfitz.com/projects/csscolor/

_{(обратите внимание, что класс использует PEAR для выдачи ошибок, но я не хотел включать PEAR просто для изменения цветов, поэтому я просто удалил все ссылки на PEAR)}

Я превратил его в статический класс со статическими методами, чтобы я мог вызывать функции "lighten" и "darken" напрямую, не создавая новый объект.

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

$original_color = 'E58D8D';  
$lighter_color = Css::lighten($original_color, .7);  
$darker_color = Css::darken($original_color, .7);

Answer 5

Я написал плагин для jquery, который устраняет эту же проблему. Я беру цвет как свойство или задаю цвет свойства css, которое они хотят, и провожу его через некоторые вычисления. Перейдите в RGB, затем умножьте смещение на процент и верните новое значение. Дайте мне знать, если вы хотите пример.