パステルカラーコード一覧:定番24色のHEX・RGB・CMYKと配色例

パステルカラーの色指定で迷ったら、まずは「淡い見た目」「十分な可読性」「印刷時の再現しやすさ」を分けて考えるのが安全です。この記事では、WebやSNSで使いやすいパステルカラー24色を、HEX・RGB・CMYKの一覧表で整理し、パステルピンク、パステルブルー、パステルイエローなど単色で検索されやすい色もすぐ確認できるようにまとめます。

まず使いやすいパステルカラーはこの6色

結論から言うと、汎用性が高いパステルカラーは、パステルピンク #FFD1DC、パステルブルー #AEC6CF、パステルイエロー #FDFD96、パステルグリーン #77DD77、パステルミント #BDFCC9、ラベンダー #CDB4DBの6色です。背景、見出し装飾、SNSバナー、資料の強調色に使いやすく、複数色を組み合わせても主張が強くなりすぎません。

色彩では、色相だけでなく明度と彩度を合わせた「トーン」で印象が変わります。パステルカラーを選ぶときも、単に薄い色を選ぶのではなく、武蔵野美術大学 造形ファイルの色調解説のように、明度・彩度の関係で整理すると、近い印象の色を選びやすくなります。

ただし、パステルカラーは明度が高いため、白背景に薄い文字として使うと読みにくくなります。背景に使う場合は文字を濃いグレーやネイビーにし、文字色として使う場合は背景を十分に暗くするのが基本です。Webで文字と背景を組み合わせる場合は、WCAG 2.2のコントラスト基準も確認しておくと、淡い色でも読みやすさを保ちやすくなります。

定番24色のパステルカラーコード一覧を示す色見本ボード
パステルカラーは単色で選ぶだけでなく、明度の近い色を2〜4色に絞ると、WebやSNSでまとまりのある印象を作りやすくなります。
#FFD1DC
ピンク
#AEC6CF
ブルー
#FDFD96
イエロー
#77DD77
グリーン
#BDFCC9
ミント
#CDB4DB
ラベンダー

パステルカラーコード一覧表(24色)

下の表は、デザインで使いやすい代表的なパステルカラーを一覧化したものです。HEXとRGBはWeb・アプリ・資料作成向け、CMYKは印刷用の目安です。CMYK値はRGBからの近似変換なので、ブランドカラーや商業印刷で使う場合は必ず出力環境に合わせて確認してください。

表1:定番パステルカラー24色のHEX・RGB・CMYK一覧
色名 色見本 HEX RGB CMYK目安 向いている用途
パステルピンク
#FFD1DC255, 209, 220C0 M18 Y14 K0美容、ギフト、やさしい強調
パステルレッド
#FF9AA2255, 154, 162C0 M40 Y36 K0注意喚起を柔らかく見せる
パステルローズ
#F8BBD0248, 187, 208C0 M25 Y16 K3女性向けLP、カード背景
パステルオレンジ
#FFB347255, 179, 71C0 M30 Y72 K0親しみ、キャンペーン
ピーチ
#FFDAB9255, 218, 185C0 M15 Y27 K0食品、ライフスタイル
アプリコット
#FBC4AB251, 196, 171C0 M22 Y32 K2温かい背景、見出し帯
パステルイエロー
#FDFD96253, 253, 150C0 M0 Y41 K1注釈、明るい背景
クリーム
#FFF8DC255, 248, 220C0 M3 Y14 K0紙面風背景、読み物
パステルグリーン
#77DD77119, 221, 119C46 M0 Y46 K13自然、成功、健康
パステルミント
#BDFCC9189, 252, 201C25 M0 Y20 K1清潔感、医療、SaaS
セージ
#C7DDB5199, 221, 181C10 M0 Y18 K13落ち着いた自然感
パステルブルー
#AEC6CF174, 198, 207C16 M4 Y0 K19信頼、背景、情報整理
ベビーブルー
#BDE0FE189, 224, 254C26 M12 Y0 K0教育、キッズ、軽いUI
スカイブルー
#A7C7E7167, 199, 231C28 M14 Y0 K9爽やかなバナー
ラベンダー
#CDB4DB205, 180, 219C6 M18 Y0 K14上品、コスメ、癒やし
パステルパープル
#CB99C9203, 153, 201C0 M25 Y1 K20幻想的なアクセント
ライラック
#D8BFD8216, 191, 216C0 M12 Y0 K15淡い装飾、見出し背景
パステルブラウン
#C9A78A201, 167, 138C0 M17 Y31 K21クラフト、カフェ、紙面
ミルクティー
#D7C0AE215, 192, 174C0 M11 Y19 K16落ち着いた背景
パステルグレー
#D3D3D3211, 211, 211C0 M0 Y0 K17区切り、控えめなUI
アイボリー
#FFFFF0255, 255, 240C0 M0 Y6 K0白より柔らかい背景
パステルシアン
#A8E6CF168, 230, 207C27 M0 Y10 K10清涼感、ヘルスケア
パステルインディゴ
#CEACE6206, 172, 230C10 M25 Y0 K10淡い虹色、装飾
パステルコーラル
#FFB5A7255, 181, 167C0 M29 Y35 K0親しみ、CTA周辺

よく使う単色コードの選び方

パステルピンクのカラーコードは、柔らかく見せたいなら #FFD1DC、少し赤みを強めたいなら #FF9AA2 が使いやすいです。白背景に置くと薄く見えやすいため、文字色ではなく背景や装飾に使う方が安定します。

パステルブルーのカラーコードは、落ち着いた印象なら #AEC6CF、明るく軽い印象なら #BDE0FE が候補になります。ビジネス資料では、濃いネイビー文字と組み合わせると信頼感を残しながら柔らかいトーンにできます。

パステルイエローのカラーコード#FDFD96 が定番ですが、印刷では白に近く見えることがあります。注釈やハイライトに使う場合は、背景に使い、文字色は #333333 以上の濃さにするのがおすすめです。

配色パターン例

パステルカラーは数を増やすほどかわいらしい印象になりますが、実務では2〜4色に絞った方が目的が伝わりやすくなります。特にWebページやバナーでは、背景色、アクセント色、補助色の役割を先に決めると、淡い色でも散らかった印象になりません。

表2:目的別パステルカラー配色例
目的 おすすめ配色 使い方
やさしい美容系 #FFD1DC + #FFF8DC + #CDB4DB ピンクを主役にし、クリームを背景、ラベンダーを小さなアクセントにする
信頼感のあるSaaS #AEC6CF + #BDFCC9 + #D3D3D3 ブルーを情報エリア、ミントを成功状態、グレーを区切りに使う
明るい子ども向け #FDFD96 + #BDE0FE + #FFB5A7 黄色を背景、ブルーを見出し帯、コーラルをボタン周辺に使う
淡い虹色 #FF9AA2 + #FFB347 + #77DD77 + #AEC6CF 7色すべてではなく4色に絞ると、虹色感を残しつつ整理しやすい
関連:虹色の7色を淡く使いたい場合は、虹色パステルカラーコード完全ガイドで7色セットのHEX・RGB・CMYKを確認できます。

よくある質問

パステルカラーは、一般的に彩度が低く明度が高い淡い色を指します。純色に白を混ぜたような柔らかい見た目になり、やさしさ、清潔感、親しみやすさを出したいデザインでよく使われます。

定番のパステルブルーは #AEC6CF です。より明るいベビーブルーなら #BDE0FE、少し落ち着いたスカイブルーなら #A7C7E7 も使いやすい候補です。

使いやすいパステルピンクは #FFD1DC です。少し赤みを強めたい場合は #FF9AA2、上品なローズ寄りにしたい場合は #F8BBD0 が候補になります。

完全に同じ色になるとは限りません。パステルカラーは淡いため、紙色や印刷条件の影響を受けやすいです。CMYK値は目安として使い、重要な印刷物では校正で確認するのが安全です。

関連記事