基準の色

#4A6DA7
7
38
15°
0

カラーランプ

色をクリックすると HEX をコピーします。

生成はすべてブラウザ内で行われ、選んだ色はアップロードされません。

1つの基準色から、影(シャドウ)→中間→ハイライトへと滑らかに変化する「カラーランプ」を自動生成するツールです。カラーランプとは、明るさを段階的に変えた一連の色のことで、ドット絵(ピクセルアート)の陰影づけ(シェーディング)や、UI・デザインのカラースケール(トーン)作りに使われます。基準色を選び、段数(3〜16)・明暗の幅・色相シフト・彩度の変化を決めるだけで、すぐに色の階段ができあがります。仕組みはすべて HSL(色相・彩度・明度)での計算で、各段の明度を等間隔に並べ、暗い側と明るい側で色相を少しずらします(色相シフト)。これはドット絵で定番の「ハイライトは暖色寄り・影は寒色寄りにずらす」手法で、のっぺりしない生き生きとした陰影になります。彩度の調整で「影を鮮やかに/ハイライトを淡く」といった味付けも可能です。段数を奇数にすると基準色がちょうど中央に入ります。できたランプは、各スウォッチをクリックすれば HEX コードをコピーでき、「全部コピー」で一覧をまとめて取得、「PNG を保存」で帯状の画像として書き出せます(Aseprite・GIMP・Photoshop・Figma などへパレットとして読み込めます)。ドット絵の肌・金属・布などのマテリアル別ランプ作り、ゲーム素材の統一感、デザイントークン(色の段階)の下地づくりに便利です。生成・コピー・保存まですべてブラウザ内(端末内)で完結し、選んだ色はどこにも送信されません。

使い方

  1. 基準にしたい色を選びます(カラーピッカー、または HEX を直接入力)。
  2. 段数・明暗の幅・色相シフト・彩度を動かして、影〜ハイライトのランプを好みの見え方に整えます。
  3. 各色をクリックして HEX をコピー、または「全部コピー」「PNG を保存」でまとめて書き出します。

よくある質問

色はサーバーにアップロードされますか?

いいえ。ランプの生成・HEX のコピー・PNG の保存はすべてブラウザ内で行われ、選んだ色や生成結果はどこにもアップロード・保存・送信されません。あなたの端末内だけで処理されます。

カラーランプとは何ですか?

明るさを段階的に変えた一連の色(色の階段)のことです。ドット絵では影色からハイライトまでのランプを作って陰影をつけ、デザインでは1色から薄い〜濃いのカラースケール(トーン)を作るのに使います。

「色相シフト」は何のためにありますか?

ドット絵で定番の、影は色相を寒色寄り・ハイライトは暖色寄りに少しずらす手法のための設定です。明度を変えるだけの単調なランプより、色みが動いて生き生きとした陰影になります。0 にすれば色相は固定されます。

作ったランプをドット絵ソフトに読み込めますか?

はい。「PNG を保存」で各色を並べた帯状の画像として書き出せるので、Aseprite・GIMP・Photoshop などにパレットとして読み込めます。HEX を「全部コピー」してコード/設定に貼り付けることもできます。

基準色はランプのどこに入りますか?

段数を奇数にすると、基準色がちょうど中央(中間トーン)に入ります。偶数にすると中央付近の2色の間になります。明暗の幅を広げるほど、影とハイライトのコントラストが強くなります。