カラーパレット

ウェブサイトのカラーパレット

ウェブサイトでは、背景、テキスト、ボタン、リンク、通知と、色ごとに役割があります。この12のパレットはそれを前提に、明るいまたは暗い背景、読みやすいテキスト色、ボタン用のアクセントカラーで構成しています。HEXコードをそのままCSSやサイト作成ツールにコピーしてお使いください。

クリーンなSaaSブルー

ほぼ白の背景に、ごく濃い青のテキストと鮮やかな青のボタン。

落ち着いたコーポレート

法律事務所、コンサルティング会社、製造業の企業サイトに。

温かみのあるECサイト

温かみのある背景の上で、オレンジが購入ボタンを引き立てます。

ダークモードにグリーン

重ねた暗い背景に明るいテキスト、操作部分にはグリーンのアクセント。

ナチュラル&オーガニック

自然食品店、家庭菜園、ウェルネス系のサイトに。

親しみやすいパステル

親近感のある配色。ダークなブルーグレーでテキストの読みやすさを確保します。

エディトリアルに赤

ブログ、雑誌、メディアに。赤でリンクや見出しを示します。

テック系パープル

デジタル製品、オンライン講座、AIツールでよく見られます。

ターコイズとコーラル

補色の関係にある2つのアクセント。ひとつはボタン、もうひとつは通知に。

ダークラグジュアリー

写真が主役のホテル、レストラン、プレミアムブランドに。

ヘルス&ウェルネス

清潔感があり穏やか。クリニックやセラピーに向いています。

サンドベージュとティール

温かみと信頼感を両立。観光、不動産、カフェに。

色をタップするとHEXコードをコピーできます。鉛筆アイコンからエディターでパレットを開いて編集できます。

60:30:10の法則を使う

メインカラー(通常は背景)をページの約60%、サブカラーを30%(セクション、カード、ヘッダー)、アクセントカラーを残りの10%に使いましょう。アクセントはボタンやリンク専用にすると、ユーザーがどこをクリックすればよいか迷いません。

テキストのコントラストを確認する

アクセシビリティのガイドラインWCAGでは、通常のテキストに最低4.5:1のコントラスト比を求めています。白地に薄いグレーはおしゃれに見えますが、特に屋外のスマートフォンでは読みにくくなります。公開前にコントラストチェッカーで確認しましょう。

状態や通知の色を決めておく

ブランドカラーのほかに、エラー(赤)、成功(緑)、警告(黄色やオレンジ)の色も必要です。パレットになじむ色を選び、フォームやメッセージで常に同じ使い方をしましょう。

これらのパレットで使われている色

ホワイトスモークプラチナブルーブラック白スレートグレーリネンシャンパンコーラルマホガニーコールブラックエボニーオニキスオフホワイト生成り色セージグリーンパステルピンク

よくある質問

ウェブサイトには何色使えばいいですか?

通常は3〜4色で十分です。背景色、テキスト色、メインカラー、アクセントカラーに、通知用の色を加えます。

ウェブサイトのボタンに最適な色は?

唯一の正解はありません。大切なのは、ボタンが背景とコントラストがあり、その色をページ内でほかの用途に使わないことです。

カラーパレットをウェブサイトに設定するには?

HEXコードをCSSのカラー変数や、WordPress、Wix、Shopifyなどのサイト作成ツールのグローバルカラー設定にコピーしましょう。

デザインのパレットをもっと見る

さらに探す