Palettonを使用してWordPressWebサイトのカラーパレットを選択する

公開: 2020-07-31

この投稿では、Palettonを使用してWordPressWebサイトのカラーパレットを選択する方法を見ていきます。 Palettonは、時間を大幅に節約できる使いやすいオンラインカラーパレットジェネレーターです。すべてのウェブデザインクライアントがブランドの配色を持っているわけではなく、彼らのウェブサイトの色を選ぶのはあなた次第です。そこで、Palettonが役に立ちます。

オンラインで利用可能なすべてのオプションの中で、Palettonはライブサンプル機能のためにお気に入りの1つです。アプリは数年更新されていませんが、ありがたいことに、必要なものに対して完全にうまく機能します。あなたはPaletton.comでアプリを見つけるでしょう。その周りのグーグル広告を無視して、あなたは行ってもいいです。

あなたのウェブサイトに適切な色を選択することが重要なのはなぜですか

Palettonアプリの使用方法を詳しく説明する前に、Webサイトに適切なカラーパレットを配置することが重要である理由を簡単に確認しましょう。ご存知のように、色は視聴者の感情と最終的には彼らの決定に影響を与えるサブリミナルメッセージを運びます。色は、Webサイトの会社のブランドも表す必要があります。

Webサイトのカラーパレットを選択する最良の方法は、Webサイトに表現したいムードを検討することです。インテリアデザイナーが空間に特定のムードを与えるために色を選択するのと同じ方法で、あなたはウェブサイトに対して同じことをすることができます。第一印象を考えてください。誰かが明るく鮮やかな色のウェブサイトにアクセスすると、満足感を感じ、笑顔になることさえあります。ニュートラルな落ち着いた色調のウェブサイトは、人を落ち着かせ、快適さを植え付けることができます。

もちろん、選択する色もブランドと一致している必要があります。それは、ウェブデザイナーとしてのあなたが中心的な舞台となる組み合わせと調性にあります。パレットの色を最大限に活用することも、サイトの雰囲気にとって重要です。

そのため、Palettonはお気に入りのカラーパレットジェネレーターの1つです。 Webサイトで、カラーパレットがさまざまな組み合わせでどのように適用されるかをプレビューできます。これは、選択した色についてより適切な決定を下すのに役立ちます。明るい色ではなく暗い色を背景にすると、最終的なデザインに大きな違いが生じます。

すべてのカラーパレットはベースカラーで始まります

Palettonで作成するすべてのカラーパレットには、使用するベースカラーが必要です。しかし、どのベースカラーを使用するかをどうやって知るのでしょうか？

クライアントがあなたに提供したコンテンツ、彼らのブランディング、そしてあなたが提供した画像を見てください。

クライアントにカラーロゴがある場合は、それをベースカラーとして使用します。
スポイトツールを使用して、クライアントから提供された画像の1つから1つまたは2つの色を抽出します。
彼らの会社の雰囲気とブランドストーリーについてクライアントに尋ねてください。
テンプレートや子テーマとして、またはポートフォリオ用に販売するWebデザインを作成している場合は、デザインの雰囲気に応じて色を選択してください。

Palettonでパレットを作成するときは、基本色を視覚的に選択するか、基本色の16進タブに16進コードを選択できます。

PalettonアプリのUIを理解する

次に、パレットの作成を開始します。すべてがどのように設定されているかを見てみましょう。アプリには2つの主要なセクションがあります。左側は色の選択に関するものであり、右側はプレビューの表示に関するものです。

まず、左側の色選択ツールを見てみましょう。この側で何を変更しても、右側の結果は変わりますが、最初にそれぞれの側が何ができるかを理解するのが最善です。

左側–カラーセレクター

Palettonアプリに入ったときに最初に気付くのは、カラーホイールです。デフォルトのビューの基本色は、単色（1色）パレットのニュートラルレッドです。

カラーサークル内の線に5つのドットのセットが表示されます。中央のドットがベースカラーで、2つのドットが明るさと彩度を追加し、他の2つのドットがコントラストと彩度を追加します。

色の組み合わせ

カラーサークルの上には、5つの組み合わせボタンがあります。オプションは左から右です。

単色–1色+オプションの補完
隣接–3色+オプションの補完
トライアド–3色+オプションの補完
テトラッド–4色
フリースタイル–4色

ベースカラー

ベースカラーを変更するには、次のいずれかを実行できます。

メインカラードットを外側の円の任意の場所にドラッグします。
円の内側の中央のドットをドラッグして、外側の円で選択したメインカラーの別の色相を選択します
左下のタブに16進コードを入力します。
二次色を基本色に変えるには、画面のプレビュー側でそれを行う必要があります。これについては後で詳しく説明します。

円の内側にベースカラードットをドラッグすると、他のすべてのドットがそれに沿って移動し、色相のバリエーションが表示されます。

ドラッグする前にShiftキーを押しながら、個々の色を選択することもできます。

微調整

円の左上にあるボタンを使用すると、色相を手動で入力して微調整できます。右下のボタンを使用すると、さらに微調整機能があります。ここでは、選択した色に関するすべてを微調整できます。

色相
飽和
輝度
対比

ボタンをクリックするだけで、各効果を1度、5度、または10度ずつ増減できます。

ベースカラーに応じたプリセット

色選択領域には、2つの主要な選択オプションがあります。色とプリセット。上記の色のセクションを見ました。それでは、プリセットタブにアクセスしてみましょう。選択したベースカラーと組み合わせに応じて、プリセットにはさまざまな変数が表示されます。これらは、色相、彩度、明るさ、コントラストを自分でいじりたくない場合に役立ちます。

これらのプリセットは、選択した色で何が可能か、そして最初のパレットを補完する可能性のあるセカンダリパレットがあるかどうかを知るのに役立ちます。

右側–パレットプレビュー

Palettonの右側には、すべてのライブプレビューが表示されます。メインエリアは4つのセクションに分かれており、単色パレットなどを2色、3色、または4色で視覚化できます。各カラーセクションには、より広い領域の基本色とその周囲の4つのバリエーションが表示されます。

下の画像では、カラーピッカーとプレビューがどのように連携するかを確認できます。

プレビューの四角の下には、プレビューの外観を変更できるタブがあります。デフォルトのビューが間違いなく最適ですが、外観を変更したい場合に備えて、そのボタンが用意されています。

ベースカラーの切り替え

プレビューセクション内で、2次色または補色のいずれかをクリックして、それらを基本色に変えることができます。任意の色にカーソルを合わせ、[詳細]をクリックします。その色のすべての情報が表示されるほかに、[基本色として適用]というボタンが表示されます。これをクリックすると、パレットのすべての色が変わります。

Palettonのビジョンシミュレーション機能の使用

Palettonの最大の特徴の1つは、予期しない場合に色がどのように見えるかを評価する機能です。この機能は「ビジョンシミュレーション」と呼ばれ、プレビュースクエアの下にあります。利用可能なシミュレーションは次のとおりです。

色覚異常シミュレーション
彩度を下げる
ガンマシミュレーション
Webカラー（レガシー216カラーパレット）

これは、Webサイトのパレットを作成する場合に最適なツールです。これらすべてのインスタンスでパレットが正常に表示されるかどうかを確認できます。最も便利なのは色覚異常のシミュレーションです。すべての色が互いに区別されていることを確認するのは良いことです！

あなたのカラーパレットの実例を見る

Palettonのもう1つの実用的なツールは、サンプルWebサイトやその他のデザインスタイルでパレットがどのように表示されるかを示すタブです。これらのシミュレーションは、「例…」タブにあります。最初の選択肢はページレイアウトであり、これにはいくつかのオプションがあります。

ホワイトページ
ダークページ
ポジティブなデザイン
ネガティブデザイン

このアプリでは、選択したカラーパレットを使用して、芸術的なデザインの他のシミュレーションを表示できます。静的な例とアニメーション化された例がいくつかあります。これらは、カラーパレットがどれだけの可能性を持っているかを知るために実用的です。

さらに、この段階では、パレットをいくつかの異なる方法でランダム化できます。

スタイルとは異なり、同様の色
ようではない
似ている
色とは異なり、似たようなスタイル

ランダム化する前に、必ずパレットのコピーを入手してください。戻ることはありません。

カラーパレットのエクスポートとコピー

カラーパレットを調整してプレビューしたので、Palettonからエクスポートして、Webサイト用に準備します。

パレットをコピーまたはエクスポートするには、いくつかの異なる方法があります。ウィンドウの右上には「パレットを共有」と書かれたボタンがありますが、しばらく前に壊れたようです。ボタンは何もしないので無視してください。

これらの他の方法のいずれかでパレットをコピーします。

個々の色の16進コードをコピーするには、ホバーして表示し、クリックして情報ウィンドウを開きます。
「テーブル/エクスポート」をクリックして、さまざまな形式のパレットを表示します。
[テーブル/エクスポート]タブ内で、次のいずれかの形式でエクスポートします。
- カラーリスト
  - HTML
  - 以下
  - CSS
  - SASS
  - XML
  - 文章
- 色見本
  - PNG画像
  - ACO（フォトショップ）
  - GPL（Gimp）
選択したパレットで色の組み合わせを表示することもできます。

WordPressWebサイトに色を追加する

それでは、実際にサイトに色を追加しましょう。

Palettonアプリは6年以上更新されていないため、単純なテキストバージョンをダウンロードして、スタイルシートに手動で色を入力することをお勧めします。エクスポート機能は、WebサイトのHTMLまたはCSSスタイルシートでは機能しない場合があります。

Diviテーマに色を追加するには、テーマオプションに移動し、対応する16進コードで各色を入力します。

それはカラーラップです！

Palettonを使用してカラーパレットを作成する手順の確認が完了しました。このアプリの基本的な機能は他のカラーパレットアプリと似ていますが、他のアプリと比べて際立っているのは、ウェブデザインと他の芸術的なデザインの両方のライブサンプルで色を確認できることです。アプリが6年以上更新されていないのは残念です。ありがたいことに、それはそれらのグーグル広告を通して生き続けているようです！。

お気に入りのカラーパレットジェネレーターアプリは何ですか？ Palettonをもう試しましたか？コメントで教えてください！

DaGaAl / shutterstock.com経由の注目の画像