グレータンのカラーパレット：おすすめ配色とHEXコード

グレータンのカラーパレット（グレージュと呼ばれることが多い）は、暖かい砂と冷たい石をブレンドし、モダンで落ち着いていて暮らしやすいニュートラルな外観を演出しています。

インテリアのスタイリング、ブランド システムの構築、UI のデザインなど、グレー タン トーンは柔軟性を提供します。背景には十分柔らかいですが、コントラストが読みやすいほど構造化されています。

グレータンパレットがうまく機能する理由

グレータンは、温かみのあるベージュとクールなグレーの間のスイートスポットに位置するため、黄色や氷のように振りすぎず、さまざまな照明や素材に適応します。このバランスにより、インテリアとデジタル デザインの両方で信頼できる「ベース ニュートラル」になります。

これらのトーンは自然に低彩度であるため、コンテンツをより落ち着いてプレミアムに感じさせるのに役立ちます。写真は一貫して見え、タイポグラフィは読みやすく、アクセント(ネイビー、グリーン、ハニーなど)は衝突することなく目立つことができます。

グレータンも美しくスケールします。広々とした背景にはウィスパーライトのオフホワイト、表面やカードにはミッドグレージュ、階層と構造にはディープチャコールを使用できます。すべて同じ家族に留まりながら。

20 以上のグレー タン カラー パレットのアイデア (十六進コード付き)

1) 石のキャンバス

十六進：#D8D1C8 #B9B1A8 #8C8782 #5A5E60 #F2EFEA

気分：落ち着いた、風通しの良い、地に足の着いた

最適な場合:モダンなリビングルームとオープンプランのインテリア

太陽に照らされた石灰岩や柔らかい織物のように落ち着いて風通しの良いこれらの色調は、すぐに落ち着いたように感じます。薄いクリームを壁やベースとして使用し、大きな家具にミッドグレージュを重ねて静かな基礎を作ります。木炭は金属仕上げ、フレーム、またはステートメントラグで構造を追加し、暖かいトープはすべてを魅力的に保ちます。ヒント: コントラストの重いブロックを避けるために、2 つの小さなスポット (ランプ + ハードウェアなど) で最も暗い色合いを繰り返します。

media.ioを使って生成した石のキャンバスの画像例

メディア.io

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

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

2）砂漠の霧

十六進：#E6D6C4 #C9B59C #A7A09A #6E6A67 #FFF6EC

気分：暖かく、かすんで、穏やかな

最適な場合:スパバスルームとウェルネスブランディング

早朝の砂丘のように暖かくかすんでいるこのミックスは、黄色に変わることなく心地よい読み方をします。サンディニュートラルにマットストーンテクスチャーとブラッシュニッケルを組み合わせて、モダンなスパ感を演出します。深いグレーのグラウンドミラー、タイポグラフィ、または単一のアクセントストライプ。ヒント: グラウト、ボーダー、ボディ テキストを暗い色合いにして、クリーミーなハイライトを清潔で落ち着いた状態に保ちます。

media.ioを使って生成した砂漠の霧の画像例

3) リネン&グラファイト

十六進：#F4F0E8 #D3C7B8 #A59C92 #4E4F53 #1F2328

気分：オーダーメイド、さわやか、モダン

最適な場合:プレミアム Web サイトと編集スタイルのレイアウト

シャープな鉛筆スケッチの横にプレスリネンのようにテーラードメイドでパリッとしたこのセットは、洗練された現代的な感じがします。十分な空白が必要ですが、それでも暖かさが必要なページのグレータンの配色として美しく機能します。ナビゲーション、見出し、仕切りには 2 つの最も暗いトーンを使用し、ミッド ニュートラルで大きなブロックを柔らかくします。ヒント: 階層を明確に保つために、画面ごとに 1 つの要素 (ボタンなど) のみに黒に近い色を予約します。

media.ioを使って生成したリネン&グラファイトの画像例

4) ペブルラテ

十六進：#E2D8CE #CBBDAF #B0A296 #857A72 #3C3A39

気分：居心地の良い、柔らかい、カフェのような

最適な場合:コーヒーショップとメニューデザイン

石のコースターの上のラテのように居心地がよく柔らかい、これらのニュートラルは親しみやすく暖かい感じがします。背景と紙ストックには最も明るい色合いを使用し、タイポグラフィとセクションヘッダーにはより深いトープを使用します。ダークなエスプレッソトーンは、厳しく見せずにロゴマークや価格強調に最適です。ヒント: テクスチャ (クラフト紙、斑点プリント、またはグレイン) を追加して、色を追加しなくてもパレットがより豊かに感じられるようにします。

media.ioを使って生成したpebble latteの画像例

5) クレイスタジオ

十六進：#E7D8CF #C7AA9A #A58F84 #7A7C78 #B45A3C

気分：職人、素朴、クリエイティブ

最適な場合:セラミックスブランドとハンドメイド製品パッケージ

スタジオの棚で乾燥する濡れた粘土のような職人技と土のようなこのミックスは、暖かいニュートラルとベイクドテラコッタの火花をブレンドしています。柔らかいチークベージュを箱やラベルに引き出し、粘土の赤をシール、ストライプ、またはヒーローのアイコンとして使用します。クールなグレーは暖かさを素朴に感じさせず、黒のインクやスタンプされたテクスチャとうまくマッチします。ヒント: コーティングされていないストックにアクセントを印刷すると、本物の手作り仕上げになります。

media.ioを使って生成したclay studioの画像例

6) 暖かい最小UI

十六進：#F6F1EA #D8C8B6 #B3A89D #6C6A67 #2C2D30

気分：ミニマル、フレンドリー、洗練された

最適な場合:ダッシュボード UI と生産性アプリ

暖かい日光が当たる清潔なデスクのようにミニマルでフレンドリーなこれらのニュートラルは、インターフェイスをより落ち着かせます。このようなグレータンカラーパレットは、コントラストを読みやすく保ちながらまぶしさを軽減するため、生産性ツールに最適です。プライマリ アクションにはほぼ黒、セカンダリ テキスト、境界線、チップには中間グレージュを使用します。ヒント: 単一の色のステータス システム (緑、琥珀色、赤) を追加し、一貫性のために他のすべてをこれらのニュートラルの範囲内に保ちます。

media.ioを使って生成したwarm minimal uiの画像例

7) 砂岩社説

十六進：#EFE6DD #D6C3B0 #B29F8E #7A7570 #2B2B2C

気分：エレガント、大人、ストーリー主導

最適な場合:雑誌のスプレッドとルックブック

ギャラリーの風化した砂岩のようにエレガントでストーリー主導のこのパレットは、ページ上で時代を超越した感じがします。ソフトクリームは写真を明るく保ち、ミッドタンはキャプションや引用符に暖かさを加えます。ボディテキストとグリッドラインにダークトーンを使用して、プレミアムな編集リズムを維持します。ヒント: マージンを広くして、暖かい色合いが泥だらけではなく意図的に読めるようにしてください。

media.ioを使って生成した砂岩社説の画像例

8) トープ・ボタニカ

十六進：#EDE3D8 #C8B5A7 #9E9188 #5E6A62 #2F3A35

気分：ボタニカル、落ち着いた、自然

最適な場合:ウェルネスラベルと植物イラスト

リネンのノートに対して乾燥した草のようにボタニカルで落ち着いたこれらのトーンは、有機的で構成された感じがします。落ち着いたグリーンは、暖かいニュートラルを圧倒することなく、自然なキューをもたらします。セリフタイポグラフィ、ラインドローイング、テクスチャードペーパーと組み合わせると、薬剤師の雰囲気が得られます。ヒント: 成分リストには最も濃い緑色を使用して、軽いパッケージでの読みやすさを高く保ちます。

media.ioを使って生成したtaupe botanicaの画像例

9) 流木のブランディング

十六進：#F0E7DE #D0BFAE #A9A39B #6B645F #1C3A5A

気分：海岸沿い、信頼できる、洗練された

最適な場合:ブランドアイデンティティシステム及び法人文房具

海岸沿いで、深い水のそばの流木のように信頼できるこのミックスは、自信に満ちた青いアンカーと暖かさのバランスをとっています。これは、ブランドシステムで使用すると、フレンドリーでプロフェッショナルに見えるグレータンの色の組み合わせの1つです。文房具にはニュートラルを支配的に保ち、ロゴ、リンク、署名要素にはネイビーを使用します。ヒント: ブルーに厳格なルールを設定して、全体の外観を海のようにするのではなく、プレミアムなアクセントを維持します。

media.ioを使って生成した流木ブランディングの画像例

10) アーバンデューン

十六進：#E3DBD1 #C5B7A9 #9A9189 #5D6164 #2E3236

気分：都会的、バランスの取れた、控えめな

最適な場合:建築プレゼンテーションとピッチデッキ

午後遅くの太陽で温まったコンクリートのように都会的で控えめなこれらのトーンは、落ち着いてプロフェッショナルに感じられます。中間ニュートラルは、コンテンツと戦うべきではない図、表、スライドの背景に適しています。タイトルと主要なメトリックに濃いグレーを追加して、コントラストを鮮明に保ちます。ヒント: デッキを清潔に保つために、行動を呼びかけるためにのみ明るいハイライトカラーを 1 つ導入します。

media.ioを使って生成したurban duneの画像例

11) モカミスト

十六進：#EFE2D7 #CDB4A4 #A48D84 #6A5D57 #3A2F2B

気分：豊かで居心地の良い、親密な

最適な場合:寝室、カフェ、ライフスタイル写真のスタイリング

柔らかい朝の光の中でココアの蒸気のように豊かで居心地の良いこのパレットは、重くなることなく暖かくなります。寝具や背景の表面にはクリーミーなベージュを使用し、スロー、ウッド、セラミックにモカトーンを追加します。ディープブラウンはレザーのアクセントや、クラシックな雰囲気が必要な薄型タイプにぴったりです。ヒント: マット仕上げとサテン仕上げを混ぜて、暗い色合いがシーンを平らにしないようにします。

media.ioを使って生成したモカミストの画像例

12) ユーカリ中性

十六進：#F3EEE7 #D1C2B1 #A7A097 #6F7C73 #334039

気分：フレッシュ、ミュート、回復

最適な場合:ナチュラルスキンケア広告・エコ商品ページ

暖かい紙の上のユーカリの小枝のように新鮮で回復的なこれらの色合いは、清潔で接地された感じがします。柔らかくなったグリーンは優しい健康キューを加え、日焼けは親しみやすい外観を保ちます。最小限の写真、リサイクルされたテクスチャ、そして十分な呼吸の余地と組み合わせてください。ヒント: ボタンには最も濃い緑色を使用し、ライトベースでコントラストにアクセスできるようにしてください。

media.ioで生成したユーカリニュートラルの画像例

13) コンクリートと蜂蜜

十六進：#E8E2DA #C7C1B9 #9A9793 #5B5E62 #D4A24A

気分：工業的、明るい、楽観的

最適な場合:スタートアップブランディングと行動促進デザイン

インダストリアルですが、コンクリートの太陽の光のように明るいこのセットは、蜂蜜のアクセントからそのエネルギーを得ています。グレータンの色の組み合わせの中で、ゴールデントーンは大きな音ではなく暖かくモダンなものを読むため、ハイライトに強い選択肢です。背景とUIサーフェスにはニュートラルを保持し、バッジ、アイコン、または1つのプライマリボタンにはハニーを使用します。ヒント: パンチを持たせるために、アクセントをレイアウトの約 10% に制限します。

media.ioを使って生成したコンクリート&ハチミツの画像例

14) ほこりっぽい牧場

十六進：#F2E6DA #D0B39E #B0927F #6A615A #7A3E2E

気分：素朴で、日焼きで、歓迎的です

最適な場合:西洋風のイベントと素朴な招待状

静かな牧場の道のように素朴で日焼けしたこれらの色合いは、接地された土のようなエッジで暖かさをもたらします。テラコッタブラウンはモノグラムやボーダーのディテールに適していますが、明るい日焼けはレイアウトの通気性を保ちます。テクスチャの紙の効果、シンプルなラインアイコン、クラシックなセリフと組み合わせます。ヒント: ここでは純粋な黒いインクは避けてください。濃いグレーブラウンの方が本格的で、読みやすい感じがします。

media.ioを使って生成したdusty ranchの画像例

15) 冬のスエード

十六進：#F7F5F2 #D9D0C7 #B7AEA6 #7B7672 #404244

気分：涼しく、柔らかく、静かな贅沢

最適な場合:ファッションルックブックと最小限のeコマース

冬の光の中でスエードのように涼しく柔らかく、このパレットは高価で抑制されています。製品ページには淡い色調を使用して、素材やシルエットが自然に際立つようにします。ミッド グレーはサイズ セレクターや微妙な UI アウトラインに最適ですが、ダーク スレートはタイポグラフィを鮮明に見せながらも鮮明にします。ヒント: 静かで贅沢な雰囲気に合わせて、大きな高解像度の画像を使用し、間隔を広く保ちます。

media.ioを使って生成したウィンタースエードの画像例

16) 铜の砂のアクセント

十六進：#F1E3D6 #D4C0AE #AFA197 #7A6C62 #C36A3A

気分：暖かく、明るく、クラフトフォワード

最適な場合:ホームデコレーション広告と季節のプロモーション

砂の上に夕日を捉える銅のように暖かく明るいこのミックスは、魅力的で手作りのように感じます。銅のアクセントは、シール、見出し、装飾的なラインなどの小さな意図的なヒットに最適です。オーク、籐、ブラッシュメタルなどの天然素材と組み合わせると、輝きが増幅されます。ヒント: 銅が主人公のままであるように、影を柔らかく保ち、他の場所で高彩度を避けてください。

media.ioを使って生成した銅砂アクセントの画像例

17) ギャラリーグレージュ

十六進：#F5F3EF #D6CEC4 #B2AAA0 #7A746E #2A2B2E

気分：清潔で厳選されたギャラリーのような

最適な場合:ポートフォリオウェブサイトとクリエイティブスタジオ

静かなギャラリーの壁のように清潔でキュレーションされたこれらのニュートラルは、ワークスペースを呼吸に与えます。このようなグレータンカラーパレットは、混合照明でもポートフォリオ全体で画像を一貫性のあるものにしたい場合に優れています。ナビゲーションやキャプションには最も暗いトーンを使用し、背景を最も柔らかいオフホワイトに保つとプレミアムな外観になります。ヒント: 画像の周りに微妙な温かいグレーの境界線を追加して、重いフレームなしでサムネイルを統一します。

media.ioを使って生成したギャラリーグレージュの画像例

18) ココアチョーク

十六進：#F0ECE6 #CFC2B7 #A58F86 #6D5B54 #4A3E3A

気分：ヴィンテージ, アカデミック, 暖かい

最適な場合:ブックカバー・文房具セット

ココアブラウンのボードのチョークダストのようなヴィンテージでアカデミックなこれらのトーンは、思慮深く触覚的に感じられます。色と同じくらい質感が重要な紙製品、ジャーナル、表紙のデザインに輝きます。背景と余白には明るい色合いを使用し、タイトルとオーナメントには濃い茶色で階層を構築します。ヒント: プリントでミッドトーンが混ざり合わないように、微妙なスペックルやエンボス加工を追加します。

media.ioを使って生成したココアチョークの画像例

19) シーサイドトープ

十六進：#E9E2DA #C8BEB4 #A39B94 #6B7A86 #24313A

気分：風通しがよく、静かで、海岸沿いのモダン

最適な場合:旅行ブランディングとエアリーランディングページ

穏やかな海岸線を覆う霧のようにさわやかで静かなこのパレットは、暖かいニュートラルと涼しいシースレートをミックスしています。ブルースは洗練されたままにするのに十分にミュートされており、リンク、アイコン、微妙なグラデーションに最適です。日焼けをメインキャンバスにし、クールなトーンでヘッダーとフッターに深みを与えましょう。ヒント: 大きなタイポグラフィと優しいライン アイコンを使用して、風通しの良い海岸沿いのペースに合わせます。

media.ioを使って生成したシーサイドトープの画像例

20) ハースストーン コージー

十六進：#F3E8DD #D3BFAF #B39A8C #7C6B61 #4B3A33

気分：居心地が良く、ノスタルジックで、地に足がついた

最適な場合:キッチンインテリアとコンフォートフードパッケージ

石造りのコテージの暖炉のように居心地が良く懐かしいこれらの色合いは、心地よく親しみやすい感じがします。壁やラベルの背景にはクリーミーなタンを使用し、タイポグラフィやイラストのディテールには濃い茶色を使用します。ミッドトーンは、素朴すぎずに木製のキャビネット、クラフト紙、天然繊維に適しています。ヒント: 暗い要素がデザインに混雑しないように、ロゴの周りにオフホワイトの小さなスペースを追加します。

media.ioを使って生成したhearthstone cozyの画像例

グレータンと相性の良い色は？

グレータンは、柔らかいホワイト、チャコール、温かみのあるウッドトーンと自然にマッチし、全体的な外観をまとまりと接地を保ちます。これらの組み合わせは、レイヤードされた意図的な雰囲気のニュートラルな配色が必要な場合に理想的です。

アクセントには、落ち着いたブルー（ネイビー、スレート、ダスティデニム）が信頼できるコントラストを加え、ボタニカルグリーン（ユーカリ、オリーブ、ディープフォレスト）が落ち着いた自然なキューをもたらします。より多くのエネルギーが必要な場合は、蜂蜜やテラコッタの小さなタッチがパレットを圧倒することなく温めることができます。

デジタル作業では、1つのアクセントカラーを選択し、ほとんどのUIサーフェスをグレージュの範囲内に保ち、視覚的なノイズを低減します。これにより、ボタン、リンク、ステータスの色が一目でわかりやすくなります。

グレータンのカラーパレットを実際のデザインで使用する方法

最も大きな領域には明るいベース (オフホワイトまたはクリーム) から始め、カード、家具の室内装飾品、背景パネルなどの二次表面にはミッドグレージュを追加します。これにより、新しい色合いを導入することなく深みが生まれます。

見出し、主要なメトリクス、ナビゲーションバー、ハードウェア、またはフレームなど、構造には最も暗いトーンを戦略的に使用します。その暗い色合いをいくつかの小さな場所で繰り返すと、構図のバランスが取れ、重い「コントラスト ブロック」が 1 つも発生しないようになります。

グレータンが平らに感じないようにするには、マットペイント、リネン、ストーン、ブラッシュメタル、または微妙な粒子など、質感と仕上げを変えてください。ミニマルでモダンなパレットの中にいながら、豊かさを得ることができます。

AIでグレータンパレットビジュアルを作成

コンセプトを提示する場合は、部屋、製品ショット、UI画面、ブランディングモックアップなど、コンテキストでグレータントーンを表示するのに役立ちます。視覚的な例は、ステークホルダーがすぐに気分を感じることができます。

Media.io Text to Image を使用すると、on スタイルのシーン (居心地の良いインテリア、編集レイアウト、パッケージ レンダリングなど) を生成し、プロンプト、照明、アスペクト比を調整することで素早く洗練できます。

パレットの十六進コードをガイドとして使用し、材料と照明 (リネン、コンクリート、オーク、拡散日光) を説明して、意図したグレージュ パレットに忠実な出力を保ちます。

次へ： パステルブルーのカラーパレット