[CSS] 1色決めるだけで出来る手軽なカラーパレット作成法

色を決めるって大変ですよね？直感的に色を決められる人にとっては、さほど難しくないのかもしれませんが、個人的にはとても苦手です。

今回は、CSS変数 (カスタムプロパティ) とhsl関数とcolor-mix関数を使用した、手軽なカラーパレット作成法を紹介します。

hsl関数で1色作る

まずは1色だけhsl関数で色を作り、CSS変数に代入しておきます。今回は分かりやすいように赤 (#ff0000) を設定しています。

html {
  --red: hsl(0, 100%, 50%); /* = #ff0000 */
}

hsl関数は、色相 (Hue)、彩度 (Saturation)、輝度 (Luminance) から色を作成します。色相は 0度 (赤) から 360度 (=0度) までの角度、彩度は最も低い 0% から最も高い 100%、輝度は純色の 50% を基準に最も暗い 0% から最も明るい 100% で設定します。

hsl関数値の場合、色相をずらしたり、彩度・輝度を上げ下げするといった微調整がしやすいので、16進数値やrgb関数値に比べ、色が作りやすいと思います。

color-mix関数でカラーパレットを作る

あとは、color-mix関数で色のバリエーションを量産するだけです。color-mix関数は、色空間 (通常はsrgb)、混合する1つ目の色、混合する2つ目の色で設定します。今回は、2つ目の色のパーセンテージを 12.5% 刻みで設定しています。

html {
  --red: hsl(0, 100%, 50%);
  --red-50: color-mix(in srgb, #fff, var(--red) 12.5%);  /* = #ffdfdf */
  --red-100: color-mix(in srgb, #fff, var(--red) 25%);   /* = #ffbfbf */
  --red-150: color-mix(in srgb, #fff, var(--red) 37.5%); /* = #ff9f9f */
  --red-200: color-mix(in srgb, #fff, var(--red) 50%);   /* = #ff8080 */
  --red-250: color-mix(in srgb, #fff, var(--red) 62.5%); /* = #ff6060 */
  --red-300: color-mix(in srgb, #fff, var(--red) 75%);   /* = #ff4040 */
  --red-350: color-mix(in srgb, #fff, var(--red) 87.5%); /* = #ff2020 */
  --red-400: var(--red);                                 /* = #ff0000 */
  --red-450: color-mix(in srgb, #000, var(--red) 87.5%); /* = #df0000 */
  --red-500: color-mix(in srgb, #000, var(--red) 75%);   /* = #bf0000 */
  --red-550: color-mix(in srgb, #000, var(--red) 62.5%); /* = #9f0000 */
  --red-600: color-mix(in srgb, #000, var(--red) 50%);   /* = #800000 */
  --red-650: color-mix(in srgb, #000, var(--red) 37.5%); /* = #600000 */
  --red-700: color-mix(in srgb, #000, var(--red) 25%);   /* = #400000 */
  --red-750: color-mix(in srgb, #000, var(--red) 12.5%); /* = #200000 */
}

初めに作った色を変更すれば、カラーパレットのすべてに反映されるので、とても楽です。

カラーパレットをダークモードにも対応させる

カラーパレットをダークモードに対応させるためには、一方が白のとき、もう一方が黒になる、一対のCSS変数を用意します。ここでは --borw (Black OR White) と --worb (White OR Black) と命名しています。

これらのCSS変数を、混合する1つ目の色に設定し、ダークモード時に白と黒を入れ替えることで実現します。

html {
  --black: #000;
  --white: #fff;
  --borw: var(--black);
  --worb: var(--white);
  --red: hsl(0, 100%, 50%);
  --red-50: color-mix(in srgb, var(--worb), var(--red) 12.5%);
  …
  --red-350: color-mix(in srgb, var(--worb), var(--red) 87.5%);
  --red-400: var(--red);
  --red-450: color-mix(in srgb, var(--borw), var(--red) 87.5%);
  …
  --red-750: color-mix(in srgb, var(--borw), var(--red) 12.5%);
}
@media (prefers-color-scheme: dark) {
  html {
    --borw: var(--white);
    --worb: var(--black);
  }
}

CodePen

〆

よく使う赤・黄・緑・青の正解 (根拠を持ってコレだと思える色) が分かりません。WordPress や Bootstrap、Tailwind CSS といった有名なフレームワークを作っている中の人が、どうやって色を決めているのか気になります。