カラーパレットとは

読み：からーぱれっと英語：Color palette

更新日：2026年10月31日

ひとことで

カラーパレットとは、デザインや作品で使う色を、あらかじめ数色の組み合わせとして選び、まとめたもののことです。

ひとに説明するなら

「カラーパレットは、使う色のセット。絵を描く人がパレットに絵の具を出しておくみたいに、最初に使う色を決めておく。そうすると、作品全体に統一感が出て、色選びに迷わなくなる」

使う色を、先に決めておく

カラーパレットは、作品やサイト、ブランドなどで使う色を、数色にしぼってまとめたものです。もとは、絵の具を出して混ぜる板のことでした。

使う色を先に決めておくと、ページや作品が増えても色がばらつかず、全体に統一感が出ます。毎回ゼロから色を選ぶ手間も減ります。

いいパレットの条件

  • 明るい色から暗い色まで、明るさの幅がある（文字と背景を組める）
  • トーン（明るさと鮮やかさの調子）に、ゆるやかなまとまりがある
  • 主役になる色と、支える色がある
  • 色数が多すぎない
いちばん暗い色#2A2925
深い緑#3F5A44
赤茶#A6542F
砂色#C9A88E
明るい灰#E2DED5
いちばん明るい色#F6F4EF
図1　暗い色から明るい色の順に並べた6色のパレットの例。明るさの幅があるので、文字と背景を組めます。

パレットを、どこでも使える形にする

決めたパレットは、使う道具に合わせた形で持っておくと便利です。デザインツールにはスウォッチ（.ase など）、Web には CSS 変数、アプリやデザインシステムにはデザイントークン、といった形です。

どの形でも、中身のカラーコードが同じなら、同じ色を使えます。

よくある勘違い

勘違いパレットの色は、全部同じくらい使う

ほんとうはベースの色は広く、アクセントの色は少しだけ。役割によって使う量は違います。

勘違いパレットに入れる色は、多いほど便利

ほんとうは多すぎると、どの色を使えばいいか迷い、統一感も出にくくなります。

COLOR JOURNEY で使うには

COLOR JOURNEY は、自然、季節、時代、ムードから生まれた6色のカラーパレットを、週に数回お届けしています。6色は暗い色から明るい色の順に並んでいて、カラーコードのほか、映像用の LUT（.cube）、グラデーション（CSS・PNG）、スウォッチ（.ase）、CSS・Tailwind・トークン JSON を、無料でダウンロードできます。商用利用もできます。

自分だけのパレットがほしいときは、AI Color Studio で、言葉や写真から6色をつくることもできます。

参考になるパレット

Horizon Code

Algorithm Garden

Midnight Server

Silicon Sunset

クイズ

  1. パレットに明るさの幅があると、何がしやすい？

    文字と背景を組む

    正解です。答えは「文字と背景を組む」。明るい色と暗い色があれば、読みやすい文字と背景を組めます。

    色数を増やす

    ちがいます。答えは「文字と背景を組む」。明るい色と暗い色があれば、読みやすい文字と背景を組めます。

    印刷のインクを減らす

    ちがいます。答えは「文字と背景を組む」。明るい色と暗い色があれば、読みやすい文字と背景を組めます。

  2. パレットを Web で使うときに便利な形は？

    CSS 変数

    正解です。答えは「CSS 変数」。CSS 変数にしておくと、名前で色を呼び出せます。

    LUT

    ちがいます。答えは「CSS 変数」。CSS 変数にしておくと、名前で色を呼び出せます。

    色温度

    ちがいます。答えは「CSS 変数」。CSS 変数にしておくと、名前で色を呼び出せます。

よくある質問

カラーパレットとは何ですか？

デザインや作品で使う色を、あらかじめ数色の組み合わせとして選び、まとめたものです。

カラーパレットは何色がいいですか？

決まりはありませんが、5〜6色くらいが扱いやすい数です。明るさの幅を持たせると使いやすくなります。

カラーパレットの作り方は？

雰囲気を決め、明るい色と暗い色を含めて、主役の色と支える色を選びます。写真や景色から色を拾う方法もあります。

カラーパレットを保存する形式は？

デザインツールにはスウォッチ、Web には CSS、アプリにはデザイントークンなど、使う道具に合わせた形で持つと便利です。

関連する言葉