広告技術コンテンツマーケティングマーケティングツールセールスおよびマーケティングのトレーニング

なぜ私たちの目は補色のカラーパレットスキームを必要とするのか…そしてあなたがそれらを作ることができる場所

XNUMX つ以上の色が互いに補完し合う仕組みの背後には、実は生物科学があることをご存知ですか? 私は眼科医でも検眼医でもありませんが、私のような単純な人々のためにここで科学を翻訳しようとします. 一般的な色から始めましょう。

色は周波数です

りんごは赤い…ですよね? まあ、そうではありません。 リンゴの表面で光が反射および屈折する頻度により、リンゴが検出され、目で信号として変換され、脳に送られ、そこで「赤」と識別されます。 うーん…考えただけで頭が痛いです。 確かにそうですが…色は単に光の周波数です。 これは、電磁スペクトルと各色の周波数のビューです。

色と電磁スペクトル

プリズムに向けられた白色光が虹を生み出すのはまさにこのためです。 実際に起こっているのは、光が屈折するにつれて結晶が波長の周波数を変化させているということです。

プリズム
クリスタルプリズムは白色光を多くの色に分散させます。

あなたの目は周波数検出器です

あなたの目は、電磁スペクトルの色周波数の範囲の単なる周波数検出器です。 色を検出する能力は、目の壁にあるさまざまな種類の錐体を通して起こり、視神経に接続されます。 各周波数範囲は、これらの錐体のいくつかによって検出され、視神経への信号に変換されて脳に送られ、そこで識別されます。

非常にコントラストの高いものを長時間見つめ、目をそらし、見ている元の色と一致しない残像を見続けることができることに気づいたことがありますか? それが白い壁の青い正方形だとしましょう:

しばらくすると、青い光を処理する目の細胞が疲労し、脳に送る信号がわずかに弱くなります。 可視スペクトルのその部分がわずかに抑制されているため、青い正方形を見つめた後に白い壁を見ると、かすかなオレンジ色の残像が見られます。 あなたが見ているのは、壁からの白い光のスペクトルから、脳がオレンジ色として処理するほんの少しの青を引いたものです。

色彩理論101:補色をあなたのために働かせる

その疲労が起こらなければ、私たちの目と脳は、彼らが見ている複数の波長(例えば色)を解釈するために一生懸命働く必要はありません。

視覚的ノイズと調和

音と色の例えをしてみましょう。 互いに補完的ではないさまざまな周波数と音量を聞いた場合、それは次のように考えるでしょう。 ノイズ。 これは、検出される明るさ、コントラスト、色のいずれかが可能な色と同じです。 視覚的に うるさいまたは補完的。 どんな視覚的媒体においても、私たちは調和に向かって努力したいと考えています。

真っ赤なシャツを着た映画の背景にエキストラが表示されないのはそのためです。 そしてそれが、インテリアデコレーターが壁、家具、アート、そして彼らがデザインしている部屋の他の特徴全体で補色を見つけるために一生懸命働く理由です。 色は、脳が色を解釈するのがいかに簡単であるかに基づいて、訪問者がそこに足を踏み入れたときに得られるムードを作り出す上で重要です。

あなたの カラーパレット 美しいハーモニーでバンドを組み立てるのと同じです。 そして、組み立てられた声と楽器が音量と周波数で密接に整列しているように…カラーパレットの補色もそうです。 カラーパレットのデザインは、色の検出を微調整した専門家にとってはまさに芸術の形ですが、補完的な周波数を計算できるため、これは絶対に計算科学でもあります。

ハーモニーについてはもうすぐ…色彩理論に戻りましょう。

RGBカラー

デジタルスペクトル内のピクセルは、赤、緑、青の組み合わせです。 赤= 0、緑= 0、青= 0は次のように表示されます。 赤= 255、緑= 255、青= 255は次のように表示されます。 。 その間のすべては、255つで構成される異なる色です。 補色の計算の非常に基本的なことは非常に簡単です…新しいRGB値のXNUMXからRGB値を引くだけです。 次に例を示します。

オレンジとブルーのこの光の周波数の違いは、対照的であるほど十分に離れていますが、私たちの目が解釈するのが難しいほど遠くはありません。 色の周波数は私たちの受容体を補完し、喜ばせます!

3つの色を計算するのは簡単です…XNUMXつ以上の補色を計算するには、各オプション間で同等の量を計算する必要があります。 それが理由です カラーパレットスキームジェネレータ とても重宝します! 必要な計算が非常に少ないため、これらのツールは互いに補完するいくつかの色を提供できます。

カラーホイール

色の関係を理解するには、カラー ホイールを使用して視覚化するのが最適です。 色は、相対頻度ではなく円形に配置されます。 半径距離は色の彩度であり、円上の方位角は色の色相です。

カラーホイール

アイザックニュートン卿は、プリズムを使った実験の基礎となった1665年に最初にカラーホイールを開発しました。 彼の実験は、赤、黄、青が他のすべての色の原色であるという理論につながりました。 サイドノート…彼は各色に音楽的な「ノート」を適用しました。

ハーモニーで武装して…

ニュートンカラーサークル

カラーハーモニーの種類

補色の各セット間の関係と計算方法は、次のように知られています。 調和。 これが素晴らしい概要ビデオです:

各タイプには、さまざまな特性が関連付けられています。

  • 類似 –カラーホイール上で隣り合っている色のグループ。 
  • 単色 –単一の基本色相から派生し、その色合い、色調、および色合いを使用して拡張されたグループ。
  • トライアド –周囲に等間隔に配置された色のグループ カラー ホイール
  • Complementary –カラーホイール上で互いに反対の色のグループ。
  • スプリットコンプリメンタリ –補集合に隣接するXNUMXつの色を使用する補集合のバリエーション。
  • 長方形(四面体) –XNUMXつの相補的なペアに配置されたXNUMXつの色を使用します
  • 正方形である –長方形に似ていますが、XNUMX色すべてがカラーサークルの周りに等間隔に配置されています
  • –色とその補色に隣接するXNUMXつの色
  • シェード –原色の色合い(明度の増加)または陰影(暗さ)の調整。

これらは主観的なテーマではなく、計算をよりよく理解するのに役立つ素敵な名前が適用された実際の数学計算です。

カラーパレットスキームジェネレータ

カラーパレットスキームジェネレーターを使用すると、次のような美しく補色の組み合わせを得ることができます。

クライアントサイトで作業しているときは、カラーパレットスキームジェネレーターをよく使用します。 私は色の専門家ではないため、これらのツールを使用すると、背景、境界線、フッターの背景、プライマリボタンとセカンダリボタンの色などをより適切に選択できます。 その結果、はるかに見た目が良いWebサイトになります。 広告からウェブサイト全体まで、あらゆるもののデザインに適用することは、微妙で信じられないほど強力な戦略です。

オンラインの優れたカラーパレットスキームジェネレーターは次のとおりです。

  • Adobe –最大5色の素晴らしいツールで、さまざまな種類のテスト、調整、さらには任意のアドビ製品へのテーマの保存を行うことができます。
  • ブランドカラー –周りの公式ブランドカラーコードの最大のコレクション。
  • Canva –写真をアップロードすると、パレットの基盤として使用されます。
  • コラー –数回クリックするだけで一貫性のあるWebカラーパレットを生成します。 
  • カラーデザイナー –色を選択するか、事前に選択した色を使用するだけで、アプリが残りの作業を行います。 
  • カラーハント –何千もの流行の厳選されたカラーパレットを備えた色のインスピレーションのための無料でオープンなプラットフォーム
  • カラークラー – Instagramのカラーパレットを生成して、見た目を美しくします。
  • コルモリンド –ディープラーニングを使用する配色ジェネレーター。 写真、映画、人気のあるアートから色のスタイルを学ぶことができます。
  • 色空間 – XNUMX〜XNUMX色を入力して、いくつかのスキームを生成するだけです。
  • カラーコード –左側にいくつかのハーモニースタイルを備えたカラーパレットを作成するための、画面全体で非常にクールなエクスペリエンス。
  • COLOURlovers –世界中の人々が色、パレット、パターンを作成して共有し、最新のトレンドについて話し合い、カラフルな記事を探索するクリエイティブコミュニティ。
  • クーラー –完璧なパレットを作成するか、何千もの美しい配色からインスピレーションを得てください。
  • データカラーピッカー –パレットチューザーを使用して、次の一連の色を作成します。 視覚的に等距離
  • クロマ – AIを使用して、好きな色を学習し、発見、検索、保存するためのパレットを作成します。
  • 材料設計 – UIの配色を作成、共有、および適用します。 アプリのエクスポートも付属しています!
  • ミューズリーカラー –色の名前またはコードを追加して、美しいパレットを作成します。
  • パレットン –基本的な色を選択し、インスピレーションを得ます。

色とアクセシビリティ

次のパレットスキームを設計することを決定するときは、あなたの経験と相互作用する必要のある視覚障害や色の欠陥を持つ人々がかなりの数いることを覚えておいてください。

  • コントラスト –それぞれの独立した色には 輝度。 オーバーレイと隣接するオブジェクトの色は、視覚障害を持つ人々がそれらを区別できるようにするために、4.5:1の相対輝度比を持っている必要があります。 自分で比率を計算しようとする手間はかかりません。XNUMX色の比率を次のようにテストできます。 コントラスト比、または カラーセーフ.
  • 図像 –フィールドを赤で強調表示しても、色覚異常のある人には役立ちません。 何らかのメッセージやアイコンを適用して、問題があることを知らせてください。
  • フォーカス – 多くの人がキーボードやスクリーンリーダーを使って操作しています。 サイトを利用できるように、すべてのアクセシビリティ タグを使用して、ユーザー インターフェイスが適切に設計されていることを確認してください。 視覚障害のあるユーザーにとって、余白の使用と、レイアウトを破壊しない範囲でフォント サイズを拡大または縮小する機能は重要です。

あなたは目の専門家ですか? 色の専門家? アクセシビリティの専門家? この記事を改善するためのガイダンスを私に提供してください!

開示:私はこの記事でアフィリエイトリンクを使用しています。

Douglas Karr

Douglas Karr のCMOです オープンインサイト の創設者であり、 Martech Zone。 ダグラスは、マーテックのスタートアップ企業数十社の成功を支援し、マーテックの買収と投資における 5 億ドルを超えるデューデリジェンスを支援し、企業の販売戦略とマーケティング戦略の実装と自動化を支援し続けています。 ダグラスは、国際的に認められたデジタル変革と MarTech の専門家兼講演者です。 ダグラスは、ダミーズ ガイドやビジネス リーダーシップに関する書籍の著者でもあります。

関連記事

先頭へ戻るボタンに
閉じる

Adblockが検出されました

Martech Zone は、広告収入、アフィリエイト リンク、スポンサーシップを通じてサイトを収益化しているため、このコンテンツを無料で提供できます。 当サイトをご覧になる際は、広告ブロッカーを削除していただければ幸いです。