カラーソート
空白または改行で区切られた任意の 16 進カラーリスト（先頭の # の有無や 3 桁・6 桁を問わず）を読み取り、重複を排除し、選択した基準で結果をソートする。ほぼグレースケールのエントリ（彩度 5% 未満）は色相順序から取り出され先頭にグループ化、明度でソートされるので、虹のあちこちにランダムに散らばらない。各行はスウォッチ、16 進値、基礎となる HSL を表示。
—
ソート基準
方向
カラー数: 11
- #ef4444h 0° · s 84% · l 60%
- #f97316h 25° · s 95% · l 53%
- #eab308h 45° · s 93% · l 47%
- #22c55eh 142° · s 71% · l 45%
- #14b8a6h 173° · s 80% · l 40%
- #f8fafch 210° · s 40% · l 98%
- #64748bh 215° · s 16% · l 47%
- #3b82f6h 217° · s 91% · l 60%
- #0f172ah 222° · s 47% · l 11%
- #8b5cf6h 258° · s 90% · l 66%
- #ec4899h 330° · s 81% · l 60%
重複は削除される。ほぼグレー（S < 5%）は色相ソートの先頭に明度順で集まる。
使い方
- 16 進カラーを貼り付け — 1 行に 1 つ、カンマ区切り、または混在いずれも可。
- どの軸でソートするか、昇順か降順かを選択。
- ソートされたリストをコピーして戻す。
よくある質問
- 色相でソートしたときグレーが先頭にあるのはなぜ？
- 純粋なグレー（彩度 = 0）に対して色相は未定義であり、ほぼグレーに対しても不安定。低彩度の色を先頭にまとめて明度でソートすると、任意の色相に落ち着くよりも予測可能な結果が得られる。
- 色相 vs 輝度ソート — どちらを使うべき？
- 色相は色をファミリーでグループ化する（赤、次にオレンジ、次に黄色…）。輝度は Rec. 709 加重を使って目が知覚する明るさでソートする — コントラストで暗い/明るい背景に色を積み重ねるのに最適。
- 同じくらいの明るさに見える二色が、並べ替えでは大きく離れます。なぜ?
- HSLの明度は、色がどれだけ明るく見えるかを測った値ではなく、RGBの数値に対する算術だからです。彩度の高い黄と彩度の高い青が同じ明度の値を持つことがありますが、実際には一方が明らかに明るく見えます。目は青より緑にずっと敏感だからです。並び順を見た目に合わせたいときは、知覚的な明るさで並べ替えてください。
- hexにrgb()や色名が混ざった一覧も並べ替えられますか?
- ほかの表記は先にhexへ変換してください。ここでの入力はhexだけです。その変換自体にも意味があります。表記の違いに隠れていた重複が見えるからです。#ff0000、rgb(255, 0, 0)、redは同じ色の三通りの書き方で、hexの形になって初めて重複として認識され、取り除かれます。
関連ツール
Tailwind カラーパレット
Tailwind CSS のデフォルトパレット全体 — 22 色相 × 11 シェード（50〜950）— クリックで Tailwind クラス、HEX、rgb() としてコピー。
カラー 0 0
カラーパレット ジェネレーター
ベースカラーを選んで、クラシックなカラーホイールのハーモニーを取得 — 補色、スプリット補色、トライアド、テトラド、スクエア、アナロガス、モノクロマティック。
カラー 0 0
画像からカラーパレット抽出
画像をドロップすると Canvas で主要色を分析しパレット抽出 — HEX をコピーまたは一括取得。
カラー 0 0
CSS 名前付きカラー
147 個の CSS / X11 named color — HEX・RGB・ライブスウォッチ、検索・色相系列別グループ化。
カラー 0 0
波長→色 変換器（nm → sRGB）
光の波長（380〜780 nm、可視光）を sRGB 近似色に変換 — クリック可能な虹グラデーションバーと、実際の太陽分光から得たフラウンホーファー吸収線リファレンス付き。
カラー 0 0
ランダムカラー生成
ランダムな色を HEX・RGB・HSL でまとめて生成 — 個数を選び、ワンクリックでコピー、すぐに再生成してデザインの着想に。
ランダム 0 0