目安は「7・2・1」

配色でよく使われるのが、ベース7割、メイン2割、アクセント1割という考え方です。厳密な決まりではありませんが、迷ったときの出発点としてちょうどいい配分です。

ベースは背景や余白、メインは文字や見出し、アクセントはリンクや小さな飾りに。

ポイントは、ピンクらしさをいちばん強く持つ色を、あえて小さく使うことです。面積が小さいほど、その色は差し色として目を引き、画面全体は落ち着いて見えます。

Desert Blush でやってみる

Desert Blush の6色を、この配分に当てはめると次のようになります。

本文には、いちばん濃い #3F2E2F を使います。真っ黒ではなく、ほんのりピンクを含んだ濃い茶色なので、背景のピンクと自然になじみながら、しっかり読めます。

アクセントの #9F7E82 は、背景とのコントラスト比が3.3対1です。Webの基準（WCAG）では、大きな文字なら使えるものの、本文には足りません。文字の入るボタンは、ひとつ濃い #6E5053 を背景にして、文字を #FAF1E8 にすると安心です。こちらは6.4対1で、小さな文字でも基準を満たします。

よくある失敗と直し方

1. 中間の色を広く使いすぎる。背景を #CDAFB0 のような中間のピンクにすると、画面全体が甘く重たくなります。背景はいちばん淡い #FAF1E8 に戻し、中間の色は線や小さな面にとどめます。
2. ピンク同士の差が小さすぎる。#EAD7CF の上に #CDAFB0 を重ねると、どこが区切りなのか分かりにくくなります。隣り合う色は明るさを二段階以上離し、#EAD7CF の面には #3F2E2F の文字（9.2対1）を載せます。

まとめ

くすみピンクを上品に見せるコツは、いちばん淡い色を広く、いちばん濃い色を文字に、ピンクらしい色は少しだけ使うことです。色を増やすより、面積の配分を整えるほうが、仕上がりは大きく変わります。

参考：Understanding Success Criterion 1.4.3: Contrast (Minimum)（W3C）。コントラスト比は WCAG 2.2 の計算式で算出しています。

読みやすさの基準

Webの読みやすさの基準として広く使われているのが、WCAG（Web Content Accessibility Guidelines）です。文字と背景のコントラスト比について、通常の文字は4.5対1以上、大きな文字は3対1以上を求めています。

ここでいう大きな文字は、18ポイント以上、または太字で14ポイント以上の文字です。Webの画面では、おおよそ24ピクセル以上、太字なら約18.5ピクセル以上にあたります。

Midnight Fern で確かめる

いちばん暗い #0A1412 を背景にして、文字色の候補を並べました。

いちばん淡い #DCEBE6 は15.2対1で、どんな大きさの文字でも読みやすい色です。少し色味のある #8FB8AE も8.6対1あり、落ち着いた印象のまま本文に使えます。

中間の #4D7B73 は3.9対1です。本文には足りないので、大きな見出しや、文字を載せない線や飾りにとどめます。

Arctic Harbor で確かめる

こちらは、紺の #16314A を背景にした場合です。

#E8EFF3 は11.5対1、#A9BDC9 は6.9対1で、どちらも本文に使えます。#5F7F98 は3.2対1なので、大きな文字の基準をかろうじて満たす程度です。見出しに使う場合も、太さや大きさに余裕を持たせると安心です。

選び方のまとめ

1. 本文は、いちばん淡い色か、その次の色。6色のうち明るい2色は、暗い背景の上でも基準を大きく上回ります。
2. 中間の色は、文字以外の役割に。線、アイコン、写真の縁など、読ませない場所で雰囲気を足します。
3. 迷ったら、数字で確かめる。COLOR JOURNEY の各パレットのページでは、キーカラーを選ぶと文字とのコントラスト比が表示されます。

参考：Understanding Success Criterion 1.4.3: Contrast (Minimum)（W3C）。コントラスト比は WCAG 2.2 の計算式で算出しています。

6つの役割

Webやアプリの画面で、色が担う役割は大きく6つに分けられます。COLOR JOURNEY のパレットは暗い色から明るい色の順に並んでいるので、役割を当てはめやすくなっています。

明るいページにする

いちばん明るい #EDF3EE を背景にすると、次のようになります。

文字はいちばん暗い #101812 で、背景との差は16.1対1と十分です。補助の文字には、ひとつ明るい #476754 を使っても5.6対1あり、本文の基準を満たします。

暗いページにする

同じ6色で、今度はいちばん暗い #101812 を背景にします。役割をそのまま反対側に入れ替えるだけです。

明るいページと暗いページで、印象はまったく違います。それでも使っている色は同じ6色です。役割で考えておけば、昼のサイトと夜のサイト、明るい表示と暗い表示を、ひとつのパレットで作り分けられます。

キーカラーで試す

COLOR JOURNEY の各パレットのページでは、6色のどれかをタップすると、その色を背景にして、残りの5色に役割が自動で割り当てられます。いま読んだ役割分担が、そのままページ全体で確かめられる仕組みです。

コントラスト比は WCAG 2.2 の計算式で算出しています。参考：W3C

発表された2027年の色

2026年10月23日の時点で確認できた、主な発表をまとめました。色の値は各社の色番号のまま載せています。

なお、Pantone が選ぶ2026年の色は、2025年12月に発表された Cloud Dancer（PANTONE 11-4201）でした。灰みを帯びたやわらかな白です。2027年の色は、この記事の時点では、私たちが確認した範囲ではまだ発表されていません。

3つの流れ

1. やわらかな緑が中心に。Sherwin-Williams、Behr、Benjamin Moore の3社が、そろって緑を選びました。明るい Celery から、茶色みのある Grounded まで、明るさは違っても、どれも自然を感じさせる緑です。
2. 落ち着いた青が並ぶ。WGSN と Coloro の Luminous Blue は活力のある青、Valspar の Cottage Door は穏やかな青と、性格は違いますが、青への関心は続いています。
3. 冷たい白やグレーから、あたたかな色へ。Pro Builder は、各社の選択が、ここ数年の冷たい白やグレーから離れ、あたたかく土を思わせる色に向かっていると分析しています。背景には、心身の健やかさや、自然とのつながりへの関心があるとしています。

COLOR JOURNEY の見方

ここからは、私たちの見方です。2027年の流れは、COLOR JOURNEY がこれまで集めてきた色と、よく重なっています。

トレンドの色をそのまま使うより、こうした近い色の6色パレットで、背景や文字の役割まで決めてしまうほうが、実際の制作には使いやすいはずです。2027年の流れを取り入れたいときの出発点にしてみてください。

各社の色の名前と色番号は、それぞれの発表元の表記に従っています。色名は各社の商標である場合があります。