パステルカラーパレット:HEXコード付きのやわらかなブランドパレット12選

パステルカラーパレットは、好きになるのは簡単で、使いこなすのは意外と難しい。やわらかな色は優しいブランドをつくりますが、ロゴには寄りかかれる何かが必要です。ここでは、パステルとミュートのパレットを12種、すべてのHEXコード付きで紹介します。それぞれに、全体を支える濃い色が1色入っています。

パステルパレットが成立する理由

パステルは白に寄せた色、ミュートカラーは灰色に向けて彩度を落とした色です。どちらも穏やかですが、コントラストはすぐに失われます。Blush Pop #FFB6EB を Vanilla Custard #FFF7AE の上に置けば、輪郭は消えてしまいます。

だから以下のパレットは、対等な色の集まりではありません。それぞれ役割が違います。文字とマークを決める濃い色と、空間を満たすやわらかな色です。各パレットの4枚目のタイルは、実際にマークで使うペアを示しています。そのパレットの色だけで作り、白も黒も足していません。

そこに至る方法は3つあります。パステルに背骨を加える、濃い色に静かなパレットを引っ張らせる、中間色を見出し用にとっておく。同じ発想の派手なバージョンは、ボールドカラーパレットの記事をどうぞ。

背骨のあるパステル

パステルはやわらかなブランドをつくりますが、重い仕事を担う色がなければロゴは弱くなります。この4つにはそれぞれ、パステルのペアと、マークを担える濃い色が入っています。

Blush Pop

#2F3D46

Charcoal Blue

#FFB6EB

Blush Pop

#FFF7AE

Vanilla Custard

Blush Pop

Blush Pop on Charcoal Blue

Charcoal Blue は Blush Pop と Vanilla Custard を余裕で支えます。ワードマークはどんなサイズでも担えるので、4つの中で最強の背骨です。

Blue Hepatica

#6060EE

Blue Hepatica

#F8CFFF

Pink Diamond

#CCDEF8

Fly a Kite

Blue Hepatica

Pink Diamond on Blue Hepatica

やや柔らかい背骨です。Blue Hepatica は Pink Diamond や Fly a Kite の上の大きなマークなら問題ありませんが、その下の小さな文字には向きません。タグラインはもっと濃い色で組みましょう。

Van Dyke

#693E21

Van Dyke Brown

#F7EBA9

Bleached Sunflower

#C6D6EF

Misty Mountains

Van Dyke

Bleached Sunflower on Van Dyke Brown

Van Dyke Brown は Bleached Sunflower を余裕で支えます。Misty Mountains は、暖かいペアの横に涼しい淡色を添えます。

Polished Copper

#B7672C

Polished Copper

#D0EBFC

Cloudless

#FBF7F1

Morning Snow

Polished Copper

Morning Snow on Polished Copper

Polished Copper も Blue Hepatica と同じルールです。ロゴには使っても、細かい文字には使わないこと。Cloudless と Morning Snow は2つの淡い背景色です。

濃い色が引っ張る静かなパレット

静かなパレットは、色相ではなく明度で成り立ちます。濃い色と明るい色が大きく離れていれば、ほぼ無彩色の3色でもブランドとして読めます。これはミュートカラーパレットの最も分かりやすい例でもあります。彩度は低く、構造は濃淡の差から生まれます。

Demitasse

#40342B

Demitasse

#DBD5D1

White Sand

#F0EDE5

Coconut Milk

Demitasse

Coconut Milk on Demitasse

Demitasse、White Sand、Coconut Milk は3つのニュートラルですが、濃い色が明るい色から遠いので、ちゃんとブランドとして読めます。

Olive Leaf

#31031F

Midnight Violet

#66693E

Olive Leaf

#FFF8ED

Floral White

Olive Leaf

Floral White on Midnight Violet

Floral White を載せた Midnight Violet はさらに先を行き、このセットで最大の差です。Olive Leaf はその間に入る、はっきりした色相を持つ唯一の色です。

Wild Ginger

#492A34

Winetasting

#7C4C53

Wild Ginger

#DED7C8

Turtledove

Wild Ginger

Turtledove on Winetasting

Winetasting と Wild Ginger はとても近い色です。文字には近すぎますが、ロゴの背後のパターンやストライプには最適。言葉を担うのは Turtledove です。

Arcane Red

#642828

Arcane Red

#ACB9D9

Lilac Sachet

#FAF6EB

Dipped in Cream

Arcane Red

Dipped in Cream on Arcane Red

深い赤に、涼しいライラックとクリーム。読ませる役は赤とクリームで、Lilac Sachet は唯一のクールなアクセントです。

覚えておきたいコツ:トーンオントーンは文字色ではなくテクスチャです。近い2色を並べてパターンにし、言葉には離れた1色を持ち込みましょう。

中間色は見出し用

中間色は見出しの色です。Garden Matcha、Grape Nectar、Oil Blue は中間色なので、同じパレットの他の色に対しては、大きなロゴや見出しには使えても、小さな文字には弱すぎます。読ませる仕事は濃い色に任せ、中間色は大きな面のためにとっておきましょう。

Light Coral

#FCF0D6

Papaya Whip

#E88F93

Light Coral

#05334A

Deep Space Blue

Light Coral

Light Coral on Deep Space Blue

例外です。Deep Space Blue の上の Light Coral は小さな文字も担えるほど強いので、このパレットは主張の強い色に両方の仕事をさせています。

Garden Matcha

#668B4A

Garden Matcha

#F8F1DC

Milk Foam

#5A4636

Mocha

Garden Matcha

Milk Foam on Mocha

Mocha は Milk Foam を支え、読みやすい組み合わせです。Garden Matcha はストライプ、パネル、見出しなどの大きな面に使いましょう。

Grape Nectar

#8D5C74

Grape Nectar

#F4C29F

Almond Cream

#502B33

Port Royale

Grape Nectar

Port Royale on Almond Cream

Port Royale は Almond Cream を支えます。Grape Nectar は大きな面の色で、言葉は濃いペアに任せます。

Oil Blue

#658C88

Oil Blue

#2C333E

Blueberry

#D1EFED

Mint Julep

Oil Blue

Blueberry on Mint Julep

Blueberry は Mint Julep を支えます。Oil Blue は中間色で、広い面に使い、小さな文字からは外します。

12パレットを一覧表で

ブランドにパステルパレットを使う方法

1. まず背骨を決める。 やわらかな色に惚れる前に、ロゴと言葉を担う濃い色を選びます。Almond Cream #F4C29F の下の Port Royale #502B33 のように。
2. 中間色には大きな仕事だけを。 見出し、ストライプ、パネル、大きなマーク。脚注には決して使わないこと。
3. 最も淡い色をページにする。 ブランドで人が目にするものの大半は背景です。純白よりも、やわらかなクリームや淡いティントのほうが穏やかです。
4. ロゴを1色でテストする。 パステルでしか成立しないロゴは、スタンプ、レシート、暗い写真の上で破綻します。システム全体はブランドカラーパレットの記事で、なぜこれらの組み合わせがなじむのかは色の調和を解説で扱っています。

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

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

無料カラーセット

背骨のあるパステル:Blush Pop、Blue Hepatica、Van Dyke、Polished Copper

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

セットを開く

無料カラーセット

濃い色が引っ張る静かなパレット:Demitasse、Olive Leaf、Wild Ginger、Arcane Red

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

セットを開く

無料カラーセット

中間色は見出し用:Light Coral、Garden Matcha、Grape Nectar、Oil Blue

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

セットを開く

FAQ

パステルカラーパレットとは?

パステルカラーパレットとは、Blush Pop #FFB6EB、Pink Diamond #F8CFFF、Fly a Kite #CCDEF8 のような、やわらかく明るい色の集まりです。ブランドでは、ロゴと文字を担う濃い色を1色加えると最も効果的です。

ミュートカラーパレットとは?

ミュートカラーパレットは、彩度の低い色を使います。たとえば Demitasse #40342B、White Sand #DBD5D1、Coconut Milk #F0EDE5 のようなニュートラルです。構造は鮮やかな色相ではなく、濃い色と明るい色の距離から生まれます。

パステルに合う色は?

近い色相の深い色です。Charcoal Blue #2F3D46 は Blush Pop #FFB6EB を支え、Van Dyke Brown #693E21 は Bleached Sunflower #F7EBA9 を支えます。パステルは背景になり、濃い色が仕事をします。

ロゴにパステルカラーを使ってもいい?

はい。ただし、より濃い色の上に置くか、マーク自体を濃い色で組む場合に限ります。淡い背景の上のパステルロゴは輪郭を失います。Blue Hepatica #6060EE のような柔らかい背骨は、大きなマークには合いますが、その横の小さな文字には向きません。

見出しにはパレットのどの色を使うべき?

中間の色です。Garden Matcha、Grape Nectar、Oil Blue では、中間色が見出しの色で、小さな文字は濃い色が担います。Deep Space Blue #05334A の上の Light Coral #E88F93 は例外で、両方をこなせるほど強い色です。

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

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

出典

• 色名とHEXコードは、チームのカラーボードにあるパレットカードから取得し、公開済みの Forge カラーセットと照合しています。
• 各組み合わせの可読性は WCAG 2 のコントラスト式で確認。背骨のあるパステル:Charcoal Blue と Van Dyke Brown はパステル上で文字を担えますが、Blue Hepatica と Polished Copper はより柔らかい背骨で、大きなマーク向きです。Garden Matcha、Grape Nectar、Oil Blue の中間色は、WCAGの最低基準を大きな文字でのみ満たします。Light Coral は Deep Space Blue 上で小さな文字でも基準をクリアします。
• 最初は Logo Brainy で3つのカルーセルとして公開されました:背骨のあるパステル、濃い色が引っ張る静かなパレット、中間色は見出し用。