Paletton.comは、配色を決めるのに最適なツールです。カラーパレットを作成して配色パターンを決めるだけでなく、そのカラーパレットに含まれる各色の情報をを出力することもできます。今回は、そんなPaletton.comの使い方についてご紹介していきます。
Paletton.comとは
Paletton.comは、直感的に色の組み合わせを考えることができるツールです。ページには、カラーホイールとカラーパレットが表示されており、カラーホイールで選んだ色の組み合わせをカラーパレットで確認することができます。
実際にウェブサイトで使用した場合等のプレビューを見たり、様々な形式（HTML・CSS・LESS・XML・TEXT・PNG・ACO・GPL）でエクスポート（出力）したりすることもできる便利なツールです。
【URL】 Paletton.comのサイトはこちら
Paletton.comの使い方
それでは、Paletton.comの使い方をご紹介します。
カラーパレットを作成する
カラーパレットの作成方法には、カラーホイールを使用する方法と、プリセット（事前に作成された配色パターン）を使用する方法の2通りあります。どちらも簡単ですが、プリセットを使用する方がより直感的に素早く作成できます。
カラーホイールを使用する
（1）5種類の中から配色のパターンを決めます。
■Monochromatic（1-color）/モノクロ（1色）：1色だけの配色
■Adjacent colors（3-colors）/隣接色相（3色）：隣接する3色の配色
■Triad（3-colors）/トライアド（3色）：カラーホイール上で、3色を結ぶと三角形の形になる配色
■Tetrad（4-colors）/テトラド（4色）：カラーホイールを四等分した位置にある４色の配色
■Freestyle-4colors/フリースタイル（4色）：自由に選択する4色の配色
（2）カラーホイールの上にある小さな円をクリック、またはドラッグ＆ドロップで動かして、カラーパレットに入れる色を選びます。
（3）カラーホイールの中心にある5つの小さな円を動かして、色のトーンを調整します。真ん中の円をドラッグすると5つの円が一緒に動き、その他の4つの円をドラッグすると真ん中の円以外が動きます。
プリセットを使用する
（1）カラーホイールを使用する場合と同じように、配色パターンを決め、色を選びます。
（2）PRESETS（プリセット）のタブに切り替えます。
（3）選んだ色の組み合わせで、様々な配色パターンの一覧が表示されるので、好みのものを選択してカラーパレットを作ります。
（4）COLORSのタブに戻すと、色調などの各種調整機能を使用できます。
各種調整機能
Add Complementary（補色を追加）
クリックすると、カラーパレットに補色（カラーホイール上で正反対に位置する色）が追加されます。
Hue（色調）
数値（0〜360）を変更すると、色調を調整できます。
opposite（反対色）
クリックすると、選択した色の反対色（カラーホイール上の正反対の色である補色の隣近辺の色）のカラーパレットになります。
Dist（距離）
セカンドカラーとベースカラーとの間の距離（0°〜180°）を調整することができます。デフォルトは、30°に設定されています。
Base RGB
カラーコードを入力して、ベースカラーを設定することができます。
Fine Tune
Hue（色調）、Saturation（彩度）、Brightness（鮮明度）、Contrast（コントラスト）の4つを調整することができます。
プレビューを見る
EXAMPLESのタブをクリックすると、作成したカラーパレットの配色を使用したウェブサイトやイラスト、アニメーションのプレビューを確認することができます。
確認できるプレビュー一覧
■ウェブサイト（白）
■ウェブサイト（ダーク）
■ウェブサイト（ポジティブデザイン）
■ウェブサイト（ネガティブデザイン）
■アートワーク（Shatter Explosion）
■アートワーク（Random Flowers）
■アートワーク（Splash!）
■アートワーク（City Glitters）
■アートワーク（Tartan Fabric）
■アニメーション（Bubbling）
■アニメーション（Stripes）
プレビューの種類がこれほど多いと、イメージが湧きやすいですよね。
カラーパレットを出力する
（1）TABLES/EXPORTのタブをクリックします。
（2）図と各エクスポート形式が表示されます。
（3）出力する形式を選択して、配色の情報をエクスポートします。
Paletton.comを活用しよう！
Paletton.comは、無料で使えるとは思えないほど便利なツールです。直感的にカラーパレットを作ることができますし、プレビューのバリエーションがこれほど多いツールはなかなかないので重宝します。使い方も簡単なので、ぜひ活用してみてくださいね。
【あわせて読みたい！】
■配色パターンを決める時参考にしたい色見本・カラーパレット作成ツール25選！
