カラーツール

色から作るパレット

色をひとつ選ぶと、それに合うカラーパレットが手に入ります。調和の種類、色数、トーンの広がりを選んでください。16進コードをコピーするか、エディタで開くか、ライブラリに公開できます。

基準色
配色
色 6
トーン

The base color and its opposite on the wheel — maximum contrast.

6 colors
#003FF7
#4F7CFF
#A6BDFF
#F7B800
#FFD24F
#FFE8A6

テーマ (任意)

ログインすると公開ライブラリに投稿できます。

1色からパレットを作る

ひとつの色から始めると、このツールが その色を起点にしたカラーパレット を色彩理論の法則に沿って作ります。調和の種類を選び、色数とトーンの広がり方を決めると、合う色が色相環から計算されます。勘で選ぶのではないので、実際にまとまります。ドット絵、ゲームUI、Webサイト、ロゴなど、1色のブランドカラーに脇役が必要なデザインにぴったりです。使いたい色が写真の中にありますか?まずは 画像カラーパレットツール で抜き出してから、それを軸にパレットを組み立てましょう。

配色の種類

  • 補色 — 選んだ色と、色相環の反対側にある色。大胆で対比の強い組み合わせ。
  • 類似色 — 隣り合う色どうし。落ち着いていて自然、目にやさしい配色。
  • トライアド・スクエア — 色相環を等間隔に分けた3〜4色 — 鮮やかなのにまとまります。
  • 分割補色 — ベースの色と、その補色の両隣にある2色 — 対比はやわらかめ。
  • モノクロ — ひとつの色相を彩度と明度で振り分けたもの — すっきりしたトーン配色。
  • 明暗のバリエーション — 選んだ色を、濃いシェードから明るいティントまで段階的に。

使い方

  • ピッカーで基準の色を選ぶか、16進コードを貼り付けます。
  • 調和の種類を切り替えて、パレットを並べて見比べます。
  • 色数とトーンの広がりを好みに合わせて設定します。
  • どの色見本も編集できます。仕上がったら16進コードをコピーしてプロジェクトへ。
  • パレットをエディタで開く ですぐに描き始められます。
  • 公開先 パレットライブラリ に置いて、再利用したり共有したりできます。

よくある質問

How do I make a color palette from one color?
Pick your base color, choose a harmony, then set how many colors and how much tonal spread you want. The matching colors are calculated from the color wheel instantly.
What do the harmony types mean?
Complementary uses the opposite color for high contrast. Analogous uses neighbours for a calm blend. Triadic and Square space colors evenly for vivid balance. Monochrome and Shades vary one hue tonally.
Can I choose the number of colors?
Yes. Set the palette size from 2 to 16 colors, and pick a Tones level (Subtle, Medium or Strong) to control how light-to-dark the palette spreads.
Is it free?
Yes — completely free, no signup. You only need an account if you want to publish a palette to the public library.
Can I edit the generated colors?
Yes. Click any swatch to adjust it, add or remove colors, then copy the hex codes, open them in the editor, or publish.
Where can I use the palette?
Copy the hex codes into any design or game project, open the palette straight in the pixel art editor, or save it to the library to reuse later.