カラーソート
カラー
空白または改行で区切られた任意の 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 加重を使って目が知覚する明るさでソートする — コントラストで暗い/明るい背景に色を積み重ねるのに最適。
関連ツール
色覚シミュレーター
8 種類の色覚異常（CVD）で画像がどう見えるかを再現。
カラー00
CSS Box Shadow ジェネレーター
複数レイヤーで CSS box-shadow を視覚的にデザイン — リアルタイムプレビュー + CSS / Tailwind 出力。
カラー00
カラーフォーマット変換
任意の色を HEX・RGB・HSL・HSV・OKLCH・CSS 変数で一括変換。
カラー00
CSS グラデーションジェネレーター
線形・放射状 CSS グラデーションを多段カラーストップでデザインし、コードをコピー。
カラー00
カラーパレット ジェネレーター
基準色から 6 種類のスキームで調和の取れたパレットを作成。
カラー00
カラーコントラスト チェッカー
文字／背景のコントラストを WCAG AA・AAA 基準でチェック。
カラー00