灯台にインスパイアされたカラーパレットは、鮮明なコントラスト(ネイビー、ホワイト、ビーコンレッド)と海岸のニュートラル(砂、流木、フォググレー)、水の色調(シーフォーム、スチールブルー)のバランスを取っています。その結果、決まり文句に頼ることなく、時代を超越し、読みやすく、すぐに「海辺」に感じられます。
以下は、16進コードを使用した20以上の灯台カラーパレットのアイデアに加えて、ブランディング、UI、ポスター、パッケージングに関する実用的なヒントと、各外観を視覚化するために再利用できるAIプロンプトを紹介します。
この記事では
Lighthouse パレットがこれほどうまく機能する理由
灯台のパレットは強力な階層に基づいて構築されています。深いネイビーとチャコールが構造を作り出し、オフホワイトが空間を開き、単一の「シグナル」アクセント (赤、珊瑚、またはゴールド) が即座に焦点を合わせます。そのため、明瞭さが重要なレイアウトに最適です。
また、海岸線の霧、風化した塗料、ロープ、砂、海のガラスなど、自然なストーリーテリングの雰囲気も漂っています。これらの海岸のニュートラルとオーシャンブルースがエッジを柔らかくすると、現代のインターフェイスでさえ、より人間的に感じられます。
最も重要なのは、ライトハウスの配色は、印刷、ウェブ、パッケージ、サイネージなどの媒体全体でうまく翻訳されることです。プレミアムブランディングのためにパレットを最小限に抑えたり、エネルギッシュなキャンペーンのためにアクセントをプッシュしたりできます。
20 の灯台カラー パレットのアイデア (十六進コード付き)
1) ビーコンの夕暮れ

十六進:#E23D3D #F6F1E7 #1E2A3A #8FA3B8 #C9B08D
気分:大胆、沿岸、自信に満ちた
最適な場合:ブランドヒーローセクションとアウトドアギアパッケージ
ブルーアワーの霧を切り裂くビーコンのように大胆で海岸沿い。レイアウトをシャープで読みやすく保つために、ネイビーに対するコントロールされたアクセントとして赤を使用してください。クリームとサンドトーンを組み合わせて、空白と温かみのある製品コールアウトを実現します。ヒント: 赤はプライマリ CTA と 1 つのキー アイコン スタイルに予約して、意図的に感じさせ、うるさいものではありません。
media.ioを使って生成したbeacon duskの画像例
Media.io は、ブラウザでビデオ、画像、オーディオを作成および編集するためのオンライン AI スタジオです。
2) ソルトウォッシュホワイト

十六進:#FAF7F0 #D9D2C7 #A9B6C5 #3A4C5F #B85C4A
気分:風通しがよく、清潔で、伝統的な雰囲気
最適な場合:編集レイアウトとミニマルなロゴ
風化したボードに日焼けで漂白した塗料のように風通しがよく清潔です。オフホワイトにページを運ばせ、コントラストのためにスレートブルーグレーでタイポグラフィをアンカーします。ミュートされたテラコッタは、小さなシール、下線、またはナビゲーションハイライトとして最もよく機能します。ヒント: 落ち着いた編集的な雰囲気を保つために、行の重みを薄くし、間隔を広く保ちます。
media.ioを使って生成したソルトウォッシュホワイトの画像例
3) ハーバーストライプ

十六進:#C92F2F #F3E9D7 #223149 #4F6B86 #9FA8A3
気分:航海、構造、パンチ
最適な場合:ウェブサイトヘッダーおよびサイネージシステム
波止場のペイントされたストライプやロープで磨耗したレールのように、航海的で構造的です。ベースにはネイビー、呼吸スペースにはクリーム、ナビゲーション状態や道探しマーカーには赤を使用します。スチールブルーは、注目を競うことなくセカンダリパネルをサポートします。ヒント: コンポーネント全体に一貫したストライプ幅で赤を適用して、システムをまとまりのある感じにします。
media.ioを使って生成したハーバーストライプの画像例
4) 霧の防波堤

十六進:#E7E3DD #BFC6CC #7B8A96 #2F3C46 #D6B58C
気分:霧がかかっていて、モダンで、地についた
最適な場合:アーキテクチャのプレゼンテーションと落ち着いたダッシュボード
霧がかかっていてモダンで、朝の霧に消えていく防波堤のようです。この灯台のカラーパレットはグレーの層に基づいているため、彩度ではなく深みを持って階層を構成します。ハイライト、バッジ、またはデータ強調のためにサンディタンを持ち込みます。ヒント: 重いインターフェイスを避けるために、見出しとキー番号にのみ最も暗い炭を使用してください。
media.ioを使って生成した霧の防波堤の画像例
5) シーグラス カーム

十六進:#DFF3EE #A9D9CF #5E8F8A #2E4B4A #F2E7D8
気分:癒され、爽やかで、スパのような
最適な場合:ウェルネスブランディングと植物イラスト
潮でなめらかになったシーグラスのように、心地よく爽やかです。淡いアクアとクリームをリードし、タイプ、アウトライン、アイコンには深いティールを使用します。このミックスは、シンプルなライン アート、紙の質感、柔らかいグラデーションと美しくマッチします。ヒント: 本文のテキストとキー ボタンに最も暗いティールを予約することで、コントラストにアクセスできるようにします。
media.ioを使って生成したseaglass calmの画像例
6) 錆びたランタン

十六進:#A6422B #E6D2B8 #6A5B52 #2B2B2A #B8C0C7
気分:ヴィンテージ, 触覚, 顽丈
最適な場合:クラフトコーヒーラベルとヘリテージポスター
錆びたランタンと使い古された革のストラップのようなヴィンテージで触覚的です。これらの灯台の色の組み合わせは、質感のある紙、レタープレス スタイル、大胆なスタンプに輝きます。背景フィールドには暖かいタンを、タイプとバーコードには深いほぼ黒を使用してください。ヒント: 微妙な粒度を追加し、カラー ブロックを大きく保つことで、パレットに意図的でプレミアムな印象を与えます。
media.ioを使って生成したrusted lanternの画像例
7) 嵐信号

十六進:#0E1A24 #2F4B63 #6F8DA6 #D8DEE4 #F0C24B
気分:ドラマチックで鮮明、ハイコントラスト
最適な場合:スポーツプロモーションとデータが多いUI
1 つの警告灯で分断された嵐の雲のように、ドラマチックで鮮明です。深いネイビーとスチールブルーでベースを構築し、クールなライトグレーのパネルで読みやすさを高めます。黄金色は、アラート、進捗状況インジケーター、小さなグラフィックヒットに最適です。ヒント: インパクトを保つために、レイアウトの黄色を 10% 未満に保ちます。
media.ioを使って生成した嵐信号の画像例
8) 日の出のブイ

十六進:#FF6B4A #FFA86B #FFE2B6 #2B4A66 #7CC6C6
気分:楽観的、温かい、遊び心のある
最適な場合:イベントチラシ・夏のキャンペーン
穏やかな水の中のブイに映る日の出のように、楽観的で暖かい。コーラルとアプリコットをヒーローデュオとして使用し、タイプと構造のためにディープブルーでバランスを取ります。ソフトアクアは、セカンダリシェイプや仕切り、ステッカースタイルのバッジに最適です。ヒント: グラデーションを微妙かつ短く保ち、コーラルからアプリコットに移動してモダンな外観にします。
media.ioを使って生成したサンライズブイの画像例
9) 航海用インク

十六進:#101820 #243B55 #4A6FA5 #E7E5DF #D64545
気分:洗練された、主張的な、クラシック
最適な場合:SaaSランディングページとfintechブランディング
洗練されていて自己主張的で、インクのような暗い波のように、きれいな塗装のトリムが付いています。ほぼ黒とネイビーに基礎を処理させ、チャートとリンク状態にミッドブルーを使用します。柔らかいオフホワイトは、セクションを厳しく見せずに読みやすく保ちます。ヒント: 視覚的な競合を避けるために、メイン ボタンなどの 1 つのアクション ティアにのみ赤を使用します。
media.ioを用いて生成された航海用インクの画像例
10) サンドバーソフト

十六進:#F5EFE6 #E2D3BE #BFA58A #6E7C86 #2A3A44
気分:柔らかく、温かく、控えめな
最適な場合:インテリアムードボードやライフスタイルブログ
干潮時に涼しい影を持つさざ波の砂のように柔らかくて暖かい。大きな背景にはクリーミーなニュートラルを、カード、フレーム、キャプションにはトープを使用してください。スレートと深みのあるブルーグレーが、キツさを感じず信頼性の高いタイプシステムを作り出しています。ヒント: リネンや再生紙などの自然な質感を追加して、リラックスしたトーンを増幅します。
media.ioを使って生成したsandbar softの画像例
11) タイドプールポップ

十六進:#00A6A6 #7AE7C7 #F7F4EA #FF4D4D #2B2D42
気分:エネルギッシュ、モダン、パンチ
最適な場合:アプリアイコンとソーシャルグラフィックス
エネルギッシュでモダンで、暗い岩に対する明るい潮の池の生活のようです。構造のためにティールとネイビーに近いものに寄りかかり、コーラルレッドをパンチして重要なハイライトを作ります。ソフトクリームは、パレットがテクニカルになりすぎたり冷たくなったりするのを防ぎます。ヒント: ミントをアイコンの周りのグローまたはアウトラインカラーとして使用して、鮮明な分離を作成します。
media.ioを使って生成したtidepool popの画像例
12) 海岸沿いのコテージ

十六進:#F2E9DF #C7D3D4 #8BA6A9 #5C6B73 #D97B66
気分:居心地がよく、フレンドリーで、リラックスしています
最適な場合:ホスピタリティブランディングとメニューデザイン
風化した塗料と暖かい光が入ったコテージのポーチのように、居心地がよくフレンドリーです。メニューや文房具には淡いクリームを使用し、セクションのヘッダーと境界線にはシーグレーのブルーを重ねます。ミュートされたサンゴは、スペシャル、スタンプ、または小さなイラストの詳細を歓迎すると読みます。ヒント: 手描きの海岸アイコンと組み合わせて、トーンを親しみやすく保ちます。
media.ioを使って生成した海岸コテージの画像例
13) 崖侧の花岗岩

十六進:#E5E7EA #AAB0B6 #6B7075 #2B2F33 #C24E3C
気分:インダストリアル、安定した、大胆なアクセント
最適な場合:建築事務所とプレゼンテーションデッキ
鋭い風の下の花崗岩の崖のように、工業的で安定しています。このライトハウス カラー パレットは、クリーンなグリッド、モノクロ ダイアグラム、強力なタイポグラフィのために構築されています。赤とオレンジを、コールアウト、セクション ディバイダー、またはマップ ピンの 1 点のアクセントとして使用します。ヒント: 背景を純白ではなくライトグレーに保ち、より洗練された印刷可能な仕上がりにします。
media.ioを使って生成した崖側花崗岩の画像例
14) サンセットピア

十六進:#2B1B2E #5C2E4A #D65C5C #F2C6A0 #F7EFE5
気分:ロマンチック、暖かい、映画のような
最適な場合:結婚式の招待状とブティックポスター
ロマンチックで映画的で、地平線に最後の光がある夕日の桟橋のようです。深みのあるプラムとワインの色調がラグジュアリーなベースを演出し、コーラルとピーチがエッジを柔らかくします。ペールクリームを紙色として使用して、すべてを風通しの良い状態に保ちます。ヒント: ホイルやエンボス加工のアクセントは、特にプラムオンクリームストックで美しく機能します。
media.ioを使って生成したサンセットピアの画像例
15) マリーナパステル

十六進:#F7F3EF #F2B6B6 #B8D8D8 #7A9E9F #3B4A5A
気分:柔らかく、明るく、そよ風
最適な場合:美容の発売とライフスタイルのニュースレター
静かなマリーナにパステル色のボートが並んでいるような、柔らかく風が吹いています。大きなブロックやイラストにはチークと淡いアクアを使用し、タイプには深いブルーグレーでレイアウトをグラウンドします。すっきりとしたオフホワイトは、甘いというよりもモダンな雰囲気を保ちます。ヒント: 最も暗い色を見出しと小さな UI 要素に制限して、パステルが支配的なままにします。
media.ioを使って生成したマリーナパステルの画像例
16) 昆布&キャンバス

十六進:#2F5D50 #6E8C3E #E8DDC8 #BDAA8B #3A2F2A
気分:アースリー、ナチュラル、アーティサナル
最適な場合:エコパッケージとアウトドアブランド
キャンバスの帆や流木に対する昆布の緑のように、土っぽくて職人技です。グリーンは幅広の形で最もよく機能しますが、クリームと日焼けはコピーを読みやすく保ちます。スタンプ、見出し、細いルールには濃い茶色を使用して、クラフトのキャラクターを追加します。ヒント: コーティングされていない紙とシンプルなブロックイラストと組み合わせると、地に足の着いた持続可能な外観が得られます。
media.ioを使って生成したkelp & canvasの画像例
17) ヴィンテージビーコン

十六進:#B0302F #F1E2C8 #C7B299 #4C5B66 #1F2A33
気分:ノスタルジック、頑丈、マリタイム
最適な場合:博物館の展示と遺産のブランディング
手描きで何十年も手入れされた歴史的な灯台のように、懐かしくて頑丈です。赤は明るいというよりクラシックな感じがするので、印鑑や看板、セクションタイトルに最適です。パーチメントクリームと落ち着いたトープとバランスを取って、本物のアーカイブ雰囲気を醸し出します。ヒント: ボディテキストにはわずかに暖かいグレーを使用して、冷たくモダンな雰囲気を避けます。
media.ioを使って生成したヴィンテージビーコンの画像例
18) モダンな遊歩道

十六進:#F5F2ED #2D3142 #4F5D75 #EF8354 #BFC0C0
気分:モダンで清潔、少しスポーティな雰囲気
最適な場合:スタートアップのブランディングとランディングページ
モダンで清潔で、サンセットオレンジのポップが入った新鮮な遊歩道の板のようです。チャコールとスチール ブルーを使用して強力なタイポグラフィック システムを実現し、オレンジのアクセントで主要なセクションを明るくします。オフホワイトは間隔を風通しよく保ち、ライトグレーはカードや仕切りをサポートします。ヒント: デフォルトでは charcoal を使用し、主なアクションでは orange を使用して 2 色のボタン セットを構築します。
media.io を使用して生成された現代の遊歩道の画像例
19) 冬の岬

十六進:#F8FAFB #DCE6EE #8AA3B7 #2E3F4F #A33A3A
気分:さわやかで静かで冬らしい
最適な場合:季節のキャンペーンやクリーンパンフレット
青白い空の下の冬の岬のように、さわやかで静かです。アイシーホワイトとライトブルーは、深いネイビーのタイポグラフィと構造化されたレイアウトのためのクリーンなステージを設定します。落ち着いた赤は、お祭りにならずに強い季節のアクセントを作ります。ヒント: 最も明るい青を微妙なセクションの色合いとして使用して、ページを明るく保ちながらコンテンツを分離します。
media.ioを使って生成した冬の岬の画像例
20) コーラルアラート

十六進:#FF3B3F #FFB3B5 #FFF2E8 #2B2D42 #6C7A89
気分:緊急、現代、編集
最適な場合:アナウンスポスターと行動呼びかけバナー
穏やかな曇りの海に対する明るい信号旗のように、緊急で現代的です。これらの灯台の色の組み合わせは、サンゴがリードし、海軍がテキストと構造のサポートの役割を果たす場合に最も効果的です。ブラッシュをより柔らかい背景フィールドとして使用して、パレットを複数のセクションに広げます。ヒント: 読みやすさのためにボディ コピーをクリーム色にネイビーで保管し、見出しと CTA ブロックのみにコーラルを予約してください。
media.ioを使って生成したcoral alertの画像例
21) シグナル&サーフ

十六進:#F04E45 #F7F1E1 #1B3A57 #3FA7D6 #89D2DC
気分:フレッシュ、スポーティ、海岸
最適な場合:スポーツクラブと旅行プロモーション
新鮮でスポーティで、活気のある波の上の明るい信号のようです。暗くなりすぎずに強いコントラストが必要な場合は、この灯台の色の組み合わせを試してください。文字はネイビー、ベースはクリーム、エネルギーは赤です。2 つのブルーは、ストライプ、ウェーブ、フレンドリーなインフォグラフィックにうまく重なります。ヒント: 背景には水色、アイコンには明るい青を使用して、視覚的な秩序を保ちます。
media.ioを使って生成したsignal&surfの画像例
22) ランタンルームグロー

十六進:#2C2A2E #5A4E4A #C9B38C #F3E7CF #E36B4A
気分:暖かい、映画のような、親密な
最適な場合:レストランのブランディングと商品広告
暖かくて親密で、夜気に照らされるランタンルームのようです。深みのあるチャコールとブラウンがムーディーなベースを作り、ゴールドとクリームが柔らかい照明をもたらします。抑制されたオレンジ色のアクセントは、ボタン、バッジ、または価格ハイライトにモダンなエッジを追加します。ヒント: 写真撮影では暖かい照明を使用して、プリントとデジタル全体でパレットがまとまっているように感じます。
media.ioを使って生成したランタンルームグローの画像例
Lighthouse に合う色は何ですか?
灯台のパレットは、ネイビー、チャコール、オフホワイトなどのコントラストの高いステープルと最もよく合います。これらのエコーペイントされたタワー、海洋ユニフォーム、清潔な海岸標識。砂、トープ、または流木ベージュを追加して、物事を温め、スキームを接地した状態に保ちます。
アクセントとしては、クラシックなビーコン レッドが最も象徴的な選択肢ですが、コーラル、テラコッタ、またはゴールデン イエローは、「信号のような」ままでありながら、よりモダンに感じることができます。より柔らかい海岸の雰囲気を求めるなら、シーグラスのようなアクア、スチールブルー、ミスティグレーが自然にブレンドされます。
意図的な外観を維持するには、アクセント ファミリー (赤/コーラル、黄色、アクア) を 1 つ選択し、ほとんどの作業をニュートラルに任せます。そうすれば、視覚的な雑然とせずに灯台のような雰囲気が得られます。
灯台のカラーパレットを実際のデザインで使用する方法
ブランディングの場合は、ネイビー/チャコールをタイポグラフィとロゴのベースとして扱い、CTAボタン、シール、またはパッケージのコールアウトの1つの主要なアクションのためにビーコンレッド(またはコーラル)を予約します。これは、実際の灯台のコントラストを反映しています。シンプルな形、強い信号です。
UI では、オフホワイトまたはライト フォグ グレーのパネルを使用して読みやすさを維持し、二次ナビゲーションとチャートにはスレート/スチール ブルーを使用します。見出しと主要なメトリクスは最も暗いトーンを維持し、インターフェイスが重くなく鮮明に感じられるようにします。
印刷物(ポスター、メニュー、招待状)用には、紙のようなクリーム色や温かみのあるニュートラルカラーを基調にして、アクセントとなるストライプやスタンプを控えめに加えてみてください。微妙な質感(紙目や非塗工紙)は、沿岸のカラーパレットに高級感と触感を与えます。
AIで灯台パレットのビジュアルを作成する
デザイン前に灯台カラースキームをプレビューしたい場合、AIを使ってメニューやパッケージ、ランディングページ、ポスター、アイコンセットのモックアップを素早く作成できます。大胆なビーコンレッドと柔らかなフォグ&サンド系ニュートラルで迷っている場合は特に便利です。
まずは「ウェブサイトのヘッダー」「コーヒーラベル」「結婚式の招待状」など、明確なテーマから始め、メインとなる色とアクセントを指定しましょう。上記のプロンプトを再利用し、パレット名や色の役割だけを入れ替えて素早く反復できます。
気に入った方向性が見つかったら、レイアウトのプロンプトは同じままにして、色名(ネイビー、クリーム、コーラル、サンド、フォググレー)だけをHEX風に入れ替えて比較を一貫させましょう。
灯台カラーパレット Q&A
-
灯台カラーパレットとは何ですか?
灯台カラーパレットは、強いコントラスト(多くはネイビー+ホワイト)を基調に、ビーコンレッド、コーラル、ゴールデンイエローといった「シグナル」アクセント、さらにサンドやフォググレー、ドリフトウッドベージュのようなサポート系ニュートラルカラーを組み合わせた沿岸インスパイアの配色です。 -
最もクラシックな灯台カラーは何ですか?
レッド、ホワイト(または温かみのあるクリーム)、ネイビーがもっとも象徴的な灯台のカラーです。遠くからでも判読しやすく、ロゴや看板、Web UIにも適しています。 -
ビーコンレッドがデザインを強調しすぎないようにする方法は?
レッドはコントロールしたアクセントとして使用します。主なCTAボタンやアクティブなナビゲーション、小さなアイコン、一本のストライプなどに用いましょう。バランスと視認性のため、ネイビー/チャコールやオフホワイトにレイアウトを任せるのがポイントです。 -
灯台パレットは現代的なUIデザインにも適していますか?
はい。特にフォググレーやスチールブルーに、一色だけアラートカラー(ゴールドやコーラル)を使ったパレットは、明確な階層性と十分なコントラスト、清潔なマリンテイストを生み出します。 -
灯台テーマで最適な背景色は?
温かみのあるオフホワイト、クリーム、淡いフォググレーが最適です。これらの背景色は沿岸らしく、印刷物のような雰囲気で、純粋なホワイトの強い印象を避けられます。 -
パッケージデザインにも灯台パレットを使えますか?
もちろんです。ネイビー+クリームはラベルに高級感をもたらし、サンド系やタン系はクラフト紙や非塗工素材と相性抜群です。アクセントとしてレッドやオレンジを加えて、商品ポイントやバッジに使いましょう。 -
灯台パレットのモックアップを手早く作るには?
Media.ioのテキストから画像へのツールを使い、デザインの種類(ポスター、ラベル、ランディングページ)とメインカラー+1色のアクセントを指定したプロンプトを入力します。数種類バリエーションを生成し、ブランドシステムを決定する前に雰囲気を比較しましょう。
次へ: コーヒークリーム カラーパレット

