2020年11月17日(火曜日)  (山下 莉穂)

配色に迷ったときの便利ツール「Paletton」

皆さんこんにちは。
AliveCastインターンの山下です。

デザインを考えていると「配色」に悩むことが多いのですが、
最近あるツールを使い出してから、色決めが劇的に速くなりました。
今回は、そのツールと活用方法について紹介したいと思います。

配色がすぐ決まる！「Paletton」とは

配色のためのツールは沢山ありますが、
ここで紹介するのは「Paletton」という無料のカラーパレット作成ツールです。
直感的に配色パターンを作れるのが便利！


Palettonの使い方

Palettonでカラーパレットを作成する方法は
・カラーホイールを使用する
・プリセットを使用する
の2種類あります。

どちらの方法でも直感的にカラーパレットを作成できますが、
私の場合は、とにかくデザインがまとまるための色をすばやく探したい！という時に、
以下の手順でこのツールを重宝しています。
すでに1、2色決まっていて、組み合わせる色を探している
といった場合に使えると思います。

１．Base RGB:にカラーコードを入力
カラーホイールの左下に「Base RGB:」入力欄があります。
たとえば、今デザインしているページのベースカラーやメインカラーが決まっている場合、そのカラーコードを入力します。

２．5種類の中から配色パターンを選択
カラーホイールの上部に5つの配色パターンが設置してあります。

◆Monochromatic（1-color）：1色だけの配色
◆Adjacent colors（3-colors）：隣接する3色の配色
◆Triad（3-colors）：カラーホイール上で、3色を結ぶと三角形の形になる配色
◆Tetrad（4-colors）：カラーホイールを四等分した位置にある4色の配色
◆Freestyle- 2-4colors/：自由に選択する2～4色の配色

カラーホイールを操作したりせずに、パっと配色を決めたい時は、
以下のような選び方をすればいいかと思います。

同系色でまとめたい → Monochromatic / Adjacent colors
補色を使ってひきしめたい → Triad / Tetrad

３．サンプル確認
Palettonの便利なところは、自分が作ったカラーパレットを使うと
実際にどんなイメージになるのかを、豊富なサンプルで確認できます。

カラーパレット下の「EXAMPLES」をクリックすると、
Webページのレイアウトやアートワークなどのプレビューを見ることができます。
デザインの完成形もイメージしやすくなる便利な機能です！


おわりに

今回はPalettonの活用方法を紹介しました。
使いこなすともっと便利なツールなので、
まだ使ったことのない方はぜひ試してみてくださいね。