セレステカラーの配色20選とHEXコードまとめ

セレステは、空から海までのパステル調のクリーンな色で、デザインを瞬時に軽やかに、新鮮で、よりモダンな印象にします。落ち着いたブランディング、明るいUIアクセント、エアリーな印刷物によく使われます。

以下は、実際のプロジェクトで使えるセレステカラーパレット20選（HEXコード付き）と、コントラスト・可読性・上品なアクセント配置のコツです。

なぜセレステのパレットがこれほど機能するのか

セレステはエアリーなシアンとソフトなアクアの中間に位置し、清潔感や開放感、親しみやすさを持ちつつ、冷たくなりすぎません。この「新鮮な空気」感によって、レイアウトがより広々と感じられます――余白を追加する前でも。

また、優れたアクセントカラーにもなります。セレステは濃紺やチャコールの上では映え、温かいクリームや砂色の上でも柔らかさを保ちます。これにより全体の雰囲気を軽く保ちつつ、コントラストと階層を作りやすくなります。

さらに、セレステは現代的なニュートラル（クールグレー、スレート、ほぼブラック）や、遊び心のある鮮やかカラー（コーラル、レモン、バイオレット）とも自然に組み合わせられます。同じセレステを使っても、スパ風の落ち着き、テックのシャープさ、夏のエネルギーに演出できます。

20以上のセレステカラーパレットアイデア（HEXコード付き）

1）シーグラス・カーム

HEX： #B2FFFF #7FD1C8 #E9F7F6 #B8C2C1 #2F5D62

雰囲気： 穏やか、エアリー、コースタル

おすすめ： スパブランドやスキンケアパッケージ

穏やかで海に洗われたトーンは、ガラスのような海岸線や柔らかな朝の光を思わせます。ウェルネスブランドやラベル、クリアさが重要な落ち着いた商品ページに最適です。濃いティールとクリーンな余白を組み合わせてコントラストを付け、タイポグラフィはシンプルで軽やかに保ちます。コツ：最も濃い色は成分表や注意書きなどに使うことで、パステルの息苦しさを避けられます。

media.ioで生成したシーグラス・カームのイメージ例

Media.io

Media.ioは、ブラウザ上でビデオ・画像・音声の作成と編集ができるオンラインAIスタジオです。

今すぐ無料で試す

2）クラウドミント・スタジオ

HEX： #B2FFFF #C7F9E9 #F7FAFF #D6D0C9 #6A7B88

雰囲気： クリーン、ソフト、モダン

おすすめ： ミニマルなウェブデザインやポートフォリオ

クリーンで雲のようなパステルカラーは静かで洗練された雰囲気、まるでリネンカーテンのある日差しが差すスタジオのようです。ポートフォリオやライフスタイルサイト、落ち着きを求めるランディングページに最適。ヘッダーやナビにはスレート調を使い構成を引き締め、ミントグリーンのアクセントで視線を誘導します。コツ：ボタンは濃いグレーブルーでまとめると、明るい背景でもUIが読みやすくなります。

media.ioで生成したクラウドミント・スタジオのイメージ例

3）コースタルリネン

HEX： #B2FFFF #F4E6D3 #E3C7A0 #A9B7B7 #3B4A4F

雰囲気： 温かみ、リラックス、ナチュラル

おすすめ： ホームデコショップや商品カタログ

温かみのあるビーチ系ニュートラルと、空のように明るいアクアのワンポイント。オープンウィンドウのそばにリネンがかかっているイメージです。ホームグッズやカタログ、職人ショップに最適なセレステカラーパレット。背景にはタンやオーツを使い、セレステはタグやリンク、セールバッジなどのハイライトに。コツ：明るいアクアは各セクションで1～2カ所までに絞ると、上質な印象に。

media.ioで生成したコースタルリネンのイメージ例

4）アクアブロッサム

HEX： #B2FFFF #FFD1DC #FFF1F5 #B7B0D6 #4A3F6B

雰囲気： ロマンチック、夢幻的、ポップ

おすすめ： ビューティープロモやSNSグラフィック

ロマンチックなパステルは、水面に浮かぶ花びらのように甘くもやりすぎない印象。ビューティープロモやクリエイター投稿、やさしいグラデ―ション背景などに適しています。バイオレットのシャドウトーンでヘッドラインや価格を引き立て、チークやクリーム色の中でアクセントに。コツ：セレステをハイライトやグローで加えると、ピンク系の重たさを軽減できます。

media.ioで生成したアクアブロッサムのイメージ例

5）ノルディックスパ

HEX： #B2FFFF #DDEFF2 #FFFFFF #C9D2D6 #1E2A33

雰囲気： フレッシュ、静か、クリア

おすすめ： ヘルスアプリUIやオンボーディング画面

新鮮で氷のような淡い色合いは、スチームや清潔なタイル、静かなリセット感を思わせます。明快さと信頼が大事なヘルスアプリやオンボーディングにピッタリ。文字やアイコンはほぼブラックで、セレステはプライマリアクションのアクセントに。コツ：シャドウは控えめに、ボーダーよりも余白で「静けさ」を演出しましょう。

media.ioで生成したノルディックスパのイメージ例

6）レトロプールサイド

HEX： #B2FFFF #FF6B6B #FFD93D #2EC4B6 #0B1320

雰囲気： ビビッド、サニー、エナジェティック

おすすめ： サマーイベントのポスターやグッズ

鮮やかで日差しを浴びたようなトーンは、プールタイルやネオンサイン、無邪気な週末を演出。セレステのコンビはポスターやTシャツ、元気なSNS広告に最適。暖色系のコーラルやイエローは深いネイビーとバランスを取り、全体を安定させましょう。コツ：セレステは最大のカラー面に、最もインパクトの強い色はアクション用に限定します。

media.ioで生成したレトロプールサイドのイメージ例

7）セレステとクレイ

HEX： #B2FFFF #C26D4A #F2D3C2 #6B7C7A #2E2A28

雰囲気： アーシー、バランス、クラフト感

おすすめ： 陶器ブランドや職人パッケージ

アーシーなクレイとソフトなアクアが手作り感と安定感を生み出します。職人パッケージやクラフトマーケット、温かみと新鮮さを両立したいブランドに最適。クレイは目立たせたい要素、セレステは封緘や内箱模様などのセカンダリーアクセントに。コツ：カラーバリエーションを増やさず印刷や質感で変化をつけると、パレットに一貫性が出せます。

media.ioで生成したセレステとクレイのイメージ例

8）オーチャードブリーズ

HEX： #B2FFFF #A4D65E #F7FFE2 #F4B7A7 #3D5A40

雰囲気： 新鮮、ポジティブ、スプリング感

おすすめ： ファーマーズマーケットのチラシやフードブランディング

新鮮でガーデンのような色合いは、新芽や初夏の果実の風を思わせます。地元フードブランドや季節のチラシ、ナチュラルでヘルシーに見せたいカジュアルなパッケージに。グリーンでカテゴリ感を強調し、セレステをクリーンで涼しげなカウンターバランスに。コツ：チーク色のアクセントは小さめに使うと、爽やかでキャンディのようになりすぎません。

media.ioで生成したオーチャードブリーズのイメージ例

9）ミニマルギャラリー

HEX： #B2FFFF #F5F5F5 #DADADA #A8A8A8 #111111

雰囲気： ミニマル、シャープ、ハイコントラスト

おすすめ： アートポートフォリオおよび展示サイン

クールなアクアのアクセントが効いたミニマルなニュートラルは、すっきりした照明の下で静かなギャラリーの壁のような雰囲気を醸し出します。これはポートフォリオ、展示サイン、控えめながら印象に残るアクセントを求めるデザインスタジオに最適です。タイポグラフィや構造にはブラックを使い、セレステは日付やナビゲーション状態などの重要なディテールにだけ配置します。ポイント：行間や余白を広めにとることで、コントラストがエレガントであり続け、強すぎない印象になります。

media.io で生成されたミニマルギャラリーの画像例

10) アイスポップ・コントラスト

HEX： #B2FFFF #6C63FF #FF4D9D #FFF0A6 #1C1B22

雰囲気： 鮮やか、遊び心、パンチの効いた

おすすめ： クリエイターサムネイルや配信オーバーレイ

鮮やかなキャンディの色合いが深夜の背景で冷凍デザートのように感じられます。このようなセレステのカラースキームは、サムネイルやオーバーレイ、瞬時にエネルギーが必要な個性的なブランドに最適です。暗いチャコールをキャンバスにして、セレステとバイオレットでメインの形を重ね、ホットピンクはバッジやハイライトに取っておきましょう。ポイント：テキストはほぼ白または淡いイエローにし、飽和度の高いブロック上でも可読性を保ちます。

media.io で生成されたアイスポップコントラストの画像例

11) サンライズ・パステル

HEX： #B2FFFF #FFB3A7 #FFE5B4 #F7F3FF #6B6B8F

雰囲気： ソフト、楽観的、やさしい

おすすめ： ウェルネスニュースレターやブログヘッダー

柔らかな夜明け色のパステルは、涼しい朝の空に暖かな光が差し込む情景を呼び起こします。ウェルネスニュースレター、ブログのヘッダー、落ち着いたライフスタイルコンテンツに最適です。見出しやリンクには落ち着いたパープルを、セクションにはピーチやバターの色合いで親しみやすさを演出しましょう。ポイント：セレステは細いアンダーラインやアイコンカラーとして使い、やさしい温かさを損なわないように注目を集めます。

media.io で生成されたサンライズパステルの画像例

12) ハーバー・ナイト

HEX： #B2FFFF #0D1B2A #1B263B #415A77 #E0E7FF

雰囲気： ムーディー、モダン、海の雰囲気

おすすめ： テック系ランディングページやSaaSダッシュボード

ムーディーなネイビーとクールな光のアクセントは、都市の明かり下に広がる港の水面のような印象です。このセレステパレットは、鮮明さと深みが必要なSaaSのランディングページやダッシュボードによく合います。主要なアクションにはセレステを使い、淡いペリウィンクルはチャートや二次的な状態をサポートします。ポイント：グラデーションは控えめにし、モジュールごとにひとつだけ明るいアクセントを入れることで、視覚的なノイズを防ぎます。

media.io で生成されたハーバーナイトの画像例

13) サンドバー・セレニティ

HEX： #B2FFFF #E7D8C9 #CDB4A7 #9AA8A8 #3A4B4B

雰囲気： 穏やか、バランス、海岸系ニュートラル

おすすめ： ホテルブランディングや旅行パンフレット

穏やかな砂や石のニュートラルにクールなアクアが加わることで、静かな入り江や柔らかなタオルのような雰囲気が生まれます。ブティックホテル、旅行パンフレット、可読性の高いマップ風レイアウトに最適です。広い面にはサンディーカラーを用い、セレステは道案内アイコンや特典のハイライトにだけ控えめに使用しましょう。ポイント：背景には暖色系ニュートラルをひとつ、カードにはもうひとつ使い、統一感を持たせます。

media.io で生成されたサンドバーセレニティの画像例

14) シトラス・ミスト

HEX： #B2FFFF #D9FF6A #FFF7D1 #FFA62B #2A3C3C

雰囲気： 爽やか、明るい、リフレッシュ

おすすめ： 飲料広告や新製品ローンチ

ジューシーな柑橘系の色合いは、ねじりの効いた炭酸水のように爽快です。こうしたセレステの配色は、飲料広告や即効性のある訴求が必要な新登場グラフィックにぴったり。主なベースにはセレステと淡いレモン、オレンジは価格帯や限定ラベルで目立たせます。ポイント：深いグリーングレーはタイポグラフィやアウトライン専用とし、明るい色の鮮やかさを保ちましょう。

media.io で生成されたシトラスミストの画像例

15) ボタニカル・ウォッシュ

HEX： #B2FFFF #6DBE8A #E6F6EE #8AA1A1 #2D3A3A

雰囲気： ナチュラル、癒し、フレッシュ

おすすめ： 春のボタニカルイラストやステーショナリー

エアリーなアクアで洗い流された自然なグリーンは、湿った紙の上に描かれた水彩の葉のよう。こんなセレステの配色セットは、春のステーショナリーやエコブランド、やさしいボタニカルアートにピッタリです。ネガティブスペースには淡いミントホワイトを使い、濃いグリーンで茎や文字を引き立てます。ポイント：ブラッシュの質感は統一して、パレット全体に一体感を持たせましょう。

media.io で生成されたボタニカルウォッシュの画像例

16) テック・クリーンUI

HEX： #B2FFFF #0F172A #334155 #E2E8F0 #22C55E

雰囲気： 自信、シャープ、モダン

おすすめ： フィンテックアプリや管理画面

自信に満ちたダークベースとシャープなアクアのアクセントで、精密さと信頼感を演出。階層が明確なフィンテックダッシュボード、管理画面、データ重視インターフェイスに適しています。主要な操作にはセレステ、グリーンは成功時のみ、面の色はクールグレーに。一番暗いネイビーとセレステの組み合わせで、ボタンやアクティブタブのコントラスト比を高めましょう。

media.io で生成されたテッククリーンUIの画像例

17) ウェディング・エアリー

HEX： #B2FFFF #F8F1F1 #EAD7C5 #D7C7E8 #6C5B7B

雰囲気： ロマンティック、エレガント、軽やか

おすすめ： 結婚式招待状やセーブ・ザ・デート

ロマンティックでエアリーなパステルは、チュールや押し花、柔らかいキャンドルの灯りのような印象。招待状、誓約書、モダンなセーブ・ザ・デートセットに最適です。名前や大事な要素にはディープモーブを使い、残りはウォームなブラッシュやクリームでまとめます。ポイント：セレステはごく薄い背景ウォッシュとして刷り、主役はタイポグラフィに。

media.io で生成されたウェディングエアリーの画像例

18) キッズルーム・スカイ

HEX： #B2FFFF #FFCB77 #FF7A90 #7A5CFF #2D2A32

雰囲気： 楽しい、明るい、親しみやすい

おすすめ： 子供向け学習アプリや遊び心あるブランディング

楽しくエネルギッシュなビビッドカラーは、シールや絵本、スカイブルーの遊び部屋の壁のような印象を与えます。こんなセレステ配色は、子ども向け学習アプリや元気なロゴ、オンボーディングに最適です。ベースはセレステにし、暖色アクセントは実績やバッジでローテーション。濃いチャコールは文字やアウトライン用にして、色の遊び心と可読性の両立を目指します。

media.io で生成されたキッズルームスカイの画像例

19) エディトリアル・クール

HEX： #B2FFFF #F9FAFB #CBD5E1 #475569 #0F172A

雰囲気： プロフェッショナル、クール、構造的

おすすめ： 雑誌レイアウトやレポート

プロフェッショナルなクールトーンは、構造的かつモダン、フレッシュなアクセントタブ付きのクリーンなレポートのよう。雑誌、年次レポート、階層が重要なケーススタディに最適です。セレステはセクションの仕切りやプルクオートに、スレートトーンは本文やキャプションに使用します。ポイント：アクセント使用はページ全体で一貫させ、ナビゲーションの容易さを実現しましょう。

media.io で生成されたエディトリアルクールの画像例

20) カフェ・ウィンドウ

HEX： #B2FFFF #D0A98F #F2E7DA #8C9B9B #2F3A3A

雰囲気： 居心地よく、モダン、親しみやすい

おすすめ： カフェメニューやポイントカード

カフェらしいニュートラルにクールなアクアのアクセントが加わると、窓から差す朝の光のような雰囲気。メニューやポイントカード、小規模ブランドの温かみとモダンさの両立におすすめです。ベースにクリーム、ブロックや価格表にはタンカラー、アイコンや注目商品にはセレステを。ポイント：ダークチャコールは真っ黒より少し柔らかく印刷し、親しみやすいムードを保ちましょう。

media.io で生成されたカフェウィンドウの画像例

セレステと相性が良い色は？

セレステはスレート・スティールグレー・ほぼ黒などのクールなニュートラルと美しく調和します。これらの色合いが構造を与え、テキストの可読性も保ちます。モダンUIなら、ダークネイビーバックグラウンドにセレステのボタンという組み合わせが信頼でき、明快です。

より温かく、ライフスタイル寄りのデザインには、セレステを砂色、オート麦色、クリーム、やわらかなタンと合わせましょう。海辺のようなバランスが生まれ、セレステが「新鮮な空気」のアクセントとして映えます。

遊び心を出したい場合は、セレステをコーラル、レモンイエロー、バイオレットと組み合わせてください。肝心なのは、ポップな明るい色を1つメインに据え、他の色で階層性をサポートすること。パレットがクリーンなまま、混乱しません。

実際のデザインでセレステカラーパレットを使う方法

セレステはまずアクセント用途で使うと良いでしょう。ボタン、リンク、アクティブ状態、仕切り、アイコン、小さなハイライトバッジなど。明るい色なので、暗めのテキスト色や余白とセットで使うのが効果的です。

印刷で使う場合、セレステは控えめなバックグラウンドや軽いパターンとして効果的。そのうえでタイポグラフィをチャコールや深いネイビーにすれば、全体はエアリーでありつつ、名前や価格、細部がシャープに引き立ちます。

ブランドシステムで使う場合、セレステの役割（プライマリアクセント、セカンダリーバックグラウンド、ハイライトなど）を明確に決め、すべてのアセットで一貫性を保ちましょう。パステルパレットが高級感と意図を持って見えるのは一貫性があるからです。

AIでセレステパレットビジュアルを作成

すでにHEXコードがあるなら、セレステパレットを検証する最も速い方法は、リアルなモックアップつまりパッケージ、ポスター、UI画面、SNSテンプレを生成すること。実際のイメージでバランスやコントラストを確認すれば判断がしやすくなります。

Media.ioのテキストtoイメージツールなら、短いプロンプト・目指す雰囲気を入力するだけで数分で複数パターンを出力し、ブランドに合うパレットまで素早く洗練できます。

次： サンディブラウンのカラーパレット