指定したパーセント毎にSass用のカラーチャートを生成してくれる「Sass Color Generator」

指定したパーセント毎にSass用のカラーチャートを生成してくれる「Sass Color Generator」

指定したパーセント毎にSass用のカラーチャートを生成してくれる「Sass Color Generator」

Sass Color Generatorは、カラーコードとパーセントを指定することで、Sass用のカラーチャートを生成してくれるWEBサービスです。Sassでは、以下のように変数でカラーコードを定義して、ベースとなる色を基に他の色を文字色などに指定することができます。


$basecolor:#dd2222;
color:lighten($basecolor, 10%);

上記では、ベースとなるカラーコードに#dd2222を定義し、それよりも10%明るい色をcolorに指定しています。とはいっても、実際どんな色になるかは見てみないとイメージできないし、指定した色が存在しない場合もあります。

そこで便利なのが、Sass Color Generatorです。カラーコードとパーセントを指定するだけで、指定したパーセント毎の明るさや彩度のカラーチャートをそれぞれ生成してくれます。

Sass Color Generatorの使い方

1. Sass Color Generatorにアクセスします。
2. 左にカラーコード、右にパーセントを指定します。

左にカラーコード、右にパーセントを指定

3. カラーチャートが生成されます。

カラーチャートが生成されます

値を変える度にリアルタイムでカラーチャートが生成されます。一瞬で知りたい情報が取得できますね。

あとがき

カラーコードも表示されるので、デザインをする時にも活用できそうです。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です