短縮hex展開

CSSやデザインツールでは、完全な6桁の#ff00aaではなく、#f0aのような3桁の短縮表記で色を書くことがよくあります。ブラウザは各16進桁を倍にして各チャネルを1バイトにすることで、その短縮形を展開します。この短縮hexカラー展開ツールは、先頭のハッシュの有無を問わず3桁コードを受け取り、各文字が16進桁であることを検証し、決定的な6桁展開と対応する赤・緑・青のチャネル整数を返します。フロントエンド開発者は、デザイントークンが短いコードで届き、スタイルシートやスナップショット、デザインシステムが長い形式を必要とするときに使います。学生やQAスクリプトは、手書きのパレットがCSS Color Moduleの規則とバイト単位で一致するか確認するために使います。

3桁短縮の意味と展開の仕組み

CSSでは、任意のハッシュの後に3桁で16進カラーを書けます。赤・緑・青にそれぞれ1ニブルです。公式の展開規則は単純かつ絶対で、各桁を一度繰り返して3文字を6文字にします。

例えば#abcは#aabbccに、#f0aは#ff00aaに、#000は6つのゼロに展開されます。これはヒューリスティックでも知覚的な近似でもなく、ブラウザがスタイルシートを解析するときに適用するのと同じ写像です。この計算機はその写像をそのまま符号化します。

3桁の短縮形を渡すと、エンジンは安定した正規形のために桁を小文字化し、各ニブルを倍にし、ハッシュ付きの完全な文字列、ハッシュなしの6桁、大文字A–Fを好むスタイルガイド向けの大文字形、ハッシュあり・なしの正規化3桁短縮、入力に先頭ハッシュがあったかを示す真偽値、および0から255の整数チャネルr・g・bを返し、同じ色を2回目の変換なしでRGBツールに渡せます。

第4チャネルを作ったり、アルファを保持したり、0x接頭辞を有効なCSSカラーとして扱う経路はありません。すでに6桁がありチャネル番号だけが必要なときは専用のhex→RGBや多形式変換を使い、入力が意図的に短く、明確な検証契約のもとで長形式を得ることが仕事のときはこのページを使ってください。

短縮hex展開が役立つ場面

デザインシステムは、古いスタイルガイドやFigmaプラグイン、手書きメモからブランド色を3桁コードで受け取ることが多い一方、現代のトークンパイプラインとCSSカスタムプロパティは、grepやスナップショット差分、1対1のチャネル対応のために6桁ハッシュを好みます。

境界で一度だけ短縮形を展開すれば、各チームが倍加規則を微妙に違う実装をするのを避け、下流のすべての消費者が長形式を共有できます。Web開発の教材は入力しやすい3桁色を早期に紹介し、その後に展開を説明させます。決定的なツールがあれば、#fffが白であること、#f0aが欠けた桁を捏造したものと同じではないことを示せます。

QAやアクセシビリティのパイプラインは色を混在形式で保存することがあり、コントラスト検査の前に短いコードを6桁へ正規化すれば、一方が短縮形でもう一方が長形式のときの誤不一致を避けられます。

他の色空間が必要なときはRGBやHSL変換と組み合わせ、すでに長いコードや不正文字を推測せず拒否する厳しい検証契約のもとで3桁から6桁だけが仕事のときは、このページに集中してください。