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

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

div {
    background-color:red;
}

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

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

Answer 2

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

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

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

• http://www.colorschemer.com/online.html
• http://colorschemegenerator.com/
• http://www.cssjuice.com/25-popular-color-scheme-and-palette-generators/

Answer 3

Это старый вопрос, но большинство ответов требует использования препроцессора или 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>

Answer 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 */
    }

Answer 5

Я знаю, что уже поздно, но вы можете использовать оболочку для кнопок и изменить уровень непрозрачности функции цвета 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>

Answer 6

Попробуйте:

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

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

Answer 7

Если вам нужна грубая сила для совместимости с более старыми браузерами, вы можете использовать Colllor , чтобы автоматически выбирать похожие цветовые вариации.

Пример (цвет: # a9dbb4):

Answer 8

Я добавляю ответ, используя сырые CSS3 и SVG, не требуя LESS или SASS.

В принципе, если вопрос заключается в том, чтобы сделать цвет на 10%, 25%, 50% светлее или темнее для эффекта глобального наведения, вы можете создать вызов данных SVG, например, такой:

:root{
--lighten-bg: url('data:image/svg+xml;utf8,<svg version="1.1" id="cssLighten" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"><rect opacity="0.2" fill="white" width="50" height="50"/></svg>') !important;
--darken-bg: url('data:image/svg+xml;utf8,<svg version="1.1" id="cssDarken" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"><rect opacity="0.2" fill="black" width="50" height="50"/></svg>') !important;

}

.myButton{
    color: white;
    background-color:blue;
}
.myButton:hover{
    background-image: var(--lighten-bg);
}

По какой-то неизвестной мне причине SVG не позволяет мне вводить шестнадцатеричное значение в атрибут "fill", но "white" и "black" удовлетворяют мою потребность.

Пища для размышлений: Если вы не возражаете против использования изображений, просто используйте 50% прозрачный PNG в качестве фонового изображения. Если вы хотите проявить фантазию, вызовите PHP-скрипт в качестве фонового изображения, передайте ему значения HEX и OPACITY и позвольте ему выплеснуть приведенный выше SVG-код.

Answer 9

Если вам нужно всего лишь изменить background цвет, это отличный подход, который ориентирован на будущее - используйте метод linear-gradient для background изображения!

Посмотрите пример ниже:

document
  .getElementById('colorpicker')
  .addEventListener('change', function(event) {
    document
      .documentElement
      .style.setProperty('--color', event.target.value);
  });

span {
  display: inline-block;
  border-radius: 20px;
  height: 40px;
  width: 40px;
  vertical-align: middle;
}

.red {
  background-color: red;
}

.red-darker {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.25),
    rgba(0, 0, 0, 0.25)
  ) red;
}

:root {
  --color: lime;
}

.dynamic-color {
  background-color: var(--color);
}

.dynamic-color-darker {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.25),
    rgba(0, 0, 0, 0.25)
  ) var(--color);
}

<table>
  <tr>
    <td><strong>Static Color</strong></td>
    <td><span class="red"></span></td>
    <td><span class="red-darker"></span></td>
  </tr>
  <tr>
    <td><strong>Dynamic Color</strong></td>
    <td><span class="dynamic-color"></span></td>
    <td><span class="dynamic-color-darker"></span></td>
  </tr>
</table>
<br/>
Change the dynamic color: <input id="colorpicker" value="#00ff00" type="color"/>

Кредиты: https://css -tricks.com / css-custom-properties-theming /

Answer 10

Соберите все вместе, решение для таблицы, выполненное исключительно с 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>