ポートフォリオ向け配色20選とHEXコード【おすすめカラー組み合わせ】

強力なポートフォリオのカラーパレットは、見た目が「きれい」なだけでなく、あなたのセンスや技術、作品の洗練度に対する期待感を静かに伝えます。中立色とアクセントカラーの絶妙な組み合わせは、ケーススタディの読みやすさやCTAの信頼性も高めてくれます。

以下に、ウェブサイト、履歴書、スライド資料、パーソナルブランディングに活用できる、コピー・調整・ビジュアル化が可能な20以上のポートフォリオ向けカラースキーム案（HEXカラーコード付き）を紹介します。

なぜポートフォリオパレットは効果的なのか

ポートフォリオデザイン用のカラーは多くの役割を担っています。階層を作り、視線を誘導し、見る人に何が重要か（役割、成果、主なビジュアルなど）を伝えます。パレットが統一されていれば、異なるプロジェクトでも一貫性が出て、まとまりのある印象になります。

優れたポートフォリオのカラーパターンは多くの場合、ベースにニュートラルカラーを使い（内容が読みやすくなる）、アクションやハイライトには1つのアクセントカラーを意図的に使用します。この方法により、UIは落ち着いた印象を保ちつつ、ブランド感も演出できます。

さらに、信頼できるカラースキームは摩擦を減らします。明確なコントラストはアクセシビリティを高め、アクセントカラーの繰り返し使用により、リンクやボタン、インタラクティブな状態が直感的に認識できるようになります。

20以上のポートフォリオ向けカラーパレット案（HEXコード付き）

1）ミッドナイトリネン

HEX： #0b1320 #1f2a44 #f2efe8 #c7b8a6 #b46a55

雰囲気： 洗練・落ち着き・エディトリアル

おすすめ用途： 2D UI ポートフォリオホームページ モックアップ

深いインクブルーと温かみのある中立色がバランスよく調和し、深夜のスタジオに敷かれたリネンのように洗練され落ち着いた印象に。ヘッダーやナビゲーションには濃い色味を、本文や余白にはリネンやサンドカラーを使用してください。テラコッタはボタンやタグ、重要なリンクのアクセントとして抑えめに使うのが効果的です。アドバイス：#0b1320 のテキストと #f2efe8 を組み合わせると、シャープで印刷物のような仕上がりになります。

media.io で生成したミッドナイトリネンの画像例

Media.io

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

今すぐ無料で試す

2）スタジオコンクリート

HEX： #2b2d31 #5a6068 #d8dadd #f7f7f5 #ff6b4a

雰囲気： インダストリアル・モダン・エネルギッシュ

おすすめ用途： 無地背景のグラフィックデザインポスター

コンクリート壁や柔らかな昼光、鮮やかなネオンマーカーのようなモダンインダストリアルな雰囲気。グレートーンで文字階層＆レイアウトを作り、オフホワイトで余白の抜け感を演出してください。オレンジレッドはCTAや見出しのアクセントに効果的です。コツ：アクセントは1〜2箇所に絞り、洗練されたスポーティすぎない印象を保ちましょう。

media.io で生成したスタジオコンクリートの画像例

3）ギャラリーセージ

HEX： #1f2f2b #3f5f55 #a6b89a #e7e4d9 #c07a4b

雰囲気： アーシー・洗練・落ち着き

おすすめ用途： 無地背景のブランドアイデンティティキットレイアウト

ナチュラルな木枠のある静かなギャラリーを思わせる、グリーンと暖かな中立色の組み合わせ。ロゴやタイトルは濃いグリーンブラック、背景やパネルはセージとオートミールを使いましょう。カッパー色は認印やアイコン、ブランドキットのハイライトに最適。コツ：カッパーは #e7e4d9 とたっぷり組み合わせると、上質で高級な印象になります。

media.io で作成したギャラリーセージの画像例

4）インク＆コーラル

HEX： #0d1b2a #1b263b #415a77 #e0e1dd #ff5d5d

雰囲気： 自信・クリーン・ハイコントラスト

おすすめ用途： 2D UIケーススタディページ モックアップ

自信と清潔感のあるインクブルーはシャキッとしたブレザーのような印象。コーラルで現代的な創造性の火花を加えています。最も濃い色は本文やナビ、薄いグレーは広めセクションの背景に。コーラルはリンクや進捗などUI全体のアクションカラーとして使うのが効果的。コツ：大きなダークブロックは #415a77 で柔らげ、ページ上部が重くならないようにしましょう。

media.io で生成したインク＆コーラルの画像例

5）テラコッタプルーフ

HEX： #2a1f1a #6b3f2a #c56b45 #f3e9df #2f4f4f

雰囲気： クラフト・温かみ・落ち着き

おすすめ用途： スタジオでのリアルなパッケージングモックアップ

粘土やエスプレッソ、使い込まれた紙のような温かみと落ち着き。クラフト志向ブランドにマッチします。パッケージ土台はクリーム色、ラベルやイラストのディテールにテラコッタを重ねて。濃いティールグリーンは成分表や小バッジのコントラストに最適。アドバイス：#2a1f1a でタイポグラフィを統一すると、可読性と上質な手作り感がUPします。

media.io で作成したテラコッタプルーフの画像例

6）ソフトピーチグリッド

HEX： #2b2f3a #5d6472 #f6d6c9 #f8f4f0 #d0a37f

雰囲気： フレンドリー・爽やか・控えめ

おすすめ用途： 無地背景のイベントチラシデザイン

フレンドリーで空気感のあるこの組み合わせは、ブラッシュペーパーやグラファイト鉛筆、柔らかなスタジオ照明のよう。ほぼ白に近い色をメインに、スレートグレーで文字やグリッドの構造を作るのがコツ。ピーチや暖色タンは日付や強調、アイコンに明るさと親しみやすさをプラス。アドバイス：重要なテキストブロックの背景にピーチを敷くと、強調しつつも穏やかな誘導ができます。

media.io で作成したソフトピーチグリッドの画像例

7）シーグラスレジュメ

HEX： #0f1f2b #1f4d5a #5ea3a3 #d9f1ef #f4fbfa

雰囲気： フレッシュ・信頼感・静けさ

おすすめ用途： エディトリアル履歴書ページ レイアウト

海辺の光やクリアな水を思わせる、みずみずしく静かなシーグラスブルー。見出しや本文はディープネイビー、セクション区切りやアイコンはティールで彩って。淡いアクアやほぼ白の色味が長文でもすっきり読みやすくしてくれます。アドバイス：#5ea3a3 はスキルバーやタイムラインなどに限定し、全体の落ち着きとプロフェッショナル感を保ちましょう。

media.io で作成したシーグラスレジュメの画像例

8）ブロンズブループリント

HEX： #0a1a2a #17324a #2b556e #b08d57 #f2ede3

雰囲気： プレミアム・テクニカル・端正

おすすめ用途： 2D UIダッシュボード モックアップ

インクで描いた設計図にアイボリーの紙とブロンズ定規──そんな雰囲気でプレミアム＆端正。ブルーを重ねてパネルやチャート、サイドバーの階層を作り、騒がしくならずクリアな印象に。ブロンズはアクティブ状態や重要指標、小バッジのハイライトとして最適です。アドバイス：ブロンズは濃い背景で使うと最も映え、洗練された印象を与えます。

media.io で作成したブロンズブループリントの画像例

9）プラムノートブック

HEX： #1d1024 #40214e #7a3b74 #e4d3ea #f0b7a6

雰囲気： クリエイティブ・ムーディー・遊び心

おすすめ用途： 無地背景のソーシャルメディアカルーセルグラフィック

ムーディーで遊び心のあるこれらのプラムトーンは、インクとパステルのハイライターで満たされたスケッチブックの余白のように感じます。大胆な見出しには最も濃い紫を使用し、ラベンダーで二次パネルとキャプションを柔らかくします。ピーチのアクセントは、スライド番号やシンプルなアイコンセットなど、1つの繰り返し要素に最適です。ヒント: 最も濃い紫色に長い段落を置くのは避けてください。短くてパンチの効いたテキストのためにそれを保管してください。

media.ioを使って生成したplumノートの画像例

10) 森林ペーパー

HEX：#101d18 #244b3a #5f8c6d #dfe8d9 #f7f4ea

雰囲気：自然な、安定した、回复

おすすめ用途：水彩植物イラスト

自然で修復的なこれらの緑は、手作りの紙に対して日陰の葉のように見えます。アウトラインとタイトルには深い森を使用し、#244b3a と #5f8c6d でミッドトーンの葉を構築します。淡い緑と温かみのあるクリームは、カード、スライド、またはイラストの余白のための優しい背景を作成します。ヒント: 風通しの良い植物的な雰囲気を保つために、小さな領域で最も濃い緑色を保ちます。

media.ioを使って生成したフォレストペーパーの画像例

11) コバルトアクセント

HEX：#0b1020 #142a6e #2e5fff #d9e2ff #f2f4f8

雰囲気：シャープ、デジタル、高エネルギー

おすすめ用途：2d ui ヒーロー セクション モックアップ

シャープでデジタルなこのパレットは、レーザーブルーのカーソルグローを備えたナイトモードのように感じられます。ほとんどの表面を柔らかいグレーと淡いペリウィンクルに保ち、乱雑なインターフェースを実現します。プライマリアクション、選択したタブ、リンクにはコバルトを使用し、暗いネイビーが見出しをアンカーします。ヒント: 色を追加せずに、#142a6e から #2e5fff までのグラデーションを試して、モダン ヒーロー バナーを作成してください。

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

12) 砂岩モノ

HEX：#1b1b1b #4a4a4a #8a8a8a #d6d2c4 #faf7f0

雰囲気：ミニマルで時代を超越したギャラリーのような

おすすめ用途：雑誌レイアウトスプレッド

ミニマルでギャラリーのような、これらのグレーとサンドトーンは、石、鉛筆の鉛、アーカイブペーパーを思い起こさせます。タイポグラフィには黒とチャコールを使用し、マージンと背景ブロックには暖かいライトニュートラルを使用してください。ミッドグレーは、読者を導くキャプション、脚注、微妙なルールに適しています。ヒント: 色を追加する代わりに、紙の粒子や軽いノイズでテクスチャを導入します。

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

13) チェリー・オン・スレート

HEX：#1a2433 #334155 #64748b #f1f5f9 #e11d48

雰囲気：モダンで自信に満ちた、さわやかな

おすすめ用途：2d ui製品ランディングページモックアップ

モダンでさわやかなスレートブルースが安定したリズムを作り、チェリーレッドが自信に満ちたパンチを加えます。呼吸スペースには明るい背景を使用し、ナビゲーション、カード、微妙な境界線にはスレートシェードを使用してください。それでもプロフェッショナルに感じられるポートフォリオの色の組み合わせのアイデアの場合、チェリーはボタンとリンク間の単一のアクションカラーとして最適です。ヒント: 赤は長いテキスト ブロックから遠ざけ、マイクロ インタラクションやハイライトのために予約してください。

media.ioを使って生成したcherry on slateの画像例

14) オーロラミント

HEX：#0e1b2a #224b46 #4fd1c5 #d9fff8 #fff7e6

雰囲気：新鮮で、楽観的で、明るい

おすすめ用途：2d uiオンボーディング画面

フレッシュで明るく、ミントと深みのあるティールは、ガラスを通る光のように感じます。ネイビーを基本のテキストカラーとして使用し、ミントとペールアクアにパネル、カード、フレンドリーなイラストの形を運ばせます。温かいクリームは、インターフェースが冷えすぎないようにする微妙なカウンターバランスです。ヒント: オンボーディングにやりがいを感じさせるために、進捗状況指標と成功状態を最も明るくしておきましょう。

media.ioを使って生成したaurora mintの画像例

15) モカキャンバス

HEX：#231b16 #4b342a #8c6a4a #d8c3a5 #f2efe9

雰囲気：居心地の良い、職人技、プレミアム

おすすめ用途：製品ラベルデザインのリアルなスタジオショット

居心地の良い職人技のこれらのブラウンとクリームは、ローストコーヒー、レザージャーナル、漂白されていないキャンバスのように感じます。タイプとロゴのマークには最も暗い色調を使用し、ラベルとパターン全体のミッドブラウンで暖かさを作ります。淡いニュートラルは、パッケージングやルックブック用に組成物を清潔で高級な状態に保ちます。ヒント: 新しい色合いを導入せずに、ミッドブラウンレンジに微妙なエンボス加工またはホイル効果を追加して深みを高めます。

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

16) サンセットタイプ

HEX：#121826 #2a2f45 #ff8a5b #ffd2a6 #fff3e9

雰囲気：暖かく、モダンで、魅力的です

おすすめ用途：無地のタイポグラフィポスター

暖かく魅力的なこれらのトーンは、暗いスタジオの壁に当たる夕日の光のように見えます。深い藍色のペアを使用して大胆なタイプと強力なアライメントを実現し、ピーチとアプリコットを重ねてハイライトとサポート形状を実現します。淡いチークは、特に大きなポスターやカバースライドの場合、背景を柔らかく読みやすく保ちます。ヒント: 見出しの後ろにある apricot (#ffd2a6) を試して、追加のグラフィックなしで即座に階層を作成してください。

media.ioを使って生成した夕日タイプの画像例

17) アイシーラベンダー

HEX：#131a2a #2f3a5f #a3a6ff #e8e9ff #f7f7ff

雰囲気：クールで洗練された未来的な

おすすめ用途：2d ui設定ページモックアップ

クールで磨かれたこのラベンダー傾きのミックスは、つや消しガラスとさわやかな冬の空気のように感じます。タイトルとトグルには最も暗いネイビーを使用し、背景とカードに柔らかいライラックを塗ります。より明るいペリウィンクルは、ネオンを感じることなく、選択された状態やスライダーに理想的です。ヒント: #e8e9ff を使用して境界線を微妙に保ち、UI を風通しがよくモダンな状態に保ちます。

media.ioを使って生成したアイシーラベンダーの画像例

18) ヴィンテージシアノタイプ

HEX：#071a2a #0b3a53 #2c7da0 #a9d6e5 #eaf4f4

雰囲気：懐かしい、学術的、海洋的

おすすめ用途：編集誌の表紙レイアウト

ノスタルジックで海洋的なこれらのブルースは、シアノタイプのプリントや古いアトラスを反映しています。マストヘッドとストロングタイプブロックにはディープネイビーを使用し、サブヘッドとコールアウトにはミッドブルーを使用します。淡いアクアの色合いは、真っ白ではなく、まだ色づいているように感じられる清潔なネガティブな空間を作り出します。ヒント: #2c7da0 に細いルールと小さなアイコンを追加すると、学術的で細工された仕上がりになります。

media.ioを使って生成したヴィンテージシアノタイプの画像例

19) オリーブ台帳

HEX：#161c12 #3b4a2a #7c8a5b #e6e2d3 #c9a66b

雰囲気：遺産、土のような、信頼できる

おすすめ用途：スタジオでの文房具セットのモックアップ

伝統と信頼性の高い、オリーブとカーキの色調は、古い台帳、ワックスシール、使い古された本布を思い出させます。ロゴと見出しには深いオリーブを使用し、背景と紙のストックには淡い羊皮紙に寄りかかります。クラシックなポートフォリオカラーの組み合わせには、ミュートゴールドがルール、アイコン、シールにエレガントなアクセントを与えます。ヒント: アーカイブ感を維持するために、ゴールドはセクションごとに 1 つのハイライトのように小さく一貫して保ちます。

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

20) ローズクォーツコード

HEX：#1a1f2b #3b4252 #b48ead #e5d7e9 #f6f1f5

雰囲気：ソフト、スマート、コンテンポラリー

おすすめ用途：2d ui開発者ポートフォリオセクションモックアップ

柔らかくスマートなこれらのトーンは、ローズクォーツの光でウォームアップした夕暮れグレーのコードエディタのように感じられます。コード ブロック、ナビゲーション、見出しには charcoal ペアを使用し、チーク ニュートラルにページの背景を表示します。紫色の色合いは、子供っぽく見えずにタグ、リンク状態、微妙なデータハイライトに最適です。ヒント: 読みやすいポートフォリオ カラー パレットを作成するには、本文のテキストを #f6f1f5 よりも #1a1f2b に設定し、アクセントを 1 つの紫色の重みに保ちます。

media.ioを使って生成したローズクォーツコードの画像例

21) 粘土と雲

HEX：#1c2230 #3d4a5c #b7c3d0 #eef2f6 #c46a5a

雰囲気：バランスの取れた、プロフェッショナル、親しみやすい

おすすめ用途：2d ui ページモックアップについて

バランスが取れて親しみやすいこのミックスは、太陽で焼いた粘土を使用した嵐のデニムのように読めます。構造とタイポグラフィに深い青とグレーを使用し、雲の色調で大きなセクションとカードを明るくします。粘土は、CTA、タイムラインマーカー、または小さなイラストにフレンドリーなアクセントを作ります。ヒント: 影を微妙に保ち、境界線には #b7c3d0 を使用して、レイアウトを風通しの良いものに保ちます。

media.ioを使って生成した粘土と雲の画像例

ポートフォリオに合う色は？

ニュートラルは、作業サンプルをコントロールし続けることができるため、ほとんどのポートフォリオパレットのバックボーンです。読みやすさと階層が重要なレイアウトには、インク/ネイビー、チャコール、温かみのあるオフホワイト、ソフトグレーを考えてください。

次に、インタラクティブさと強調を示すアクセントカラーを 1 つ追加します。ボタン、リンク、チップ、主要なメトリクスです。コーラル、コバルト、ミント、ブロンズ、またはミュートゴールドはすべて、一貫して使用するとうまく機能します。

プロジェクトが視覚的に多様な場合は、ポートフォリオの配色を抑制し、画像に多様性を提供させてください。安定した背景+単一のアクセントは、通常、多くの競合する色合いよりもプレミアムに感じられます。

実際のデザインでポートフォリオパレットを活用する方法

色を選択するだけでなく、役割を割り当てることから始めます。1 つはプライマリ テキスト、1 つはセカンダリ テキスト、1 つはサーフェス (カード/セクション)、1 つは境界線/区切り、1 つはアクセント アクションです。これにより、ポートフォリオの色の組み合わせをページ全体で繰り返すことができます。

アクセシビリティのために意図的にコントラストを使用してください。明るい表面に暗いテキストを使用することは、ケーススタディや履歴書にとって最も簡単な勝利です。アクティブなタブ、ホバー状態、ハイライトなどの小さなUIモーメントに飽和色を保存します。

最後に、コンポーネント全体で一貫性を保ちます。ボタン、タグ、アイコン、チャート、コールアウトは同じアクセントロジックを共有する必要があります。そうすれば、サイト全体が装飾ではなくデザインされているように感じられます。

AIでポートフォリオパレットのビジュアルを作る

個人的なサイトの新しい外観を売り込む場合(またはブランドキットを構築する場合)、クイックモックアップを生成すると、完全な再設計にコミットする前にパレットを検証するのに役立ちます。シンプルなヒーロー、ケーススタディページ、または履歴書のレイアウトで、雰囲気をテストするのに十分であることがよくあります。

Media.io を使用すると、パレットのアイデアを素早くビジュアルに変えることができ、プロンプト、構図、照明を反復して、ニッチやオーディエンスにぴったりの色を感じることができます。

同じアクセント カラーを使用して、「ライト モード」と「ダーク モード」のコンセプトを 1 つ作成して、デバイス全体でブランディングを一貫性を保ってみてください。

次へ： オックスフォードブルーカラーパレット