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

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

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

допустим следующий код CSS:

a {
  color: blue;
}

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

или

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

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

191
css

21 ответов

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

$linkcolour: #0000FF;

a {
  color: $linkcolour;
}

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

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

.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

обновление

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

200

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

opacity: 0.5;

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

76

цвета 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%);
}
41

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

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

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

18

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

rgba(0,0,0,0.3)

для более светлой пользы белой:

rgba(255,255,255,0.3).
14

насколько я знаю, вы не можете сделать это в 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)

13

если вы решите использовать 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;
}
12

вы можете использовать немного javascript для вычисления более темного и светлого цвета с помощью rgb ().

Скрипка : не очень приятно, но это просто для иллюстрации.

что он по существу делает, это устанавливает цвет и выбирает 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))      );
};
5

один простой ответ-использовать 50% прозрачный белый PNG над цветом:

div {
    background-color:red;
}

div:hover {
    background-image:url('lighten.png');
}

где светлее.png-это PNG белой заливки с прозрачностью 50%.

4

вы можете использовать RGBa ('a' - Альфа-прозрачность), но он еще не широко поддерживается. Это будет быть, хотя, так что вы можете использовать его сейчас и добавить запасной вариант:

a:link { 
    color: rgb(0,0,255); 
    }
a:link.lighter {
    color: rgb(128,128,255); /* This gets applied only in browsers that don't apply the rgba line */
    }
a:link.lighter { /* This comes after the previous line, so has priority in supporting browsers */
    color: rgba(0,0,255,0.5); /* last value is transparency */
    }
3

не напрямую, нет. Но вы можете использовать сайт, напримерcolorschemedesigner.com, это даст вам ваш базовый цвет, а затем даст вам шестнадцатеричные и rgb-коды для разных диапазонов вашего базового цвета.

Как только я найду свои цветовые схемы для своего сайта, я помещаю шестнадцатеричные коды для цветов и называю их в разделе комментариев вверху моей таблицы стилей.

некоторые другие генераторы цветовой схемы включить:

3

попробуй:

a {
  color: hsl(240, 100%, 50%);
}

a:hover {
  color: hsl(240, 100%, 70%);
}
1

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

ручки:

https://codepen.io/aronkof/pen/WzGmjR

#wrapper {
  width: 50vw;
  height: 50vh;
  background-color: #AAA;
  margin: 20px auto;
  border-radius: 5px;
  display: grid;
  place-items: center;
} 

.btn-wrap {
  background-color: #000;
  display: inline-block;
}

button {
  transition: all 0.6s linear;
  background-color: rgba(0, 255, 0, 1);
  border: none;
  outline: none;
  color: #fff;
  padding: 50px;
  font-weight: 700;
  font-size: 2em;
}

button:hover {
  background-color: rgba(0, 255, 0, .5);
}
<div id="wrapper">
  <div class="btn-wrap">
    <button class="btn">HEY!</buutton>
  </div>
</div>
1

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

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

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

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

0

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

0

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

0

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

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

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

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

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

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

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

0

сводя все это вместе, решение таблицы сделано исключительно с DIV и CSS, попробуйте;) браузер должен поддерживать цвета RGBA, хотя....

<head>
<style>
    .colored-div-table {
        display: table;
        table-layout: fixed;
    }
    .colored-div-table #col {
        display: table-column;
    }
    .colored-div-table #col:nth-child(odd) {
    }
    .colored-div-table #col:nth-child(even) {
    }
    .colored-div-table #col:nth-child(1){
        background-color: lightblue;
        width: 50px !important;
    }
    .colored-div-table #col:nth-child(2){
        background-color: lightyellow;
        width: 200px !important;
    }
    .colored-div-table #col:nth-child(3){
        background-color: lightcyan;
        width: 50px !important;
    }
    .colored-div-table #row {
        display: table-row;
    }
    .colored-div-table #row div {
        display: table-cell;
    }
    .colored-div-table #row div:nth-child(1) {

    }
    .colored-div-table #row div:nth-child(2) {
    }
    .colored-div-table #row div:nth-child(3) {
    }
    .colored-div-table #row:nth-child(odd) {
        background-color: rgba(0,0,0,0.1)
    }
    .colored-div-table #row:nth-child(even) {
    }
</style>
</head>
<body>

<div id="divtable" class="colored-div-table">
    <div id="col"></div>
    <div id="col"></div>
    <div id="col"></div>  

    <div id="row">
        <div>First Line</div><div>FL C2</div><div>FL C3></div>
    </div>

    <div id="row">
        <div>Second Line</div><div>SL C2</div><div>SL C3></div>
    </div>

    <div id="row">
        <div>Third Line</div><div>TL C2</div><div>TL C3></div>
    </div>

    <div id="row">
        <div>Forth Line</div><div>FL C2</div><div>FL C3></div>
    </div>
    <div id="row">
        <div>Fifth Line</div><div>FL C2</div><div>FL C3></div>
    </div>
    <div id="row">
        <div>Sixth Line</div><div>SL C2</div><div>SL C3></div>
    </div>
    <div id="row">
        <div>Seventh Line</div><div>SL C2</div><div>SL C3></div>
    </div>
    <div id="row">
        <div>Eight Line</div><div>EL C2</div><div>EL C3></div>
    </div>
    <div id="row">
        <div>Nineth Line</div><div>NL C2</div><div>NL C3></div>
    </div>
    <div id="row">
        <div>Tenth Line</div><div>TL C2</div><div>TL C3></div>
    </div>

</div>
</body>
0

для css с именем цвет "синий", есть "lightblue"

для 'зеленый', есть 'lightgreen'

для "серого" есть "светло-серый"

для "желтого" есть "lightyellow"

попробуйте просмотреть этот css с именем color list для большего:http://www.w3schools.com/CSS/css_colornames.asp

-1