WEB セーフカラー

機能

• 216 色をすべて表示。色相ごとに分類し、各行に色見本付き
• 各色を 6 桁表記と 3 桁短縮の両方で表示
• RGB と HSL も併記。スタイルシートにそのまま貼れます
• 任意の色を入力して、WEB セーフカラーかどうかを判定
• 含まれない場合は最も近い色と色差を表示
• 3 チャンネルの値を表示 —— 「なぜ必ず 3 桁に縮められるのか」の答えです
• 3 桁短縮（#f00）でも 6 桁（#ff0000）でも検索でき、大文字小文字は問いません
• 黒と白のどちらの文字が読みやすいかを WCAG コントラスト比つきで表示
• 216 の色値は検索できるドロップダウンに。色相ごとに並んでいます
• 空欄で全色を一覧。パレットとして眺められます
• 貼り付け耐性。例文の括弧や全角文字がついても検索結果は変わりません
• 色値は行ごとにコピーでき、デザインファイルやコードに貼れます

使い方

1. 入力欄に色値を打ちます（例：#f00、#336699）
2. 結果に 6 桁・3 桁短縮・RGB・HSL・チャンネル値、そして載せるべき文字色が出ます
3. 色集にない色（例：#123456）を打つと、最も近い色と色差を答えます
4. 空欄にすると 216 色すべてを色相ごとに一覧します

よくある質問

WEB セーフカラーは今でも意味がありますか？

技術的な制約としては、もうありません。 ここは正直に言うべき点です。前提だったのは「ディスプレイが 216 色しか出せない」ことで、現在の画面はそれよりはるかに多くの色を表示できるため、環境による色のずれを防ぐためにこれを使う必要はもうありません。 今も役に立つのは別の三点です。第一に均等な分布 —— 各チャンネル 6 段階なので、とても規則正しい既成のパレットになり、似た色ばかりを選んでしまう事故が起きにくい。第二に3 桁短縮で書けること —— CSS で `#ff0000` より `#f00` のほうが短く、覚えやすい。第三にツール間での一貫性 —— 古いシステム、グラフ用ライブラリ、ターミナルのテーマの既定パレットがまさにこの色集です。守るべき互換性リストではなく、使いやすいパレットとして扱ってください。

なぜ 216 色すべてが 3 桁に縮められるのですか？

各チャンネルが 0 / 51 / 102 / 153 / 204 / 255 の 6 値しか取らないからです。16 進ではそれぞれ `00` `33` `66` `99` `cc` `ff` で、2 桁が同じになります。したがって 6 桁表記の各桁は必ず繰り返しになり、半分に縮められます。逆も成り立ちます —— 3 桁に縮められる色は、各桁を展開すると同じ 2 桁の繰り返しになるので、チャンネル値は必ずこの 6 値のいずれかです。二つの条件は互いに必要十分なので、「3 桁短縮できる」と「WEB セーフカラーである」は同じ色の集合を指します。

「最も近い色」はどうやって求めていますか？

RGB 空間の重み付き距離（redmean の式）を使っています。同じ 255 の差でも、緑チャンネルの差は青チャンネルの差より大きく見積もられます —— 人眼は緑に最も敏感で、青に最も鈍いためです。三つのチャンネルを対等に扱う普通のユークリッド距離では、「見れば分かるほど違う」近似色がしばしば返ります。より正確な CIEDE2000 を使っていないのは、ここでの仕事が 216 個の候補から一つ選ぶことであり、redmean で肉眼上は区別できない程度に達し、しかも実装が三行で書き間違えようがないからです。

色差の数値の単位は何ですか？

単位はありません。 上の式が返す値そのもので、同じ式の他の値と比べて初めて意味を持ちます。0 に近いほど似ており、大きいほど離れています。色彩学の規格にある ΔE ではないので、他のツールの数値と比べないでください —— 距離の式が変われば、同じ色の組でも数値は変わります。役割は「その近似色がどれくらい近いか」を伝えることだけです。