Sass で基本的なカラースキームを生成する

Category : CSS, WebDesign

最近は配色を決めるときに、ColorHexa.com を参考によく使っているのですが、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 でしたね……。忘れてました。

Trackbacks & Pingbacks

Leave a Reply