ドット絵パレット編集 · インデックスカラーとLospec
スプライトそのものを対象にしたパレットエディタです。絵をインデックスカラーに変えてから項目の並びや色を変えても、全フレームの見た目はそのまま。Lospecのパレットを名前で取り込み、Aseprite・GIMP・Photoshopが読める形式でパレットを保存できます。
ドット絵のパレットはいくつかのランプでできています。ランプは肌・布・金属など1つの素材を暗い色から明るい色まで3〜6段で並べたもので、良いランプは段ごとに色相もずらし、影は寒色へ、光は暖色へ向かいます。Nerulioのピクセル作業画面では、ピクセル › 色相シフトのランプ…が描画色を中心にこうしたランプを作り（既定5色、24°シフト、基準色はそのまま）、カラーモード…が知覚的に最も近い色を選んでスプライトをインデックスカラーに変え、パレットメニューが結果を.gpl・.pal・.hex・.ase・.act・.jsonで保存します。
- .aseprite検証済み· Aseprite 1.3.18
- Palette files測定確認· read back
- Engine bundles検証済み· Godot 4.7.2 · Unity 6000.5
- Frame PNG · .nerulio通常ファイル
ランプ、色相シフト、インデックスカラー
明度だけを変えたランプは、影の部分がにごって灰色っぽくなります。そこでランプに沿って色相もずらします。最も暗い段は青紫へ寄って彩度が下がり、最も明るい段は黄色へ寄って彩度が少し下がり、中央が最も濃い色を持ちます。Nerulioは同じ明度差が同じに見える色空間OkLChで計算します。影は色相265°（青紫）へ、光は85°（黄みのオレンジ）へ、それぞれ入力した色相シフトの分まで回し、彩度は両端に向かって落とします。
インデックスカラーに変換すると、すべてのピクセルがパレット番号に置き換わります。ここで何を「最も近い」とするかが重要です。Nerulioは目の見え方に沿ったOklabで距離を測り、AsepriteはRGBの距離を使います。緑の#3e8948をPICO-8パレットに変換すると、OklabはPICO-8の緑#008751を選び、単純なRGB距離は灰褐色の#5f574fを選びます。ディザは最初オフです。ドット絵ではディザのノイズが質感のように見えてしまうためです。
インデックスのスプライトでは透明は独立したパレットの枠で、不透明なピクセルがそこに割り当てられることはありません。だから黒から始まるパレット（PICO-8がそうです）でも、ここでは黒いピクセルは黒のままです。変換は0番を透明にするのではなく、先頭に透明の枠を1つ足すからです。
- ランプ
- 1つの素材の色を暗い順から明るい順に並べた組。
- 色相シフト
- ランプに沿って色相を回すこと。影は寒色、ハイライトは暖色へ。
- OkLCh / Oklab
- 知覚的な色空間。Lは明度、Cは彩度、hは色相角。
- シェーディングインク
- 塗るたびにピクセルを選んだランプ上で1段ずつ動かすブラシ。
- インデックス表
- パレットの枠を動かすときに全セルへ適用する番号の付け替え。絵はそのまま保たれます。
例：#3e8948からNerulioが作るランプ
ピクセル › 色相シフトのランプ…を既定値（色数5、色相シフト24、最も暗く18 %、最も明るく94 %）で実行し、8ビットの色から測り直した値です。
段 hex L C h
0 #001a0d 0.19 0.044 159° 影：より暗く、色相は青寄り
1 #005129 0.38 0.097 154°
2 #3e8948 0.57 0.123 146° 基準色、そのまま保持
3 #91be77 0.75 0.108 135°
4 #e3f3c1 0.94 0.068 122° 光：より明るく、色相は黄色寄り
明度の段差 0.19 → 0.38 → 0.57 → 0.75 → 0.94（約0.19ずつ）
彩度は基準色（0.123）で最大、両端に向かって低下明るい側は24°いっぱい回りましたが（146° → 122°）、最も暗い段は170°ではなく159°になりました。それほど暗い色は8ビットのsRGBでは色相を表す余地がほとんどないためです。ランプは出発点として扱い、パレットパネルで枠をダブルクリックして1段ずつ調整してください。
できること
- カラーモードRGB ↔ インデックス：絵の正確な色、現在のパレット、DB32から選び、最も近い色はOklabで判定。ディザは初期設定でオフ（必要ならリニア光での組織的ディザ）。透明インデックスは別項目なので、黒は黒のまま残ります。
- パレットの項目を別の位置へドラッグすると、インデックスのスプライトは全セルがインデックス表に沿って書き直され、絵は変わりません。明るさ・色相・彩度・使用量で並べ替え、追加、削除、透明インデックスの指定。
- OkLCh上の色相シフトのランプ：暗い側は寒色へ、明るい側は暖色へずらし、段数・シフト量・最も暗い/明るい度合いをダイアログで設定。基準色は正確に保たれます。
- チームカラー差分：パレットでランプを選ぶと、チームカラーごとのランプが全フレーム・全レイヤーに対応づけられ、差分ごとに新しいスプライトになります。インデックスのスプライトならパレットを1回直すだけで全フレームの色が変わります。
- チェックパネルはフレームごとの色数を上限と比べ、パレット外の色とほぼ同じ色を洗い出し、はみ出したピクセルを選択するか1手順でパレット色にそろえます。
使い方
- スプライト、フレーム、.asepriteをこのページにドロップすると、パレットパネルにパレットが表示されたピクセル作業画面が開きます。
- ピクセル › カラーモードでインデックスとパレットの元（絵の正確な色、現在のパレット、DB32）を選び、すっきりしたドット絵ならディザはオフのままにします。
- 項目をダブルクリックして色を直し、ドラッグで並べ替えるか、ピクセル › Lospecパレットで最初に一度同意してからパレット名を入力します。
- パレットメニューから.gpl・.pal・.hex・.ase・.act・.jsonでパレットを書き出し、スプライトはインデックスの.asepriteで保存します。
パレットを確認する
- パレットメニューで明るさ順に並べ替えます。各ランプが暗い順から明るい順に続き、順番から外れた段がないはずです。
- Shift/Ctrl+クリックでランプを選び、シェーディングインクで塗ります。左クリックで1段明るく、右クリックで1段暗くなるはずです。
- パレット検査を実行します。ほぼ同じ色のペアが出たら、たいてい2つのランプがまとめられる色を分け合っています。
- パレットを書き出して読み込み直します。テストではすべての形式で書き出しと読み戻しが一致しました。
パレット形式の読み書き
すべてパレットメニューから読み書きします。「確認済み」は書き出して読み戻し、一致したという意味です。
| 形式 | 作られる場所 | 読み込み | 書き出し |
|---|---|---|---|
| .gpl | GIMP、Lospec、Aseprite | 可（AsepriteのRGBA拡張も） | 可、確認済み |
| .pal | Paint Shop Pro（JASC）、RIFFパレット | 両方式 | 可、確認済み |
| .hex | Lospec | 可 | 可、確認済み |
| .ase（スウォッチ） | Adobe Photoshop・Illustrator | 可（実際の16色ファイルで確認） | 可、確認済み |
| .act | Adobeカラーテーブル | 可 | 可、確認済み |
| .json / .aseprite | Lospec JSON / Asepriteのスプライト | 可 / そのパレット | JSONは可、確認済み |
トラブルシューティング
| 症状 | 考えられる原因 | 確認方法 | 対処 |
|---|---|---|---|
| インデックスに変換したら黒いピクセルがすべて透明になった（ほかのツールで作ったファイル） | パレットの0番が黒で、ツールが0番を透明色として使っている | AsepriteならSprite › Propertiesに透明色の番号が表示される | 透明の枠を別に持つ（Nerulioは先頭に1つ追加）。Asepriteでは透明色を変えるか枠を追加 |
| インデックスの結果がAsepriteと違う色を選ぶ | ここではOklab、AsepriteではRGBで最も近い色を測っている | 1ピクセルで比較：#3e8948はここでは#008751、RGB距離では#5f574f | Nerulioの知覚的な選択を使うか、Asepriteで変換したインデックスのファイルをここで開く |
| 1色を直したらあちこちのピクセルが変わった | インデックスのスプライトでは、パレットの枠はそれを使う全ピクセルの色 | 編集ダイアログに、この番号のピクセルはすべて一緒に変わると表示される | 新しい色は新しい枠として追加し、変えたい所だけ塗り直す |
| シェーディングインクが関係ない色へ飛ぶ | ランプを選んでいないので、インクがパレット全体の順番をたどる | オプションバーにパレット順でシェーディングすると表示される | 塗る前に1つのランプの色を暗い順にShift/Ctrl+クリックで選ぶ |
| 変換したスプライトがざらついて見える | カラーモードのダイアログでディザのパターンを選んだ | 拡大すると平らな面にチェッカーやBayerの模様がある | 取り消して、ディザ：なしで変換し直す |
ほかの方法
| 方法 | こんなときに向いています |
|---|---|
| Asepriteのパレット機能 | すでにAsepriteで作業しているなら。カラーバーで枠を編集し、Sprite › Propertiesで透明色を決め、シェーディングインクはカラーバーで選んだ色を使います。 |
| Lospecで公開されているパレット | ランプを自作するより実績のあるパレットから始めたいとき。どのソフトがどのファイルを読むかもLospecパレットの使い方にまとめています。 |
| エディタを使わず完成済みのフレームを色替え | 絵はできていてチームカラーや状態の色味だけ欲しいならランプの置き換えとチームカラー。 |
エンジン別の書き出しと検証方法
「検証済み」は、実際のCC0アセットから書き出したファイルを本物のエンジン・ツールで読み込み、元データと比較したという意味です。読み込んでいない形式はそのように表示します。
| 書き出し先 | ファイル | 検証 |
|---|---|---|
| .aseprite | layers · blend · opacity · locked · indexed palette · frames · tags | 検証済み Aseprite 1.3.18実際のAsepriteコマンドラインで、インデックスモード・レイヤー2枚・不透明度160の乗算・編集不可のロックレイヤーのまま開き直し、フレームのピクセルも一致しました。 |
| Palette files | .gpl · .pal · .hex · .ase · .act · .json | 測定確認 read back各形式を書き出して読み戻し、一致を確認。Asepriteが書いた.gpl・.pal・.hex・.actと実際のAdobe .ase（16色）も読み込めました。 |
| Engine bundles | Godot 4 · Unity 6 · Phaser 3/4 · PixiJS 8 … through Pack & Export | 検証済み Godot 4.7.2 · Unity 6000.5描いたスプライトはパック＆書き出しでまとめます。そのエンジン用ファイルは実在のCC0アセットで各エンジンに読み込んで確認済み（49回中47回合格。失敗2回はPhaser 3プリセットで避けられるPhaser 3.90のバグ）。 |
| Frame PNG · .nerulio | PNG-8 with the palette when an indexed frame fits it · project file | 通常ファイルどのツールでも使える通常ファイルで、エンジンでの検証は主張しません。 |
検証の根拠
整理のベンチマーク（元の1倍画像が分かっているCC0ケース69件）：サイズを正確に当てたのは81 %（±1px：90 %）、背景を残すとピクセルの74.0 %が完全一致。最も良い競合ツールはサイズ30 %（perfectPixel）、完全一致ピクセル44.6 %（unfake.js）。Asepriteで作った×4ニアレスト拡大は100 %、×3.78バイリニアは99.7 %一致で戻り、どちらもサイズは自動で判定。1pxのアウトラインとドロップシャドウはAsepriteの結果とピクセル単位で一致（1846px・705px）。ここで書いた.asepriteはAseprite 1.3.18でインデックスモード・レイヤー・合成モード・ロックのまま開きます。
制限
- ランプは基準色1つから作る出発点で、アートディレクションではありません。
- パレットは最大256色で、グレースケールのカラーモードはありません。
- 最も近い色はOklabでのみ判定し、AsepriteのようなRGB基準は選べません。
- ピクセル作業画面にないもの（Asepriteにはある）：レイヤーグループ、リンクセル、タイルマップレイヤー、参照レイヤー、RotSpriteと選択範囲の自由回転・拡縮（反転と90°のみ）、グラデーション・スプレー・輪郭・テキストツール、カスタムブラシ（四角・丸の1〜16px）、タイル状の連続描画、LuaスクリプトとCLI。
- 対称軸は数値入力で、キャンバス上でドラッグできません。タッチでは右ボタンがないため、背景色は入れ替えボタンかXで使います。
- 整理：JPEGは近い色で戻りますが（背景を残すと84 %がΔE 0.02以内）、完全一致はまれ（12 %）。模擬的な生成画像でサイズが完全一致したのは20 %（±1px：80 %）、実際の生成画像7枚は1枚も自動では合わせません。パネルが示すピクセルサイズを入力してください。
- インデックス変換はAsepriteのRGB距離ではなくOklabで最も近い色を選びます。テスト用スプライトでは68 %のピクセルが別の（見た目により近い）色になりました。Lospec検索が唯一の通信で、事前に確認します。
バージョンと出典
Nerulio：ランプ、インデックス表、Oklabのマッチング、すべてのパレットの読み書きを単体テストで確認しています（tests/studio-pixel.test.mjs）。96×144のCC0スプライトをPICO-8に変換すると、不透明ピクセルの100 %がOklabで最も近い色になり、黒い1708ピクセルはすべて黒のままでした（docs/STUDIO-PIXEL.md §6、T5）。上のランプの値はsrc/studio/pixel/ramps.jsで計算しました。Asepriteの動作は公式ドキュメントに基づきます。
参照した公式ドキュメント
よくある質問
インデックス変換でAsepriteと違う色が選ばれるのはなぜ？
最も近い色を知覚的な色空間Oklabで選ぶためで、AsepriteはRGBの距離を使います。テスト用スプライトをPICO-8に変換すると、不透明ピクセルはすべてOklabで最も近い色になり、RGBでの選択とは68 %のピクセルで異なりました。
Lospec検索は何を送信しますか？
入力したパレット名だけです。同意ダイアログのあと、Cookieとリファラーなしでlospec.com/palette-list/<名前>.jsonへのリクエストが1つ出ます。作業画面全体で唯一の通信で、断れば何も送りません。
PhotoshopやPaint Shop Proのパレットも読めますか？
はい。Adobeの.aseスウォッチと.act、JASC・RIFFの.pal、GIMPの.gpl、.hex、Lospec JSON、.aseprite内のパレットを読めます。各形式を書き出して読み戻し一致を確認し、実際の16色のAdobe .aseも読み込めました。
無料ですか？アカウントは必要ですか？
このページの機能はすべて無料で、アカウントなしで使えます。透かしや制限された書き出しはありません。
スプライトはアップロードされますか？
いいえ。Studioはこのブラウザのタブ内でデコード・パック・書き出しを行います。プロジェクトはブラウザ（IndexedDB）に自動保存され、.nerulioファイルとして保存できます。
Asepriteやエンジンのプラグインは必要ですか？
いいえ。.asepriteファイルはブラウザで読み書きします。エンジン別のバンドルには必要なものが入っています（Godotはインポート設定とシーン、UnityとGodotのタイルセットは小さなエディタースクリプト）。