Sassで基本的なカラースキームを生成する
公開:
更新:
最近は配色を決めるときに、ColorHexaを参考によく使っているのですが、CSS書く時にいちいちコピペするのが面倒なのでSassの変数にまとめています。
必要なものだけここからコピペして、分かりやすい名前の変数に入れたりして使っています。
被ってる部分は実際にはいちいち指定してません。こういう配色だと分かりやすくするために念のため書いています。
// 基本とする色
$color-base: #0088cc;
// 色相回転の基準角度
$hue-step: 30deg;
// 補色
$color-complementary: adjust-hue($color-base, 180deg);
// Analogous
$color-analogous-primary: $color-base;
$color-analogous-secondary-A: adjust-hue($color-base, -$hue-step);
$color-analogous-secondary-B: adjust-hue($color-base, $hue-step);
// Split Complementary
$color-split-complementary-primary: $color-base;
$color-split-complementary-secondary-A: adjust-hue($color-complementary, -$hue-step);
$color-split-complementary-secondary-B: adjust-hue($color-complementary, $hue-step);
// Triadic
$color-triadic-primary: $color-base;
$color-triadic-secondary-A: adjust-hue($color-base, -120deg);
$color-triadic-secondary-B: adjust-hue($color-base, 120deg);
// Tetradic
$color-tetradic-primary: $color-base;
$color-tetradic-primary-complemantary: $color-complementary;
$color-tetradic-secondary: adjust-hue($color-base, -$hue-step * 2);
$color-tetradic-secondary-complemantary: adjust-hue($color-tetradic-secondary, 180deg);
このまま使うとこんな感じになります。
生成された色の見本
#0088cc hex color(比較用)
そのまま使うにはあれですけど、目安として。
他にシェードやティントの関数を作っておくと便利です。
追記:
補色はcomplement()
でOKでしたね……。忘れてました。