Sapphireカラーパレット20選｜人気の配色例・HEXコード・使い方のコツ

サファイアは宝石をイメージした深みのあるブルーで、うるさくなく自信を感じます。信頼、明瞭さ、プレミアムなエッジが必要なデザインに頼るベースカラーです。

以下は実用的ですサファイアカラーパレット十六進コードを使用したアイデアに加え、ブランディング、UI、印刷でサファイアをペアリングするためのヒントなど、青が意図的で読みやすいままになります。

サファイアパレットがうまく機能する理由

Sapphire は「trustworthy blue」の範囲にあるため、安定性、インテリジェンス、プロ意識などのテーマを当然サポートします。そのため、金融、SaaS、ヘルスケア、編集レイアウトに頻繁に登場します。

また、強力なコントラスト範囲を備えています。サファイアは、映画のような深さのためにほぼ黒と組み合わせたり、クリーンなデータ転送インターフェイスのために氷の色合いと組み合わせることができます。この柔軟性により、1 つのヒーロー カラーを中心に状態 (プライマリ、ホバー、ボーダー、背景) の完全なシステムを簡単に構築できます。

最後に、サファイアはアクセントをうまく取ります。ゴールド、コーラル、シアン、チーク、さらにはコーヒーブラウンがそれに対抗することができます。そのため、コアブランドの色を変えることなく、プレミアムから遊び心のある雰囲気にダイヤルできます。

20 以上のサファイア カラー パレットのアイデア (十六進コード付き)

1) ミッドナイトハーバー

十六進：#0F52BA #0B1D39 #1D3557 #E6EEF7 #C9A227

気分：ムーディー、洗練された、航海

最適な場合:金融または海事サービスのブランドアイデンティティ

真鍮のようなアクセントのムーディーなハーバー ブルースは、ナイト ドック、さわやかなユニフォーム、静かな自信を呼び起こします。深いネイビーを基礎として使用し、明るい青がリンク、ボタン、主要な見出しを処理します。オフホワイトを組み合わせて呼吸の余地を与え、ゴールドをバッジやアイコンなどの小さなハイライトに予約してください。ヒント: プレミアムな雰囲気を維持するために、ゴールドはレイアウトの 5% 未満に保ちます。

media.ioを使って生成したミッドナイトハーバーの画像例

メディア.io

Media.io は、ブラウザでビデオ、画像、オーディオを作成および編集するためのオンライン AI スタジオです。

今すぐ無料でお試しください

2) 宝石の輝き

十六進：#0F52BA #2D7FF9 #0A2A6A #F4F6FA #FF6B6B

気分：鮮やかでモダン、エネルギッシュ

最適な場合:アプリランディングページ ヒーローセクション

暖かいサンゴの火花を放つ鮮やかなブルーは、カットされた宝石を通して光が屈折するように感じます。このサファイアカラーパレットは、瞬時のコントラストと明確な階層が必要なヒーローエリアに輝きます。ナビゲーションには最も濃い青を維持し、明るい青をグラデーションに押し込み、主な行動呼びかけにのみサンゴを使用します。ヒント: 大きなブロックの過飽和を避けるために、最初にオフホワイトの背景に対してサンゴをテストします。

media.ioを使って生成した宝石グローの画像例

3) 沿岸インク

十六進：#123B7A #0F52BA #2E86AB #F2E9E4 #5C677D

気分：穏やかな, 海岸沿い, 社説

最適な場合:雑誌の特集レイアウト

インキのようなブルーとシーグラスの色調は、海の地平線と日差しで色あせた紙を思い出させます。クリームをページのベースとして使用して長い読み方を快適に保ち、サファイアのようなブルーに寄りかかって引用符やセクションヘッダーを作成します。クールなグレーは、印刷されたルール、キャプション、微妙な UI のような仕切りに適しています。ヒント: 読みやすさを維持するために、本文のテキストを深いインクトーンに保ちます。

media.ioを使って生成した海岸インクの画像例

4) ベルベットナイト

十六進：#081A33 #0F52BA #3A86FF #2B2D42 #F8F9FA

気分：洗練された、映画のような、高コントラスト

最適な場合:ストリーミングサービスUIテーマ

エレクトリックブルーのハイライトが施されたベルベットのようなダークは、公演開始直前の映画館のロビーのような雰囲気です。黒に近いパネルにインターフェイスを構築し、フォーカス状態、進行状況バー、およびアクティブなタブに明るい青を使用します。まぶしさを避けるために、柔らかい白は主にテキストとアイコンに表示される必要があります。ヒント: 暗い背景で行の高さをわずかに増やして、コピーを鮮明に保ちます。

media.ioを使って生成したvelvet nightの画像例

5) 北极サファイア

十六進：#0F52BA #7DD3FC #E0F2FE #0B1320 #A7B8C7

気分：新鮮で風通しがよく、冬にも清潔

最適な場合:ヘルスケアダッシュボードUI

氷のような色合いとさわやかなブルースは、きれいな空気、クリアなデータ、落ち着いた臨床空間を呼び起こします。最も淡い青を背景として使用し、飽和した青をチャートのハイライトと主要な指標に適用します。黒に近い色は、見出しや重要なラベルに厳しく感じずに最適です。ヒント: クールなパレットが無菌ではなくフレンドリーなままになるように、広い間隔を追加してください。

media.ioを使って生成したアークティックサファイアの画像例

6) ヴィンテージ台帳

十六進：#0F52BA #1E2A3A #D8C3A5 #F5F1E8 #B56576

気分：ヘリテージ、本っぽい、洗練された

最適な場合:ブックカバーと背表紙のデザイン

古い紙、インク、使い古された布などの伝統的なトーンは、ブルースを収集された時代を超越した感じにさせます。メイン カバー フィールドにクリーミーな紙の色合いを使用し、深い青でタイトルと著者名を固定します。ダスティローズは、スタンプ、ルール、または字幕バンドの小さなホイルとして機能します。ヒント: テキストを濁さずにヴィンテージの雰囲気を強化するために、微妙なテクスチャオーバーレイを試してみてください。

media.ioを使って生成したvintage ledgerの画像例

7) ネオンアーケード

十六進：#0F52BA #00D4FF #7C3AED #111827 #F9FAFB

気分：大胆で遊び心のある未来的な

最適な場合:ゲームナイトのイベントポスター

バイオレットとシアンのパンチの効いたブルースは、光沢のある床に映るネオンサインのように感じられます。これらのサファイアの色の組み合わせは、大きなタイプ、シンプルな形状、および高コントラストと最もよく機能します。背景を暗くして明るいアクセントを光らせ、日付や場所などの重要な詳細にのみ白を使用します。ヒント: グラデーションを 1 つの焦点領域に制限して、ポスターを遠くから読みやすくします。

media.ioを使って生成したネオンアーケードの画像例

8) ボタニカルブルーベル

十六進：#0F52BA #3B82F6 #A7F3D0 #F7F3E9 #2F4858

気分：新鮮で、植物的で、楽観的です

最適な場合:春の花のイラストセット

フレッシュなブルースとミントグリーンは、ブルーベルと朝露、そして軽い風を呼び起こします。クリーム色を紙として機能させ、ラインワークと影に暗いスレートを使用しながら、花びらをミッドブルーでペイントします。ミントは、支配的な充填ではなく、二次的な葉の色調として最もよく機能します。ヒント: イラストが柔らかく自然なままになるように、アウトラインを少しミュートにしてください。

media.ioを使って生成した植物ブルーベルの画像例

9) 博物館社説

十六進：#0F52BA #0D1B2A #EDE7DF #8D99AE #C7A27C

気分：文化的で落ち着いた、ギャラリーのような

最適な場合: ミュージアムパンフレットのレイアウト

落ち着いたギャラリーニュートラルと深いブルーのアクセントは、キュレーションされた静かで意図的な雰囲気を演出します。ページ全体には温かみのあるオフホワイトを使用し、見出し、セクションタブ、案内表示にはサファイア調のブルーを適用しましょう。淡いタンカラーは、小さなコールアウトや展示カテゴリに最適で、デザインを素朴にしすぎません。ヒント：マージンを広めに取って、美術館のラベルの余白のスペース感を再現しましょう。

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

10) セルリアンサンド

十六進： #0F52BA #2EC4B6 #FFBF69 #FDFCDC #1B263B

気分：陽光、海岸、明るい

最適な場合:ビーチツアー向け旅行フライヤー

陽の光を感じるブルーと砂のようなイエローは、澄んだ水と暖かな海岸を思わせます。クリーミーな背景で明るさを保ち、見出しや主要な価格枠にはサファイアブルーを使いましょう。ティールとイエローはアイコン、バッジ、セクションディバイダーのアクセントに最適です。ヒント：ボディテキストには最も濃いネイビーを使い、明るい紙でもコントラストを保ちましょう。

media.io で生成されたセルリアンサンドの画像例

11) テック・ミニマル

十六進： #0F52BA #111827 #6B7280 #F3F4F6 #22C55E

気分：クリーン、モダン、信頼感

最適な場合:SaaS製品ダッシュボードUI

自信あるブルーとクリーンなニュートラルの組み合わせは、わかりやすいドキュメントや整理されたデータの印象を与えます。このサファイア配色は、明瞭さが重要なダッシュボードに最適で、ブルーは主要アクションやステータス強調に使います。グリーンは成功状態のみに使い、グレーはサブテキストや罫線用にしましょう。ヒント：ボタンスタイルを統一し、ブルーが最も強いインタラクションの印象を与えるようにしましょう。

media.io で生成されたテック・ミニマルの画像例

12) ウェディング・シースプレー

十六進： #0F52BA #94A3B8 #F8FAFC #F1D4D4 #1F2937

気分：ロマンチック、軽やか、エレガント

最適な場合:結婚式招待状セット

空気感のあるブルーにブラッシュと柔らかなグレーを組み合わせると、海の飛沫やシルクリボン、夕暮れ時の光を思わせます。ほぼ白に近い色をカードベースに、ブルーはモノグラムや縁取り、RSVP見出しに使いましょう。ブラッシュは小さな花モチーフや繊細なアクセントラインに最適です。ヒント：やや厚みのある紙を選ぶことで、クールトーンでも温かみや質感を感じやすくなります。

media.io で生成されたウェディング・シースプレーの画像例

13) コーヒーハウス・コントラスト

十六進： #0F52BA #3B2F2F #C9B29B #F5F0E6 #2E2A24

気分：居心地が良い、落ち着き、洗練

最適な場合:カフェメニューデザイン

しっかりとしたブラウンと鋭いブルーのアクセントは、エスプレッソクレマと磨かれた陶器のカップを思わせます。暖かいクリームでメニューバックグラウンドにし、見出しは濃いブラウンで手作り感を出しましょう。ブルーはセクションマーカーやプライス、小さなロゴに使い、印象的なコントラストを生みます。ヒント：ページ間でアクセントの使い方を一貫させ、メニュー全体を1つのシステムとして見せましょう。

media.io で生成されたコーヒーハウス・コントラストの画像例

14) スペース・オブザーバトリー

十六進： #0F52BA #050A14 #1B3A57 #9CA3AF #E5E7EB

気分：神秘的、精密、宇宙的

最適な場合:科学会議用スライドデッキ

ダークスペーストーンに鮮やかなブルーのハイライトは、星図や機器表示を思わせます。スライド背景にほぼ黒に近い色を使い、飽和ブルーでセクションタイトルや重要な数値を強調しましょう。明るいグレーはチャートの視認性を高め、白すぎる眩しさを避けます。ヒント：強調するブルーは1色に統一し、ゴチャつきやSF感を避けましょう。

media.io で生成されたスペース・オブザーバトリーの画像例

15) キッズラーニング UI

十六進： #0F52BA #60A5FA #FDE047 #F97316 #F8FAFC

気分：フレンドリー、明るい、ポジティブ

最適な場合:子ども向け教育アプリUI

明るいブルーに太陽のようなイエローとオレンジが加わると、遊び心と自信、わかりやすさを感じさせます。淡いブルーはカードやサーフェス、濃いブルーはナビゲーションや重要なラベルを支えます。イエローとオレンジは、リワードやバッジ、進捗モーメント等、喜びを演出したい場面に最適です。ヒント：テキスト領域はほぼ白に保ち、カラフルなアクセントが読みやすさを妨げないようにしましょう。

media.io で生成されたキッズラーニングUIの画像例

16) ラグジュアリーウォッチ広告

十六進： #0F52BA #0A0F1C #D4AF37 #E9EEF5 #2B3445

気分：ラグジュアリー、ドラマティック、精緻

最適な場合:高級時計のプロダクト広告

ドラマチックなミッドナイトトーンにゴールドのアクセントが加わると、精密な工芸とショールームの照明を想起させます。このサファイア配色は、高級感と強いコントラスト、厳選された輝きを演出したいプロダクト広告にぴったりです。背景はほぼブラック、ブルーは控えめなリムライトやタイポグラフィ、ゴールドはロゴやディテールラインだけに用いると良いでしょう。ヒント：十分に余白を取ることで、主役として商品の存在感が際立ちます。

media.io で生成されたラグジュアリーウォッチ広告の画像例

17) マウンテン・トワイライト

十六進： #0F52BA #1E3A8A #334155 #CBD5E1 #F1F5F9

気分：クール、アウトドア派、安定感

最適な場合:アウトドア用品ECバナー

涼しげなトワイライトブルーとスレートグレーは、山の空気や遠くの尾根のような印象です。濃いブルーで見出しや商品名を、明るいグレーで背景パネルや価格ブロックを彩りましょう。単色のプロダクト写真やミニマルなアイコンとの相性も抜群です。ヒント：バナーごとに目立つブルーのボタンをひとつ置き、主要アクションに視線を集めましょう。

media.io で生成されたマウンテン・トワイライトの画像例

18) ソフトオフィス・カーム

十六進： #0F52BA #93C5FD #E5E7EB #FFFFFF #1F2937

気分：穏やか、親しみやすい、プロフェッショナル

最適な場合:コーポレートプレゼンテンプレート

柔らかいブルーとクリーンなニュートラルは、整然とした安心感と目に優しい雰囲気を生みます。ホワイトを主なキャンバスにし、見出しやチャートには一貫したブルーを設定しましょう。ライトブルーは、さりげない図形やコールアウトボックスにぴったりです。ヒント：本文のフォントウェイトは統一し、階層表現はタイポグラフィよりも色で行いましょう。

media.io で生成されたソフトオフィス・カームの画像例

19) フェスティバルポスター・ポップ

十六進： #0F52BA #FF2D55 #FFD166 #0B1320 #F8F9FA

気分：派手、お祭り、パンチが効いている

最適な場合:音楽フェスティバルポスター

パワフルなピンクと温かいイエロー、ビビッドなブルーは、ステージライトや大都市の夜の活気を感じさせます。サファイア配色は即座にエネルギーと視認性が必要なポスターに最適。濃いベースでコントラスト、メイン見出しはブルー、日付やチケット情報等の主要コールアウトにはピンクを活用しましょう。ヒント：フォントは2種類までに抑え、色が賑やかさを主導できるようにしましょう。

media.io で生成されたフェスティバルポスター・ポップの画像例

20) ナイトスイム

十六進： #0F52BA #0A2E4E #22D3EE #0B1320 #E0F2FE

気分：クール、リフレッシュ、深夜

最適な場合:スキンケアパッケージデザイン

クールなブルーに明るいアクアのアクセントで、月明かりの水や透き通るような清涼感を呼び起こします。最も深い色はボトルやチューブのベースに、アクアは主張や小さなアイコンに使いましょう。淡いアイスカラーはラベルフィールドに適していて、テキストの可読性も確保できます。ヒント：アクアの部分にスポットグロスを施し、新しい色を増やすことなくみずみずしさを強調しましょう。

media.io で生成されたナイトスイムの画像例

サファイアと相性の良い色は？

サファイアは、オフホワイトやライトグレー、チャコールのようなシャープなニュートラルカラーと組み合わせると非常に美しく、構造的かつモダンな印象を保つことができます。これらの組み合わせは特に、ダッシュボード、エディトリアルレイアウト、テキストの多いブランドシステムに最適です。

プレミアムな印象を持たせるには、サファイアとメタリック調のアクセント（ゴールド、ブラス、暖かいタン）を組み合わせ、アクセントはUIの少しの場所や印刷ディテールのみに留めましょう。エネルギーが欲しい場合は、コーラルやホットピンク、イエローなどの暖色アクセントを追加—CTAやラベル、バッジとして使うのが効果的です。

フレッシュで軽やかな方向性には、サファイアにアイシーブルー、ミント、ティールを合わせてみましょう。パレットの清涼感を保ちつつバリエーションが生まれるので、ヘルスケアやウェルネス、清潔感のあるパッケージに理想的です。

実際のデザインでサファイアカラーパレットを使用する方法

まず役割を決めます：サファイアの中から1色を主なブランド/UIカラーにし、テキストやナビゲーションにはより濃い「インク」トーンを使いましょう。背景ニュートラル（ホワイト、オフホワイト、淡いブルー）を選び、可読性と余白を守ります。

アクセントは控えめに。温かみのあるアクセント（コーラル、ゴールド、イエロー）は、アクションや重要性を示す場面（プライマリーボタン、主要指標、限定印刷装飾など）で使うと最適です。

出荷前には、ライトモード・ダークモードの両方でコントラストを確認しましょう。サファイアは画面上では印刷よりも明るく見えやすいので、実際のデバイスでテストし、大面積にはやや彩度を抑えるのもおすすめです。

AIでサファイアパレットのビジュアルを作成する

すでにHEXコードがある場合、すぐにモックアップ（ポスター、UI画面、パッケージ、ブランドボードなど）が作れて、サファイアが実際にどう見えるか検証できます。ビジュアルテストは、コントラスト、階層、アクセントバランス検証の最速方法です。

Media.ioテキストから画像機能を使えば、「エディトリアルパンフレット」「ダークモードUI」「スタジオ商品広告」など、レイアウトやライティング、スタイルを記述することで、サファイアを主役にした一貫性のあるデザイン事例が生成できます。

異なるアクセントカラー（ゴールド／コーラル／シアンなど）で何パターンか生成し、自分のブランドに最も合うトーンを見つけてみましょう。

次へ： ロイヤルパープルのカラーパレット