Используемая мной CMS определяет цветовые переменные в шестнадцатеричных значениях.Есть ли способ преобразовать значение этой переменной в более светлый оттенок этого цвета с помощью CSS?

Question

Я не могу изменить цветовые переменные CSS в CMS моей компании, которые записаны в шестизначных шестнадцатеричных значениях. Могу ли я использовать эти переменные, чтобы получить более светлый оттенок предопределенного значения цвета, используя только CSS?

Редактировать: мне все еще нужен цвет для ссылки на переменную. Я создаю шаблонную страницу для разных сайтов, размещенных на нашей CMS, и разные сайты имеют разные цвета для переменных --primary, --secondary и т. Д. Поэтому я не могу просто поставить статическое преобразование значений RGB для шаблона, так как он должен иметь возможность плавного копирования и вставки на разные сайты.

Моя компания использует собственную CMS, которая определяет цветовые значения (--primary, --secondary, --neutral, --accent) в шестизначных шестнадцатеричных значениях. Я не могу изменить их. Я пытаюсь определить цвет фона как 50% от нейтрального цвета.

К сожалению, я не очень разбираюсь в том, как использовать javascript или jquery. Прошло очень много времени с тех пор, как я знал, как использовать что-либо, кроме .changeClass. Это не значит, что я не могу, просто я не знаю, как сделать больше, чем копировать и вставлять.

Так что в идеале я ищу простое исправление CSS для этого, но если мне нужно скопировать и вставить строку на моей странице, я абсолютно могу.

<style>
:root { /* This is all predefined and I have no control over it. */
  --primary: #e42525;
  --neutral: #606161;
  --secondary: #003d75;
}

.wrapper {
  background-color: rgba( var(--neutral), .5); /* Since my values are in hex, I can't use the rgba() function thing */
}

</style>

Если есть простой скрипт, который я могу скопировать и вставить на мою страницу, который преобразует --neutral в значение rgb и определяет это значение как --neutral-rgb или что-то подобное, я мог бы использовать его. Я просто не уверен в своих способностях написания / понимания сценариев.

Или, если есть способ сказать:

background-color: hsl( var(--neutral) + "f0");

или

background-color: calc( var(--neutral) * (50%));

Это было бы так глупо ...

P.S. Не распинайте меня, если на этот вопрос уже был дан ответ. Я не совсем уверен, как правильно это сформулировать. В свободное время я учил себя Sass, так что я только начинаю разбираться с этим.

Большое спасибо!

Answer 1

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

:root { /* This is all predefined and I have no control over it. */
  --primary: #e42525;
  --neutral: #606161;
  --secondary: #003d75;
}

.wrapper {
  position:relative;
  z-index:0;
}
.one {
  --c:var(--neutral);
  --o:0.8;
}
.two {
  --c:var(--primary);
  --o:0.2;
}
.wrapper:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color: var(--c,transparent);
  opacity:var(--o,1);
}

<div class="wrapper">some content without background</div>
<div class="wrapper one">some content with neutral color</div>
<div class="wrapper two">some content with primary color</div>

Вы даже можете применить filter и иметь возможность изменить первоначальную окраску так, как вы хотите:

:root { /* This is all predefined and I have no control over it. */
  --primary: #e42525;
  --neutral: #606161;
  --secondary: #003d75;
}

.wrapper {
  position:relative;
  z-index:0;
}
.one {
  --c:var(--neutral);
  --o:0.8;
  --f:brightness(20%);
  color:#fff;
}
.two {
  --c:var(--primary);
  --o:0.2;
  --f:hue-rotate(130deg);
}
.wrapper:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color: var(--c,transparent);
  opacity:var(--o,1);
  filter:var(--f,none);
}

<div class="wrapper">some content without background</div>
<div class="wrapper one">some content with neutral color</div>
<div class="wrapper two">some content with primary color</div>