[解決済み] CSSでパーセンテージを指定して動的に色を明るくしたり暗くしたりする機能

質問

私たちはサイト上に大きなアプリケーションを持っており、このサイトの青いリンクのように青色をしたいくつかのリンクがあるとします。今、私はいくつかの他のリンクを作りたいのですが、より明るい色で。もちろん、CSSファイルに追加する16進コードで簡単にできますが、私たちのサイトでは、ユーザーが自分のカスタマイズしたプロフィール/サイト（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 reducing it
}

色を何％か減らす方法はありますか？

どのように解決するのですか？

すべてのモダンブラウザは、100％の filter サポート 2020年1月以降 . 偶数 UCブラウザー for Android (80ドルの携帯電話では、Chromeの代わりに)サポートしています。

a {
    /* a nice, modern blue for links */
    color: #118bee;
}
a:active {
    /* Darken on click by 15% (down to 85%) */
    filter: brightness(0.85);
}

さらに、ほとんどのブラウザでサポートされている CSS 変数を使って動的に制御することができます。 2017年10月より (QQを除く)。

:root {
    --color: #118bee;
    --hover-brightness: 1.2;
}
a {
    color: var(--color);
}
a:active {
    /* Darken on click */
    filter: brightness(var(--hover-brightness));
}

私のプロジェクトではありませんが、モダンなCSSがいかに素晴らしいかを示す実例として、ぜひご覧いただきたいものがあります。 MVP.css

オリジナル回答

を使用できるスタックを使用している場合、そのスタックでは サス または 少ない を使用することができます。 lighten 関数を使用します。

$linkcolour: #0000FF;

a {
  color: $linkcolour;
}

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

また darken も同じですが、逆方向です。