虹色パステルカラーコード完全ガイド:7色のやわらかい配色とRGB・CMYK・16進数一覧
虹色のビビッドな7色をそのままデザインに使うのは、少し勇気がいりますよね。でも、同じ7色をパステルトーンに落とし込むと、一気にやわらかくて洗練された印象になります。本記事では、虹色パステルカラーコードの正確な数値(RGB・CMYK・16進数)を一覧表で紹介し、WebデザインからSNS投稿・印刷物まで幅広い活用術を解説します。
著者:Masa|グラフィックデザイナー・カラーマネジメント歴10年以上。印刷会社・Web制作会社での実務経験をもとに、正確なカラーコード情報を発信しています。
1. パステルカラーとは?ビビッドとの違い
パステルカラーとは、純色(ビビッドカラー)に白を大量に混ぜることで生まれる、彩度が低く明度が高い色のグループです。英語では "high lightness, low saturation" と定義され、ふんわりとした淡い印象が特徴です。
たとえば、虹色の「赤」はビビッドだと #FF0000(RGB: 255, 0, 0)ですが、パステルに変換すると #FF9AA2(RGB: 255, 154, 162)のような柔らかいピンクがかった赤になります。この「白を混ぜた」感覚が、パステルの本質です。
色彩学的には、パステルカラーはWikipedia「Pastel (color)」でも解説されているように、医療施設や教育現場など「不安を和らげ、集中力を高める」環境に積極的に取り入れられてきた歴史があります。
| 項目 | ビビッドカラー | パステルカラー |
|---|---|---|
| 彩度(Saturation) | 高い(80〜100%) | 低い(20〜50%) |
| 明度(Lightness) | 中程度(40〜60%) | 高い(75〜95%) |
| 印象 | 力強い・鮮やか・主張が強い | やわらかい・淡い・上品 |
| 主な用途 | 警告・強調・スポーツ系 | ウェルネス・子供向け・SNS映え |
| 作り方 | 純色そのまま | 純色 + 白を大量に混ぜる |
2. 虹色パステル7色カラーコード一覧表(HEX・RGB・CMYK)
虹色の順番は「赤・橙・黄・緑・青・藍・紫」(英語では ROYGBIV)。以下の表は、その7色をパステルトーンに変換した正確なカラーコードです。デザインツールやコーディングにそのままコピーしてお使いください。
| 色名(日本語) | プレビュー | HEX | RGB | CMYK(%) |
|---|---|---|---|---|
| パステルレッド(赤) | #FF9AA2 |
255, 154, 162 | C:0 M:40 Y:36 K:0 | |
| パステルオレンジ(橙) | #FFB347 |
255, 179, 71 | C:0 M:30 Y:72 K:0 | |
| パステルイエロー(黄) | #FDFD96 |
253, 253, 150 | C:0 M:0 Y:41 K:1 | |
| パステルグリーン(緑) | #77DD77 |
119, 221, 119 | C:46 M:0 Y:46 K:13 | |
| パステルブルー(青) | #AEC6CF |
174, 198, 207 | C:16 M:4 Y:0 K:19 | |
| パステルインディゴ(藍) | #CEACE6 |
206, 172, 230 | C:10 M:25 Y:0 K:10 | |
| パステルバイオレット(紫) | #CB99C9 |
203, 153, 201 | C:0 M:25 Y:1 K:20 |
よりソフトな「ドリーミーパステル」バリエーション
さらに白みを強くした「ドリーミーパステル」は、より繊細でエアリーな印象を与えます。SNSのビジュアルや、ウェディング・ベビー関連のデザインに特に人気です。
| 色系 | プレビュー | HEX | RGB |
|---|---|---|---|
| ソフトピンク(赤系) | #ffc1cc |
255, 193, 204 | |
| ピーチ(橙系) | #ffe0b2 |
255, 224, 178 | |
| ペールイエロー(黄系) | #fff8b0 |
255, 248, 176 | |
| ミントグリーン(緑系) | #d5fcd6 |
213, 252, 214 | |
| ベビーブルー(青系) | #c2f0ff |
194, 240, 255 | |
| ペリウィンクル(藍系) | #c5d9ff |
197, 217, 255 | |
| ラベンダー(紫系) | #d9c2f0 |
217, 194, 240 | |
| ペールピンク(追加) | #ffddf4 |
255, 221, 244 |
3. 各色の特徴と心理効果
パステルカラーは見た目のやわらかさだけでなく、色ごとに異なる心理的効果を持っています。デザインの目的に合わせて色を選ぶことで、ユーザーや読者に伝わるメッセージが変わります。
パステルレッド(#FF9AA2)
情熱や愛情を表しながらも、ビビッドな赤の攻撃性を抑えた色。バレンタイン・コスメ・ファッション系のデザインに最適。温かみと親しみやすさを同時に演出します。
パステルオレンジ(#FFB347)
活力と創造性を穏やかに表現。フード系・カフェ・秋のシーズナルデザインと相性抜群。食欲を刺激しながらも圧迫感がないため、メニューやパッケージに多用されます。
パステルイエロー(#FDFD96)
明るさと楽観性を象徴。春・子供向け・ポジティブなブランドに最適。ただし白背景との組み合わせはコントラストが低くなるため、テキスト色には注意が必要です。
パステルグリーン(#77DD77)
自然・健康・成長を連想させる清潔感のある色。ウェルネス・エコ・オーガニック系ブランドの定番。「完了」「成功」を示すUIにも広く使われます。
パステルブルー(#AEC6CF)
落ち着きと信頼感を穏やかに伝える色。医療・金融・テクノロジー系ブランドに最適。ユーザーに安心感を与えるため、ウェルネスアプリや瞑想系サービスでも人気です。
パステルインディゴ(#CEACE6)
神秘性と直感を刺激する色。クリエイティブ・アート・スピリチュアル系のデザインに合います。ラベンダーに近い印象で、上品さと個性を両立します。
パステルバイオレット(#CB99C9)
創造性・エレガンス・ロマンティックな印象を与える色。ラグジュアリーブランド・美容・ウェディング系に多用。パステル虹色の中で最も「大人っぽい」雰囲気を持ちます。
| 色 | 心理効果 | 推奨ジャンル | 避けるべき用途 |
|---|---|---|---|
| パステルレッド | 愛情・温かみ | コスメ・ファッション・バレンタイン | 警告・エラー表示 |
| パステルオレンジ | 活力・食欲 | フード・カフェ・秋季デザイン | クールなテック系 |
| パステルイエロー | 楽観・明るさ | 子供向け・春季・ポジティブ系 | 白背景のテキスト |
| パステルグリーン | 健康・成長 | ウェルネス・エコ・医療 | 高級感が必要な場面 |
| パステルブルー | 信頼・安心 | 医療・金融・瞑想アプリ | 食欲を刺激したい場面 |
| パステルインディゴ | 神秘・直感 | アート・スピリチュアル | シンプルさが求められる場面 |
| パステルバイオレット | 創造性・エレガンス | ラグジュアリー・美容・ウェディング | 男性向けスポーツ系 |
4. デザイン活用術:Web・SNS・印刷別
虹色パステルカラーは、使う場面によって最適な活用方法が異なります。私がデザインの現場で実際に使ってきた経験をもとに、媒体別のポイントをまとめました。
Webデザイン・UIデザイン
Webデザインでパステル虹色を使う最大のメリットは、過剰刺激を与えずに視覚的な豊かさを演出できる点です。特に以下のシーンで効果を発揮します。
- 背景グラデーション:パステル虹色を使ったグラデーション背景は、ヒーローセクションやカードの背景に最適。目に優しく、長時間の閲覧でも疲れにくい。
- カテゴリ分類:ブログやECサイトのカテゴリバッジに各色を割り当てると、直感的なナビゲーションが実現できます。
- プログレスバー・ステップUI:赤→橙→黄→緑の順で進捗を表現すると、自然な「完了感」を演出できます。
CSS実装例:パステル虹色グラデーション
/* パステル虹色グラデーション */
.pastel-rainbow-gradient {
background: linear-gradient(
135deg,
#FF9AA2 0%,
#FFB347 20%,
#FDFD96 38%,
#77DD77 55%,
#AEC6CF 72%,
#CEACE6 86%,
#CB99C9 100%
);
}
↑ 上記CSSのプレビュー
SNS・グラフィックデザイン
InstagramやPinterestでは、パステル虹色は「映え」配色として定番中の定番です。2024〜2025年のトレンドでも、ベビーブルー・バレエスリッパピンク・ミントグリーンなどのパステルトーンが春夏コレクションを席巻しました。
コスメ・ファッション投稿
パステルレッド背景
ウェルネス・フード投稿
パステルグリーン背景
ラグジュアリー・美容投稿
パステルバイオレット背景
SNS投稿では、7色すべてを1枚に使うより、2〜3色に絞ってグリッドを統一する方がフィード全体の印象が整います。
印刷・パッケージデザイン
パステルカラーは印刷との相性が比較的良い色域です。ビビッドカラーと違い、CMYKの各値が低めなので、色域外れ(ガマット外)になりにくいという実務上のメリットがあります。
ただし、パステルイエロー(#FDFD96)のような極端に明度が高い色は、印刷すると「ほぼ白」に見えてしまうことがあります。印刷用途では、少し彩度を上げた調整版を用意することをおすすめします。
詳しい変換方法は、当サイトのRGB⇔CMYK変換ツールで実際に数値を確認しながら調整してみてください。
5. パステル虹色の配色パターン
7色すべてを使う必要はありません。目的に合わせて2〜4色を選ぶことで、より洗練された配色が生まれます。以下は実践的な組み合わせパターンです。
| パターン名 | 使用色 | カラーバー | おすすめ用途 |
|---|---|---|---|
| 春の庭 | パステルピンク+イエロー+グリーン |
|
春季キャンペーン・フラワーショップ |
| 夕暮れ空 | パステルオレンジ+ピンク+バイオレット |
|
ウェディング・ロマンティック系 |
| 海と空 | パステルブルー+インディゴ+グリーン |
|
ウェルネス・医療・瞑想アプリ |
| キャンディ | 全7色(均等使用) |
|
子供向け・お菓子・イベント |
パステルカラーの歴史的背景や詳細な色彩理論については、Design Work Life「The Pastel Rainbow Color Palette」も参考になります。ロココ時代から現代デザインまでの流れが丁寧にまとめられています。
6. 印刷時の注意点とCMYK変換のコツ
デジタル画面で美しく見えるパステルカラーも、印刷に回すと「思ったより薄い」「色が違う」と感じることがあります。これはRGBとCMYKの色域(ガマット)の違いによるものです。
RGB(デジタル)
- 発光による加法混色
- 約1677万色の広い色域
- パステルの淡さが正確に表現される
- デバイスによって見え方が異なる
CMYK(印刷)
- インクによる減法混色
- パステルはCMYK値が低いため再現しやすい
- 極端に明度が高い色は「ほぼ白」になる
- 必ずカラープルーフで確認を
印刷用パステルカラーの調整ガイド
| 色 | Web用HEX | 印刷用CMYK(推奨) | 注意点 |
|---|---|---|---|
| パステルレッド | #FF9AA2 |
C:0 M:42 Y:34 K:0 | ほぼそのまま再現可能 |
| パステルオレンジ | #FFB347 |
C:0 M:32 Y:72 K:0 | 黄みが強くなる場合あり |
| パステルイエロー | #FDFD96 |
C:0 M:0 Y:45 K:1 | 要注意:薄すぎて白に見える場合あり。Y値を55〜60に上げて調整を |
| パステルグリーン | #77DD77 |
C:48 M:0 Y:48 K:13 | 比較的安定して再現可能 |
| パステルブルー | #AEC6CF |
C:18 M:5 Y:0 K:19 | グレーがかって見える場合あり |
| パステルインディゴ | #CEACE6 |
C:11 M:26 Y:0 K:10 | ほぼそのまま再現可能 |
| パステルバイオレット | #CB99C9 |
C:0 M:26 Y:2 K:20 | ほぼそのまま再現可能 |
7. よくある質問
基本的な使い分けは「伝えたいトーン」で決まります。パステルは「やわらかさ・親しみやすさ・上品さ」を伝えたい場面に、ビビッドは「力強さ・緊急性・エネルギー」を伝えたい場面に向いています。同じデザイン内で両方を使う場合は、パステルを背景・大面積に、ビビッドをアクセント・小面積に使うとバランスが取れます。
いいえ、7色すべてを使う必要はありません。むしろ2〜4色に絞った方が、デザインとして洗練された印象になることが多いです。「春の庭」(ピンク+イエロー+グリーン)や「夕暮れ空」(オレンジ+ピンク+バイオレット)のように、テーマに合わせた組み合わせを選ぶのがおすすめです。
はい、ダークモードとパステルカラーの組み合わせは非常に効果的です。暗い背景(#1a1a1a〜#2d2d2d)に対してパステルカラーを使うと、淡い色が浮き上がって独特の幻想的な雰囲気を演出できます。ただし、パステルイエローのような極端に明度が高い色は、ダークモードでも白っぽく見えすぎる場合があるため、少し彩度を上げた調整が必要です。
パステルカラーは明度が高いため、白背景に白っぽいテキストを置くとコントラストが不足します。WCAG 2.1では通常テキストのコントラスト比4.5:1以上が推奨されています。
対策として、パステルカラーは背景色として使い、テキストは濃いグレー(#333333)や黒(#000000)を使うのが基本です。パステルカラーをテキスト色に使う場合は、背景を濃い色にする必要があります。
「虹色ビビッド=夏の花火」「虹色パステル=春の朝霧」というイメージが近いです。同じ7色の構成でも、パステルは白みが加わることで、主張を抑えた上品でやわらかい印象になります。ビビッドが「見せる」色なら、パステルは「包む」色です。
まとめ
虹色パステルカラーは、7色の鮮やかさをそのままに、白みを加えることで「やわらかさ」と「上品さ」を両立した配色です。本記事でご紹介したカラーコード(HEX・RGB・CMYK)を活用することで、WebデザインからSNS投稿・印刷物まで、一貫した色表現が可能になります。
- 定義:パステルカラー=純色に白を混ぜた、高明度・低彩度の色
- 7色コード:#FF9AA2 / #FFB347 / #FDFD96 / #77DD77 / #AEC6CF / #CEACE6 / #CB99C9
- 活用:Web背景・SNS映え・印刷パッケージに幅広く対応
- 印刷注意:パステルイエローは薄くなりやすいため、CMYK値の調整が必要
- 配色:7色すべてより2〜4色に絞った方が洗練された印象に
正確なカラーコード変換が必要な場合は、当サイトの各変換ツールをご活用ください。RGB⇔CMYK変換・DIC⇔CMYK変換・Pantone⇔DIC変換を無料でご利用いただけます。
パステルピンクやパステルブルーなど、虹色以外の定番色もまとめて確認したい場合は、パステルカラーコード一覧で24色のHEX・RGB・CMYK値を確認できます。