オニキスカラー配色20選｜HEXコード付アイデア集

オニキスは深いチャコールブラックのニュートラルカラーで、レイアウトに瞬時にモダンさ、高級感、意図的な印象を与えます。補助色を圧倒せずにコントラストを制御できるため、インターフェース、ブランディング、インテリアの信頼できるアンカーとして人気です。

以下にHEXコード付きの20種のオニキスカラーパレットと、オニキスと相性の良い色、実際のプロジェクトでこれらの配色を活用するためのポイントを紹介します。

オニキスパレットが優れている理由

オニキスは「スマートニュートラル」として機能します。チャコールよりも濃く、純粋な黒よりも柔らかく、暖色・寒色どちらの組み合わせにも柔軟に使えます。強いビジュアルの土台を作りつつ、アクセントカラーが映える余地を残します。

UIデザインでは、オニキスは純粋な黒よりも眩しさを抑え、階層構造を簡単に作れます。ナビゲーション、カード、データレイヤーをニュアンスの異なるグレーで区分けしやすく、ブランディングやプリントでは、辛辣さのない自信と洗練さを伝えます。

また、オニキスは金属のトーンやクリーム色、落ち着いたグリーンともよく調和するため、現代的、高級感、そして自然を意識した美学にも最適です。

20種類以上のオニキスカラーパレット（HEXコード付）

1) ミッドナイトオニキス

HEX： #0b0c0f #1a1c22 #2f313a #c7c9cf #f4f5f7

雰囲気： スリーク、モダン、ハイコントラスト

最適用途： ダークUIダッシュボード

黒いガラスに都市の灯りが映るように洗練された夜の雰囲気。階層構造が重要で眩しさを抑えたいダッシュボードやアナリティクス画面に最適です。最も濃い色調は柔らかいグレーで調整し、キーナンバーやCTAにはほぼ白色を使うと可読性が高まります。ポイント：本文は純白ではなくライトグレーに設定することで目の疲れを軽減します。

media.ioを使って生成したミッドナイトオニキスの画像例

Media.io

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

今すぐ無料で試す

2) スモークドパール

HEX： #121316 #2a2c33 #6b6f7a #d7d9de #fbfbfc

雰囲気： 柔らかい、エアリー、上品

最適用途： 編集・雑誌型レイアウト

淡いスモークとパールのハイライトが落ち着いた上質な静けさを演出します。雑誌風のレイアウトや長文、ポートフォリオなどホワイトスペースを活かしたい場面に最適。ダークなアンカーと中間グレーの罫線やキャプションを合わせると整然としたページに。ポイント：見出しは最も濃い色、セクション区切りには淡いグレーを使い、太線の代わりにスペースを確保しましょう。

media.ioを使って生成したスモークドパールの画像例

3) ブロンズノワール

HEX： #0e0f12 #26221d #6a4b2f #c7a072 #f3eee6

雰囲気： ラグジュアリー、ウォーム、ドラマチック

最適用途： プレミアムブランドアイデンティティ

高級感があり、キャンドルの灯りにブロンズが浮かぶような雰囲気。オニキスカラーパレットは、プレミアムなロゴ、高級サービス、ブティックホテルのブランディングに理想的です。ブロンズとクリームを組み合わせて上品なコントラストを作り、最も深い色合いは背景やスタンプに使いましょう。ポイント：ブロンズは大きな面ではなく薄いホイル状のアクセントとして使うと高級感を損ないません。

media.ioを使って生成したブロンズノワールの画像例

4) フォレストアッシュ

HEX： #0d0f10 #1f2422 #3e5a4c #a9b6ad #f1f3f1

雰囲気： グラウンデッド、ナチュラル、落ち着き

最適用途： エコプロダクト包装

苔むした緑とアッシュグレーの樹皮を思わせる安定感。サステナブル製品やスキンケア、コーヒーのパッケージなど自然の要素が重要な商品に最適です。フォレストグリーンはオフホワイトのラベルと組み合わせて明快さを保ち、ほぼ黒はタイポグラフィやバーコードに。ポイント：グリーンの面積を抑えてパッケージ全体の清潔感を保ちましょう。

media.ioを使って生成したフォレストアッシュの画像例

5) ローズウッドシャドウ

HEX： #0f0e10 #2a1f23 #5a2f3b #c9a3ad #f6eef0

雰囲気： ロマンチック、ムーディー、エレガント

最適用途： ウェディング招待状セット

まるでダークな日記にバラの花びらを挟んだようなロマンチックでムーディーな雰囲気。ウェディングのペーパーアイテムや夕方イベントの招待状、高級ビューティー広告などにピッタリです。ほこりっぽいブラッシュピンクと深いワインカラーは名前や見出しに、薄いピンクはスペースを取る役割に。ポイント：最も濃い色はテキスト専用とし、プリント時のコントラスト低下を防ぎましょう。

media.ioを使って生成したローズウッドシャドウの画像例

6) アークティックインク

HEX： #0a0c10 #1c2430 #4a6b86 #c9d7e2 #fbfdff

雰囲気： シャープ、クール、テック感

最適用途： SaaSランディングページ

フロストガラスにインクを落としたようなクリアでクールな印象。自信と技術感を出しつつ、ネオン感を避けたいSaaSページなどに最適です。スチールブルーはほぼ白いセクションと組み合わせ、ナビゲーションとフッターには最も濃いインク色を。ポイント：ブルーは主要アクションやアイコンのみで使い、ページ全体の集中度をキープしましょう。

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

7) ラベンダースレート

HEX： #0e0f14 #242334 #5b5472 #c6c2d6 #f7f6fb

雰囲気： ドリーミー、静か、コンテンポラリー

最適用途： 書籍カバーデザイン

夕闇がスレート屋根を包み込むような夢見心地で静かな雰囲気。現代小説や詩集のカバーに最適です。ラベンダーの中間色は最濃色と合わせて印象的な文字にし、淡いライラックで背景をソフトに。ポイント：繊細なグレインでテクスチャを加え、紫系がプラスチックっぽくならないように仕上げましょう。

media.ioを使って生成したラベンダースレートの画像例

8) サンドストーンカーボン

HEX： #101010 #2a2622 #7a6b5b #d7cbbd #fbf6ef

雰囲気： アーシー、暖かい、タイムレス

最適用途： インテリアスタイリングムードボード

炭のスケッチをサンドストーンの紙に描いたような土の温もりと時を超えた安定感。インテリア用ムードボードやホーム雑貨、職人プロダクトのブランディングなどに最適です。暖かいベージュとカーボンブラックを組み合わせてコントラストを出し、タウプはテキスタイルや背景の中間色に。ポイント：ベージュは空間作りのネガティブスペースにも活用し、暗色の重さをバランス良く感じさせましょう。

media.ioを使って生成したサンドストーンカーボンの画像例

9) エメラルドスート

HEX： #0b0d0f #1b2a25 #0f6a4f #9bc7b7 #f3faf7

雰囲気： フレッシュ、高級感、自信

最適用途： カクテルバー メニュー

高級ラウンジのエメラルドのグラスのように新鮮で上品な印象です。グリーンの差し色が存在感をもたせつつ、読みやすさも損ないません。一番良いオニキス配色の使い方は、背景をダークに、文字は淡いミント、エメラルドはセクション見出しやアイコンのみに使うこと。ポイント：見出し用には目立つフォントを1つ選び、パレットそのものを際立たせましょう。

media.ioで生成したエメラルドスートの画像例

10) 铜のエンバー

HEX：#0f0d0c #2a1e19 #8a4b2a #d7a67b #f6efe7

雰囲気：居心地の良い、大胆な、職人の仕事

最適用途：商品広告ポスター

暗い暖炉で輝く残り火のように、居心地がよく大胆です。職人技の食品広告、コーヒーの発売、暖かさが売れる秋のプロモーションに役立ちます。銅とクリームを組み合わせて見出しを読みやすくし、最も暗いトーンを使用して画像や境界線をフレーム化します。ヒント: 銅のグラデーションを制限し、平らなブロックに固執して、モダンでプレミアムな外観を実現します。

media.ioを使って生成した銅エンバーの画像例

11) オーシャングラファイト

HEX：#0b0d10 #1a2330 #2d4f6a #9fb5c6 #f2f6fa

雰囲気：落ち着いた、プロフェッショナル、信頼できる

最適用途：アニュアルレポート

曇り空の下の深海のように、落ち着いてプロフェッショナルです。年次レポート、投資家デッキ、および厳しくなく権限を必要とする企業コミュニケーションに使用してください。グラファイトとクールブルーをチャートに組み合わせ、テーブルとマージンには最も明るい色合いを保ちます。ヒント: 濃いページが重く感じないように、見出しにのみ最も暗いトーンを予約してください。

media.ioを使って生成した海洋黒鉛の画像例

12) オリーブ ドラブ ノワール

HEX：#0c0d0c #1f2219 #4a5a2a #b9c1a3 #f4f6ef

雰囲気：頑丈、アウトドア、控えめ

最適用途：アウトドアギアのブランディング

使い古されたキャンバスやフィールドジャケットのように、頑丈で控えめです。アウトドアブランド、アドベンチャーニュースレター、実用性が主導する実用的なラベルに適合します。パッチやタグにはオリーブとペールセージを組み合わせ、大胆なワードマークにはほぼ黒を使用します。ヒント: テキストを最も明るい背景色に配置することで、小さなラベルのコントラストを高く保ちます。

media.ioを使って生成したオリーブドラブノワールの画像例

13) ブラッシュ花崗岩

HEX：#0e0f12 #2a2a2e #7b6f75 #e1cfd6 #fbf6f8

雰囲気：ソフト、ミニマル、スタイリッシュ

最適用途：美容電子商取引UI

花崗岩の上にチークパウダーをまぶしたような、柔らかくてスタイリッシュ。優しいコントラストが必要なビューティーショップやスキンケアUI、商品一覧ページにご使用ください。花崗岩グレーとバッジと評価のチークのアクセントを組み合わせながら、ボタンを最も暗いトーンに保ち、明瞭さを実現します。ヒント: インターフェイスが一貫しているように、すべてのハイライトに 1 つのチーク色を選択します。

media.ioを使って生成したブラッシュグラナイトの画像例

14) 黄金の炭

HEX：#0d0e10 #242424 #6a5a2a #d6c27a #fbf7e8

雰囲気：クラシック, 高级, お祝い

最適用途：イベントチラシ

暗いステージの暖かいスポットライトのように、クラシックでお祝いです。ガラチラシ、アワードナイトグラフィック、マイルストーンの発表に適しています。ゴールドとチャコールを合わせてシャープなタイプにし、淡いクリームを印刷しやすいベースにします。ヒント: 泥だらけの大きな塗りつぶしを避けるために、ルール、弾丸、小さなアイコンに金を使用します。

media.ioを使って生成した金炭の画像例

15) インクと象牙

HEX：#07080a #1a1c1f #4a4f57 #e7e2d8 #fffaf0

雰囲気：クリーン、時代を超越した、編集

最適用途：ポートフォリオウェブサイト

象牙の紙にインクで描いた絵のように、清潔で時代を超越しています。オニキスの配色として、大きな色を使わずに目立つように作業が必要なポートフォリオに最適です。アイボリーの背景とチャコールテキストをペアリングし、ミッドグレーを使用して、無効ボタンなどの微妙なUI状態を使用します。ヒント: 追加の色を導入する代わりに、下線などの一貫したアクセント トリートメントを 1 つ追加します。

media.ioを使って生成したインクとアイボリーの画像例

16) モカ黒曜石

HEX：#0d0c0b #231d19 #5a3f34 #c8b3a6 #f6f0eb

雰囲気：暖かい、居心地の良い、プレミアム

最適用途：コーヒーショップのパッケージ

暖かくて居心地がよく、濃い黒曜石にエスプレッソ クレマを加えたようです。コーヒーバッグ、焙煎ラベル、プレミアムエッジのカフェロイヤルティカードに使用してください。成分ブロックのためにモカブラウンとペールクリームを組み合わせ、ロゴとローストレベルのために最も深い色合いを保ちます。ヒント: セカンダリ テキストにミッド モカ トーンを使用して、デザインが平らではなくレイヤードに感じられるようにします。

media.ioを使って生成したモカ黒曜石の画像例

17) スチールナイト

HEX：#0b0c0f #1a2029 #3a4a5c #aab7c5 #f4f7fb

雰囲気：インダストリアル、焦点、シャープ

最適用途：データ可視化テーマ

夜空の下の鋼鉄の梁のように、産業的で集中しています。行、ラベル、ハイライトをすばやく読む必要があるデータビジュアルに最適です。グリッドの場合は深いスチールとライトグレーブルーを組み合わせ、背景カードの場合はほぼ白を維持します。ヒント: 最も優先度の高いシリーズには 1 つのアクセント カラーを使用し、他のすべてをミッド スチール トーンにミュートします。

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

18) セージとスート

HEX：#0d0f0e #202622 #6f8a7b #ccd8d1 #f6fbf8

雰囲気：フレッシュで優しく、回復する

最適用途：スパパンフレット

静かなハーブガーデンで蒸気が立ち上るように、新鮮で回復的です。スパのパンフレット、ウェルネスのランディングページ、落ち着いた製品ガイドに使用してください。レイアウトを通気性に保つためにセージグリーンと柔らかいオフホワイトを組み合わせ、見出しやコールアウトにスートを使用します。ヒント: 画面上で緑が青すぎないように、写真をウォームニュートラルに保ちます。

media.ioを使って生成したsageとsootの画像例

19) 梅シンダー

HEX：#0d0c10 #251a2a #5a2d63 #c9a7cf #f7f0fa

雰囲気：大胆、芸術的、神秘的

最適用途：音楽ポスター

暗いアンプの上にある紫色のステージの霧のように、大胆で神秘的です。このオニキス カラー パレットは、音楽ポスター、クラブ ナイト、アルバム プロモーション グラフィックにドラマをもたらします。プラムと淡いライラックを組み合わせて読みやすいタイプにし、黒に近いブロックとボーダーでレイアウトをグラウンドします。ヒント: plum に 1 つの大きな形で作業をさせ、残りは最小限に抑えます。

media.ioを使って生成した梅干しの画像例

20) テラコッタの夕暮れ

HEX：#100d0c #2a1f1b #8a4a3c #d9b0a7 #fbf1ee

雰囲気：温かみ、素朴、モダン

最適用途：レストランメニュー

夕暮れ時に冷めるテラコッタタイルのように、暖かく素朴な雰囲気。レストランのメニュー、ベーカリーのブランディング、モダンな雰囲気の季節限定メニューに使用してください。セクションの背景にはテラコッタと淡いチークを組み合わせ、アイテム名と価格にはほぼ黒を保ちます。ヒント: レイアウトを洗練された状態に保つために、重い線の代わりに、落ち着いたチークトーンで微妙なセパレーターを追加します。

media.ioを使って生成したテラコッタダスクの画像例

オニキスと相性の良い色は？

オニキスは、柔らかいオフホワイトやクールなグレーとよくマッチし、すっきりとした読みやすいコントラストを実現します。編集レイアウトやUIレイアウトに最適です。もっと暖かい感触が必要な場合は、クリーム、サンド、トープを入れ替えて、オニキスを「テクニック」ではなく「アットホーム」に感じさせましょう。

アクセントとしては、落ち着いたグリーン (セージ、オリーブ、フォレスト) がオニキスに対してナチュラルでモダンを読み、飽和したブルース (スチール、オーシャン) がプロフェッショナルで信頼性を感じます。プレミアムなエッジが必要な場合は、ブロンズ、銅、ゴールドなどのメタリック風の色合いが、大きな彩度を必要とせずに暖かさと「豪華な照明」を加えます。

より大胆なクリエイティブな仕事のために、深いプラムやダスティブラッシュはオニキスを柔らかくし、感情を追加することができます。パレットの中で最も明るいトーンを維持するだけで、呼吸の余地があります。

オニキスカラーパレットを本物のデザインに活かす方法

役割を割り当てることから始めます。主な背景、ナビゲーション、または見出しテキストに onyx を使用します。二次表面と UI 状態にはミッドトーン (チャコール/スチール) を使用します。そして、読みやすいコンテンツブロックのためにほぼ白またはクリーム色を保ちます。これにより、デザインが平らな暗いスラブに変わるのを防ぎます。

アクセントは 1 つのメイン ハイライト カラー (エメラルド、ブロンズ、スチール ブルーなど) に制限し、ボタン、アイコン、キー データ ポイントで一貫して繰り返します。印刷するときは、大きなオニキス領域に純白を避けてください。わずかに柔らかくなったライトトーンは、より滑らかに見え、視覚的な厳しさを軽減することがよくあります。

インテリアでは、オニキスをアース素材のように扱います。暖かいニュートラル (砂、クリーム) と組み合わせて居心地を良くしたり、クールな淡いグレーと組み合わせてモダンなギャラリーの雰囲気を醸し出したりします。ダークパレットが無菌感を感じないように、テクスチャー（紙、グレイン、マット仕上げ）を追加します。

AIでオニキスパレットのビジュアルを作成する

ダッシュボード、ポスター、メニュー、パッケージなど、オニキスパレットが実際の構図でどのように見えるかをプレビューしたい場合は、まずクイックモックビジュアルを生成します。これは、本番ファイルにコミットする前に、コントラスト、階層、アクセントのバランスをテストする効率的な方法です。

Media.io を使用すると、シンプルなプロンプトをブランドのパレット ビジュアルに変換し、アクセントの色を交換したり、ムードを調整したり (豪華なものと頑丈なもの)、フォーマットを変更したり (チラシとランディング ページ) を数分で素早く反復できます。

次へ： スノーカラーパレット