カラーパレットを数秒で作成

デザインの中で一緒に使うために選んだ色のまとまりです。ふつうはメインカラー、その色の明るいバリエーションと暗いバリエーション、そして1〜2色のアクセントカラーで構成されます。ロゴ、ブランディング、SNS、Webサイト、UI、イラストなどで使われます。

決まった一覧を表示するのではなく、その場でパレットを生成します。ベースとなる色相を選び、色彩調和のルール（類似色、補色、トライアド、モノクロマティック）に沿って5色を組み立てます。スタイルごとに明度と彩度の範囲が決まっているので、パステルならやわらかく、ネオンなら鮮やかな配色になります。エディターではスペースキーを押すと新しいパレットが作られ、気に入った色はロックして残せます。

まず、何を伝えたいかを考えましょう。暖色は親しみやすく元気な印象、寒色は落ち着きと信頼感、暗い色は上品な印象を与えます。色数は少なめにし、文字が読みやすいよう十分なコントラストを確保して、決める前に実際のデザインで試してみてください。

色同士が調和していると相性が良くなります。色相環で隣り合う色（類似色）、反対側の色（補色）、同じ色相の濃淡（モノクロマティック）などです。このサイトのパレットはすべてこのルールに沿っています。例は相性の良い配色で見られます。

どのパレットにもHEXカラーコードが付いていて、そのまま貼り付けられるCSSをコピーできます。サイトを読みやすくするために文字と背景のコントラストも確認しましょう。写真からパレットを作ることもできます。ほかのアイデアはWebサイト向けの配色で見つかります。

原色・二次色・三次色を円形に並べたものです。どの色同士が調和し、どの色同士がコントラストを生むかがひと目でわかるため、配色づくりの出発点になります。色の調和ツールで試してみてください。

原色は赤・青・黄の3色で、ほかの色を混ぜて作ることはできません。二次色は原色を2つ混ぜてできる色で、青と赤で紫、青と黄で緑、赤と黄でオレンジになります。原色と二次色を混ぜると三次色ができます。

モノクロマティック配色は、ひとつの色相の明るい色と暗い色だけで作る配色で、統一感があり上品に見えます。補色は青とオレンジのように色相環で向かい合う色同士のことです。組み合わせると最大のコントラストが生まれ、お互いを引き立てます。

はい。HEXカラーコードやCSSをコピーして、個人・商用を問わずどんなプロジェクトにも使えます。