HEXからRGB・HSLへの変換：3桁表記と丸めの違い

3桁のHEXは3つの数字を繰り返す表記です

#369 と #336699 は同じ色です。各桁を二回ずつ繰り返します。0 を後ろに付けて #306090 にする方法ではありません。RGB は rgb(51, 102, 153) です。公式の CSS HEX 規則を下に示します。

W3C CSS Color 4: HEXカラー表記

Moyoutil は前後の空白と先頭の # を除き、3桁または6桁の HEX を処理します。大文字と小文字は区別せず、結果の HEX は大文字で表示します。色の選択または HEX の入力で、プレビューと結果が更新されます。

実際のツール関数で再現した4つの入力

プロジェクトの color 関数で2026年10月5日に実行した結果です。HSL はツールが整数に丸めた表示値です。RGB は HEX 入力を解釈した整数のチャンネル値です。

この表は、画面から目で色を測定した結果ではなく、コード入力を変換した出力です。既存の HEX と RGB 値を一緒にアーカイブすると、HSL 表示精度と区別しやすくなります。

灰色では、色角0は赤という意味ではありません

ツールは、グレー入力に HSL 色角 0 を表示します。ただし、彩度が​​0%の場合、色角は表示色を変えません。したがって、hsl(0,0%,50%)の最初の数字だけを見て赤と判断してはいけません。色角、彩度、明度を一緒にお読みください。

W3C CSS Color 4: 彩度 0 で影響のない色角

丸められた HSL は元の RGB をそのまま復元しません

ツールは#123456をhsl(210,65%,20%)としてマークします。この丸められた HSL を sRGB に変換した後、各チャネルを 0 ～ 255 の範囲の整数に丸めると rgb(18, 51, 84)、つまり #123354 になります。元のRGBはrgb(18,52,86)なので、2つのチャンネルが異なります。すべての色で違いが生じるという意味ではありません。

W3C CSS Color 4: HSLからsRGBへの変換

正確なオリジナルコードを必要とするタスクでは、結果のHEXまたはRGBを使用してオリジナルもアーカイブしてください。 HSLは調整用の出発点として使用しますが、このツールの整数表示を損失のない往復変換値として扱わないでください。ツールにはHSLを入力してHEXに戻す機能はありません。

4桁・8桁のHEXとサポート範囲を区分してください

CSSにはアルファチャンネルを含む4桁・8桁のHEXもあります。しかし、現在Moyoutilコンバータはこれを受けていません。 #12345678と#abcdはエラーになり、RGBの結果として処理されません。アルファ桁を切り取ると透明度情報が消えるので、同じ色情報だとは思わないでください。

W3C CSS Color 4: アルファチャンネル付き HEX

1. 元のカラーコードと使用場所を最初に保管します。
2. カラー変換ツールに3桁または6桁のHEXを入力し、結果のHEXとRGBを確認します。
3. Result Copyを押すと、HEX、RGB、HSLの3行をコピーします。必要な表記1行を選択して使用します。
4. 整数HSLを再利用するときは、丸めの違いを考慮してください。実際の背景と文字の組み合わせの読みやすさも別々に確認します。

このツールはカラーコードコンバータであり、カラーコントラストフィットチェック、ICCプロファイル変換、印刷用のCMYK変換機能は提供していません。

よくある質問