色のセンスがない人でも大丈夫、色を段階的に変化させるカラーパレットを簡単に作成できる便利ツール
Post on:2018年8月22日
Webデザインでも最近は、同一色相でトーンに変化をつけた色の組み合わせを使用するデザインが増えてきました。単に明るい・暗いの明度だけでなく、彩度や色相を段階的に変化させてカラーパレットを作成できるオンラインツールを紹介します。

Color Scale Generator
Color Scale Generator -GitHub
カラースケール ジェネレーターの使い方は、簡単です。
まずは、サイトにアクセスします。

Color Scale Generator
上記のカラーを表示
スライダーや数値を変更して、カラーを調整するだけで、好みのカラーパレットを作成できます。まずは「Darkness」を増やして、ダーク系のカラーを増やしてみます。

「hue angle」を変更すると、色相角が変更されます。

「saturation」は彩度で、ダーク系の彩度が高くなります。

カラーの数は「amount」で、変更できます。

ベースカラーは、上部のスライダーや数値で変更します。

最近はこういった同一色相で変化させたカラーを使う機会が多いので、助かります。

グレーのカラーパレットも簡単に作成できます。

sponsors