【Sass】カラージェネレーターっぽく使ってみる。 | バシャログ。
家から5分の立ち飲み屋が21時閉店でつらいhakoishiです。 さて、今回はSassをカラージェネレーターっぽく使ってみるサンプルなど。 色の属性を変更する方法と、色相差を指定して配色を作るmixinのご紹介です。 属性を変更 まずは下準備として。 基準色（$sampleColor として定義）から色相、明度、彩度の3属性に分解します。 色相（0.0-360.0degの範囲で取得） hue($sampleColor) 彩度（0-100%の範囲で取得） saturation($sampleColor) 明度（0-100%の範囲で取得） lightness($sampleColor) 色相の対応は下記の図を参照のこと。赤を0degとして右回りです。 その後、必要な属性を変更してカラーコードに戻します。 変更後の属性はそれぞれ下記の変数に格納されているものとします。 色相→$newHue、彩度
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-b
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
