Paletton.comの使い方は?無料で使えるカラーパレット作成・出力ツール


Paletton.comは、配色を決めるのに最適なツールです。カラーパレットを作成して配色パターンを決めるだけでなく、そのカラーパレットに含まれる各色の情報をを出力することもできます。今回は、そんなPaletton.comの使い方についてご紹介していきます。

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種類の中から配色のパターンを決めます。
Paletton.comのトップページ
■Monochromatic(1-color)/モノクロ(1色):1色だけの配色
■Adjacent colors(3-colors)/隣接色相(3色):隣接する3色の配色
■Triad(3-colors)/トライアド(3色):カラーホイール上で、3色を結ぶと三角形の形になる配色
■Tetrad(4-colors)/テトラド(4色):カラーホイールを四等分した位置にある4色の配色
■Freestyle-4colors/フリースタイル(4色):自由に選択する4色の配色

(2)カラーホイールの上にある小さな円をクリック、またはドラッグ&ドロップで動かして、カラーパレットに入れる色を選びます。
Paletton.comのトップページ

(3)カラーホイールの中心にある5つの小さな円を動かして、色のトーンを調整します。真ん中の円をドラッグすると5つの円が一緒に動き、その他の4つの円をドラッグすると真ん中の円以外が動きます。
Paletton.comのトップページ

プリセットを使用する

(1)カラーホイールを使用する場合と同じように、配色パターンを決め、色を選びます。
(2)PRESETS(プリセット)のタブに切り替えます。
Paletton.comのトップページ

(3)選んだ色の組み合わせで、様々な配色パターンの一覧が表示されるので、好みのものを選択してカラーパレットを作ります。
Paletton.comのトップページ

(4)COLORSのタブに戻すと、色調などの各種調整機能を使用できます。

各種調整機能

Add Complementary(補色を追加)

Paletton.comのトップページ
クリックすると、カラーパレットに補色(カラーホイール上で正反対に位置する色)が追加されます。

Hue(色調)

Paletton.comのトップページ
数値(0〜360)を変更すると、色調を調整できます。

opposite(反対色)

Paletton.comのトップページ
クリックすると、選択した色の反対色(カラーホイール上の正反対の色である補色の隣近辺の色)のカラーパレットになります。

Dist(距離)

Paletton.comのトップページ
セカンドカラーとベースカラーとの間の距離(0°〜180°)を調整することができます。デフォルトは、30°に設定されています。

Base RGB

Paletton.comのトップページ
カラーコードを入力して、ベースカラーを設定することができます。

Fine Tune

Paletton.comのトップページ
Hue(色調)、Saturation(彩度)、Brightness(鮮明度)、Contrast(コントラスト)の4つを調整することができます。

プレビューを見る

Paletton.comのトップページ
EXAMPLESのタブをクリックすると、作成したカラーパレットの配色を使用したウェブサイトやイラスト、アニメーションのプレビューを確認することができます。

確認できるプレビュー一覧

■ウェブサイト(白)
Paletton.comのプレビュー

■ウェブサイト(ダーク)
Paletton.comのプレビュー

■ウェブサイト(ポジティブデザイン)
Paletton.comのプレビュー

■ウェブサイト(ネガティブデザイン)
Paletton.comのプレビュー

■アートワーク(Shatter Explosion)
Paletton.comのプレビュー

■アートワーク(Random Flowers)
Paletton.comのプレビュー

■アートワーク(Splash!)
Paletton.comのプレビュー

■アートワーク(City Glitters)
Paletton.comのプレビュー

■アートワーク(Tartan Fabric)
Paletton.comのプレビュー

■アニメーション(Bubbling)
Paletton.comのプレビュー

■アニメーション(Stripes)
Paletton.comのプレビュー

プレビューの種類がこれほど多いと、イメージが湧きやすいですよね。

カラーパレットを出力する

(1)TABLES/EXPORTのタブをクリックします。
Paletton.comのトップページ

(2)図と各エクスポート形式が表示されます。
Paletton.comのトップページ

(3)出力する形式を選択して、配色の情報をエクスポートします。
Paletton.comのトップページ

Paletton.comを活用しよう!

Paletton.comは、無料で使えるとは思えないほど便利なツールです。直感的にカラーパレットを作ることができますし、プレビューのバリエーションがこれほど多いツールはなかなかないので重宝します。使い方も簡単なので、ぜひ活用してみてくださいね。

【あわせて読みたい!】
配色パターンを決める時参考にしたい色見本・カラーパレット作成ツール25選!

無料でホームページを作れる「ペライチ」

誰でも簡単にホームページ作成を!「ペライチ」

HTMLやCSSでお悩みなら簡単ホームページ作成サービス「ペライチ」におまかせください。
特別な知識は必要ありません。好みのテンプレートを選ぶだけで誰でも簡単にホームページを作ることが出来ます。
誰でも簡単にホームページ作成を!「ペライチ」

ホームページ大学編集長/フリーライター ウェブデザインや動物、美容、ダイエット等幅広いジャンルの記事を手掛ける。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする