スポンサードリンク

配色のお悩みを一気解消!無料ツール『Paletton』の使い方

eyecatch

GIGAZINEで”カラーパレットを直感的に作ってページの見え方を確認できPNG・HTML出力もできる”Webサービスとして、「Paletton」というツールが紹介されていたので私も試してみました。色の設定で、ちょっと分かりにくいところがあったので、今日はそのへんの使い方を、画像と共にご説明。

カラーパレットを直感的に作ってページの見え方を確認できPNG・HTML出力もできる「Paletton」

画面左側に色相とトーンを設定するカラーホイールがあり、現在設定中の色が右側のプレビュー画面で見られるというもの。初期設定では、落ち着いたトーンの赤がベースカラーとなっており、その上にトーンオントーン(同系色濃淡)の関係にある色が表示されています。

ちょっとシャア専用ザクみたいな配色です。
Palettonの初期設定

色相を変えてみました。
Palettonの色相を変更

画面下方にある「EXAMPLES」というタブをクリックすると、現在設定中の配色で作成したWebサイトの例が見られます。
Webサイトに応用した場合の例を確認

「→Negative design」をクリックすると、ベースカラーとアクセントカラーが反転します。
Negative designをクリック

「Artwork」をクリックすると、花柄、チェックなど、設定中の配色を使った五つのパターン模様が選べます。元の画面に戻すには、右上の「×」か、右下の「Close」をクリック。
アートワークと元の画面に戻すボタン

初期設定は単色の配色ですが、「Adjacent Colors(隣接色相)」に設定を切り替えると、隣り合った3つの色相を選択することができます。
Adjacent Colors(隣接色相)

色相の隔たりは初期設定では30°ですが、「Dist:」のボタンを押し、数値を入力すると、変更することが可能。
色相の隔たりを変更

画像は、色相の隔たりを60°に変更したところ。「Dist:」の下の「default 30°」をクリックすると、元の30°に戻せます。
色相の隔たりを60°にしたところ

トライアド配色(色相環上の色を、結ぶと三角形の形になるように取った三色配色)も作成できます。デフォルトにおける三色の位置関係は、スプリットコンプリメンタリーに近い関係になっていますが、メイン以外の色相のカーソルを移動させることで、狭い意味のトライアド(正三角形)にすることも可能。

「Dist:」に示された角度は、メインの色の補色(色相環で対向する位置)に当たる色からの隔たりを示している模様です。
トライアド配色

カラーホイールの中央の円の中のカーソルを動かすと、トーンを変更することができます。

上の配色のトーンをビビッドに変更したものがこちら。
Palettonのトーン変更

Palletonのトーンの分布は、ごく大まかに言うと、図のようになっている模様。「明清色」は、一般にパステルカラーと呼ばれる淡い明るい色で、「暗清色」は、ディープカラーやダークカラーと呼ばれる重厚な色です。
Palettonのトーン分布

テトラード配色(色相環上の色を、結ぶと四角形の形になるように取った四色配色)もできます。
テトラード配色

いや、配色の感覚を鍛えるのにいいツールですね、これ。色々な色相、トーンでトライアドやテトラードを作成して確認しておくと、特に色彩検定2級の配色問題なんかで、威力を発揮しそうな気がします。ぜひ皆さんもお試しを。

今月の人気記事

コメントを残す

WP-SpamFree by Pole Position Marketing

サブコンテンツ

このページの先頭へ