暖色のカラーパレット:ブルー×オレンジとスパイスの8つのブランドパレット

暖色は、好きになるのは一番簡単なのに、言葉にするのが一番難しい色です。オレンジ、パプリカ、カレーはどれも近い位置にあります。だから輝くのですが、同時に互いの上では読みにくくなります。ここでは、すべてのHEXコード付きで8つの暖色パレットを紹介します。それぞれのパレットで「読む」役を担う色にも注目してください。

暖色にパートナーが必要な理由

暖色パレットには2つの問題があります。暖色は色相環で互いに近いので、並べると輝きはしても文字を載せられません。Paprika Kisses #C24325 と English Walnut #3E2B23 がまさにそれです。そして、コントラストを求めて色相環の反対側に手を伸ばすと、今度は新しい色が最初の色とケンカしてしまいます。

以下の8つのパレットは、2通りの方法でこれを解決します。最初の4つは、オレンジの反対色としてブルーを使い、その間に静かな第3の色を置きます。後半の4つは暖色の仲間内にとどまり、読める濃い色を1色だけ持ち込みます。

各パレットの4枚目のタイルは、マークで使うペアリングを示しています。白も黒も足さず、そのパレットの色だけで作っています。こうした反対色の選び方については、カラーハーモニーのペーパーをご覧ください。

ブルーとオレンジ、4つのかたち

ブルーとオレンジは、ブランディングで最も古い定番技であり、最も失敗しやすい技でもあります。色相環で向かい合っているので、組み合わせるとパチパチと弾けます。

落とし穴は明度です。Azraq Blue と Mahogany は同じ明度なので、触れ合う場所では縁がチカチカします。パターンならまだしも、背景に載せるロゴには痛い話です。

4つすべての解決策は、第3の色です。Vacherin Cheese、Apricot Sherbet、Silverton、Broad Daylight が、騒がしい2色に静かな着地点を与えます。

Saturated Sky

#5248F8

Saturated Sky

#FFAC3E

Mandarin Sorbet

#FFD3A4

Apricot Sherbet

Saturated Sky

Apricot Sherbet on Saturated Sky

最も明るいブルーに、やわらかなオレンジと淡いアプリコットを合わせました。Apricot Sherbet が両者の着地点です。

Mahogany

#4969B3

Azraq Blue

#BA3901

Mahogany

#FFEB88

Vacherin Cheese

Mahogany

Vacherin Cheese on Mahogany

振動するペアです。Azraq Blue と Mahogany は離しておき、静かな第3の色 Vacherin Cheese が両者をまとめます。

Raw Sunset

#0C3842

Sunken Harbour

#FF6634

Raw Sunset

#C1DBD0

Silverton

Raw Sunset

Raw Sunset on Sunken Harbour

ここではブルーが深くなります。Sunken Harbour は大きなオレンジの文字を支えられるほど暗く、Silverton が穏やかで淡い地色になります。

Cinnamon

#996513

Cinnamon Brown

#FDEB7D

Lemon Peel

#C2E2FF

Broad Daylight

Cinnamon

Lemon Peel on Cinnamon Brown

4つの中で最も穏やかです。Cinnamon Brown はここで一番暗い色ですが、それほど暗くはありません。そのため大きなマークや見出し向きのセットで、Broad Daylight が涼しげな淡色を担います。

スパイスカラーと、読めるダークカラー

スパイスカラーが暖かく見えるのは、互いに近い位置にあるからです。だからこそ、文字を載せるとケンカします。Paprika Kisses と English Walnut はどちらも赤茶色。並べると輝きます。

でも互いの上の文字としては読みにくいので、パプリカをウォルナットの上で文字に使うことはありません。それができるのが Chai Latte です。chai の上のウォルナットなら、すっと読めます。

Curry と Sesame Seed はさらに近い関係です。両方をまとめられるのが Black Turmeric。sesame の上では読みやすく、curry の上でもぎりぎり足ります。

Sun Dried Tomato

#752329

Sun Dried Tomato

#918C7E

Laurel Oak

#F1E8DF

Gardenia

Sun Dried Tomato

Gardenia on Sun Dried Tomato

Gardenia の上の Sun Dried Tomato は読みやすい組み合わせです。Laurel Oak は静かな中間色で、パターンには素敵ですが、小さな文字には不向きです。

Golden Sandalwood

#EBD3BB

Almond Light

#847862

Golden Sandalwood

#27271F

Green Velvet

Golden Sandalwood

Green Velvet on Almond Light

Almond Light の上の Green Velvet は読みやすい組み合わせです。Golden Sandalwood はここでの静かな中間色なので、パターンや大きな図形に使いましょう。

Paprika Kisses

#C24325

Paprika Kisses

#F9CBA0

Chai Latte

#3E2B23

English Walnut

Paprika Kisses

English Walnut on Chai Latte

Paprika Kisses と English Walnut は一緒だと輝きますが、文字は Chai Latte の上の English Walnut で入れます。

Curry

#D6A332

Curry

#E1D9B8

Sesame Seed

#2C4364

Black Turmeric

Curry

Black Turmeric on Sesame Seed

Curry と Sesame Seed はほとんど同じ色です。Black Turmeric は両方をまとめるダークカラーで、sesame の上なら読みやすくなります。

最後の2つのパレットの色はすべて、オープンなカラーネームリストに実在する名前です。Paprika Kisses、Chai Latte、English Walnut、Curry、Sesame Seed、Black Turmeric。

8つのパレットを一覧表で

ブランドで暖色パレットを使うには

1. まず「読む」色を決める。 輝きを選ぶ前に、Black Turmeric #2C4364 や Sunken Harbour #0C3842 のように、文字を担う色を決めましょう。
2. 騒がしいペアは離す。 同じ明度のブルーの隣にオレンジを置くと振動します。間に静かな第3の色を入れましょう。
3. 近い暖色はテクスチャとして使う。 近い2色は、パターンやストライプには向いていても、文字のペアには不向きです。
4. ロゴを1色でテストする。 オレンジでしか成立しないロゴは、スタンプや暗い写真の上で破綻します。システム全体についてはブランドカラーパレットのペーパーで、同じ考え方の派手なバージョンはボールドなカラーパレットで扱っています。

各ファミリーのファイルを入手

各ファミリーは Forge で無料のカラーセットとして公開しています。タップでコピーできるコード、Figma と Adobe (ASE) 用のスウォッチファイル、CSS変数、デザイントークンが付いています。

無料カラーセット

ブルーとオレンジ、4つのかたち:Saturated Sky、Mahogany、Raw Sunset、Cinnamon

すべてのHEXに加え、ASEスウォッチ、CSS変数、デザイントークン付き。

セットを開く

無料カラーセット

スパイスカラーと、読めるダークカラー:Sun Dried Tomato、Golden Sandalwood、Paprika Kisses、Curry

すべてのHEXに加え、ASEスウォッチ、CSS変数、デザイントークン付き。

セットを開く

FAQ

暖色のカラーパレットとは?

暖色のカラーパレットとは、色相環のオレンジ、赤、黄色の側にある色で構成されたものです。たとえば Paprika Kisses #C24325、Chai Latte #F9CBA0、Curry #D6A332 などがあります。ブランドで使うなら、文字を担うダークカラーを1色入れるのが最も効果的です。

オレンジに合う色は?

定番のパートナーはブルーです。色相環でオレンジの反対側にあるからです。Raw Sunset #FF6634 と深いブルーの Sunken Harbour #0C3842 は強力なペアです。Silverton #C1DBD0 のような静かな第3の色を加えれば、2色に穏やかな着地点ができます。

ブルーとオレンジのおすすめカラーパレットは?

Saturated Sky #5248F8 に Mandarin Sorbet #FFAC3E と Apricot Sherbet #FFD3A4 を合わせたものが最も明るい選択肢です。Sunken Harbour #0C3842 の上の Raw Sunset #FF6634 は深みのある選択肢。Mahogany #BA3901 と Azraq Blue #4969B3 は同じ明度なので、パターンとして使うのに向いています。

ブランドパレットにおけるスパイスカラーとは?

スパイスカラーとは、見た目にちなんで名付けられたアースカラーのことです。Paprika Kisses #C24325、Curry #D6A332、Black Turmeric #2C4364 などがあります。そのうち1色が文字を載せられるほど暗ければ、パレットとして成立します。

暖色の上だと文字が読みにくいのはなぜ?

色相環で隣り合う色は、明度も近いことがあります。Paprika Kisses と English Walnut はどちらも赤茶色なので、一方の上にもう一方で文字を置くと読みにくくなります。Chai Latte #F9CBA0 の上の English Walnut #3E2B23 なら読みやすくなります。

これらのカラーパレットは無料で使える?

はい。HEXコードはどんなプロジェクトでも自由に使えます。各ファミリーは Forge でスウォッチファイルとCSS付きで無料ダウンロードできます。

出典

• 色名とHEXコードは、チームのカラーボードにあるパレットカードから取得し、公開済みの Forge カラーセットと照合しました。Paprika Kisses、Chai Latte、English Walnut、Curry、Sesame Seed、Black Turmeric はオープンな color-name-list の名前です。
• 各ペアリングの読みやすさは、WCAG 2 のコントラスト式で確認しました。Azraq Blue と Mahogany は同じ明度なので、縁が振動します。Sunken Harbour は大きなオレンジの文字を支えます。Cinnamon はブルーとオレンジのセットの中で最も穏やかで、大きなマークに向いています。スパイスのセットでは、Chai Latte の上の English Walnut と Sesame Seed の上の Black Turmeric が読みやすく、Laurel Oak と Golden Sandalwood はパターン向けの静かな中間色です。
• 最初は Logo Brainy で2つのカルーセルとして公開しました。ブルーとオレンジ、4つのかたちとスパイスカラーと、読めるダークカラーです。