Hex ↔ RGB ↔ HSL変換ツール
hexコードまたはRGBトリプルを入力すると、他の形式に変換してサンプルを表示します。
カラーコードは恣意的なものではありません——理解する価値のある正確な論理があります
#3A7BD5のような16進数カラーコードは、赤・緑・青の3つのカラーチャンネルを2桁の16進数ペアとしてエンコードしています。#3Aは10進数で58、#7Bは123、#D5は213です。この3つの数値が、画面上で色を生み出すために赤・緑・青の光がどれだけ混合されるかを正確に定義します。各チャンネルは0〜255の範囲をとるため、16,777,216通りの16進数カラーが存在します。CSS・SVG・HTMLキャンバス・ほとんどのデザインツールはネイティブで16進数を受け付けます。
HSL（Hue・Saturation・Lightness）は、人間の色の感じ方に対応するため、デザイン作業ではRGBよりも使いやすいことが多いです。Hue（色相）はカラーホイールの位置（0〜360度）、Saturationは色の鮮やかさ、Lightnessは明るさです。HSLでLightnessの値だけを調整すると、色相を変えずに確実に色の濃淡が作れます——RGBではこれを予測通りに行うのが本当に難しいのです。
Frequently asked questions
16進数の3桁と6桁のカラーコードの違いは何ですか？
3桁の16進数（#RGB）は、各桁を2回繰り返す6桁の16進数（#RRGGBB）の省略形です。つまり<code>#A3F</code>は<code>#AA33FF</code>に展開されます。この省略形は、各チャンネルの2桁が同じ場合にのみ使えます。CSSで数文字節約できますが、全1,677万色のうち4,096色のサブセットを表します。迷ったときは6桁を使いましょう——常に有効で曖昧さがありません。
画面上の色が印刷すると異なるのはなぜですか？
画面は<strong>加法混色</strong>（RGB：光を加え合わせる）を使い、プリンターは<strong>減法混色</strong>（CMYK：インクが光を吸収する）を使います。RGBはCMYKでは再現できない鮮やかな蛍光色を表現できます——それらは印刷の「色域外」です。印刷プロジェクトをCMYKに変換せずに16進数/RGBでデザインすると、プリンターのカラーマネジメントソフトウェアが色を近似し、予想より暗くなることが多いです。
アルファチャンネルとは何で、CSSではどのように機能しますか？
アルファは0〜1のスケールで不透明度を制御します。CSSでは、<code>rgba(58, 123, 213, 0.5)</code>はその色を50%の不透明度でレンダリングします。8桁の16進数形式<code>#3A7BD580</code>は最後の2桁にアルファをエンコードします——16進数の<code>80</code>は10進数で128、つまり約50%の不透明度です。モダンブラウザでの8桁の16進数のサポートは問題ありませんが、古いIE時代のコードベースでは問題が生じることがあります。幅広い互換性には<code>rgba()</code>形式の方が安全です。
ウェブサイトで見た色の16進数コードを調べるにはどうすればよいですか？
最も確実な方法はブラウザのDevToolsです。任意の要素を右クリックして「検証」を選び、スタイルパネルでカラープロパティを探します——ChromeとFirefoxはどちらも、16進数・RGB・HSLの値を表示するクリック可能なカラースウォッチを表示します。または、<strong>ColorZilla</strong>などのブラウザ拡張機能を使えば画面上の任意のピクセルをスポイトで取得できます。デザインアセットの場合、FigmaやAdobe XDはフィルインスペクターで直接16進数の値を表示します。
Advertisement
728 × 90