b49993d71433ea.md

title	emoji	type	topics	published
color-mix()を使って簡単にカラーパレットを作成してみる	🎨	tech	css	true

こんにちは 😀

今回は CSS のcolor-mix()関数を使ってこんな感じのカラーパレットを作成してみたいと思います。

:::message color-mix()関数はまだ実験的な機能です。 本番で使用する前にこちらのサイトなどで対象のブラウザにサポートされているかチェックしてください。 :::

color-mix()とは？

簡単に説明すると、color-mix()は、2 つの色を組み合わせた結果を返してくれる CSS の関数です。

まぁ、百聞は一見にしかずということで、早速サンプルを見てみましょう。

@codesandbox

%で表示されている値が 2 色を組み合わせるときの配合の割合で、それぞれの結果を右に表示しています。

コードで注目する点は以下の部分です。

.mixed-1 {
  background-color: color-mix(in srgb, blue, red);
}

.mixed-2 {
  background-color: color-mix(in srgb, blue, red 30%);
}

color-mix()はcolor-mix(色の表現方法, 組み合わせたい色1, 組み合わせたい色2)というように使用し、それぞれの色には配合させたい割合を指定することができます。先ほど示した例でも red の割合を減らすことで表示される色の青色成分が強くなっていることが確認できると思います。

また、色の表現方法というのは、RGB 色モデルで表現される#ffffffやrgb(255, 255, 255)や HSL 色モデルで表現されるhsl(0, 0%, 100%)みたいなやつのことで、color-mix()ではcolorspaceと呼ばれ、srgb, srgb-linear, lab, oklab, xyz, xyz-d50, xyz-d65, hsl, hwb, lch, oklchの中から一つ指定する必要があります。

:::message colorspaceについて詳しく知りたい方はこちらが参考になります。 :::

カラーパレットを作成してみる

それではカラーパレットの作成をしてみましょう。先ほど説明したように、組み合わせる 2 色の配分を調整できるため、それを利用してグラデーション的に色を生成していきます。

@codesandbox

:root {
  --original-color: #04174f;
}

li:nth-child(1) div {
  background-color: color-mix(in srgb, var(--original-color) 10%, white);
}

li:nth-child(2) div {
  background-color: color-mix(in srgb, var(--original-color) 25%, white);
}

li:nth-child(3) div {
  background-color: color-mix(in srgb, var(--original-color) 50%, white);
}

li:nth-child(4) div {
  background-color: color-mix(in srgb, var(--original-color) 75%, white);
}

li:nth-child(5) div {
  background-color: color-mix(in srgb, var(--original-color) 100%, white);
}

上記のように元となる色を指定し、その色を白色と割合を調整しながら組み合わせることで簡単にカラーパレットを生成できます。

最後に

いかがだったでしょうか。color-mix()を知っておくと色の生成や管理が少し楽になるかもしれません。

それでは、最後までお読みいただきありがとうございました。