CSSで任意の色から、背景色・文字色を決める方法

CSS の色に関する Tip を 2 つ紹介します。

• 1つの文字色から、薄い背景色を決める
• 1つの背景色から、文字色を決める

APIなどで色が1つ決まっている際に、文字色や背景色を決めるのに便利なテクニックです。

1つの文字色から、薄い背景色を決める

CSS の color-mix() を使うと、1つの色をベースにして
自動で ちょっと薄い背景色 を作ることができます。

たとえば、青色の10%を混ぜた背景色にする例です。

<div>薄い背景色</div>
<style>
div {
  display: inline-block;
  padding: 8px 12px;
 
  color: blue;
  background-color: color-mix(in srgb, blue 10%, transparent);
}
</style>

color-mix() が使える環境なら、淡い背景を作るときにとても便利です。

1つの背景色から、文字色を決める

背景色だけ指定して、自動的に読みやすい文字色に調整したい場合は、invert + grayscale + contrast を使う方法があります。

以下の記事が参考になりました。

• CSSのfilterを使って、背景色に合わせた文字色を自動的に設定する - Blanktar

<div>
  <span>読みやすい文字色</span>
</div>
<style>
div {
  display: inline-block;
  padding: 8px 12px;
  background-color: blue;
}
span {
  color: inherit;
  filter: invert(100%) grayscale(100%) contrast(100%);
}
</style>

背景色が濃くても薄くても、適度に読みやすい文字色になります。

終わりに

以上、CSS だけで、1つの色から他の色を決める方法を紹介しました。

購読する