同じ色を別の形式で表すしくみ
この変換器は、sRGBの色をHEX・RGB・HSLのいずれかで読み取り、別の形式のコードにします。市松模様の上に色を重ねたプレビューで、透明度の有無も確認できます。
まず入力形式を選ぶ
HEXなら3・4・6・8桁の16進数を入力します。RGBでは赤・緑・青をそれぞれ0～255の整数で指定します。HSLは色相0～360°、彩度と明度0～100%です。RGBとHSLのアルファは0～1で指定できます。出力先には入力と異なる形式を選んでください。
8桁のHEXは#RRGGBBAAの順で、末尾の2桁が透明度です。この表記はCSS Color仕様で定められています。画像ファイルの内部データをそのまま読み解く道具ではありません。
入力例で確かめる
#336699をRGBに変換するとrgb(51,102,153)、HSLではhsl(210,50%,40%)です。見本の青はどちらも同じです。
短い白のコード#FFFでは各文字を二回ずつ繰り返します。完全な表記は#FFFFFF、RGBの三つの値はすべて255です。
HSLで色相120°、彩度100%、明度50%を入力すると、出力はrgb(0,255,0)です。緑の成分だけが最大になります。
透明色は背景と一緒に見る
#00000080をRGBへ変換するとrgba(0,0,0,0.502)です。黒い成分はそのままですが、約半分だけ背景が透けます。白地と濃い地では見た目が変わります。
小数と見た目の差
RGBの値は整数に、HSLは小数第一位に、アルファは小数第三位に丸めて表示します。そのため往復変換で末尾の数字が変わることがあります。画面の設定も見た目に影響します。この道具はCMYKやDisplay P3への変換、文字と背景のコントラスト判定には対応していません。
色コードについての質問
短縮表記と透明度を区別すると、結果をCSSに使いやすくなります。
HEXの先頭に#は必要ですか？
入力時は省略できます。出力されるHEXには#が付きます。
#0008の最後の8は何ですか？
短縮形のアルファです。各文字を繰り返すと#00000088になります。
灰色の色相が0°なのはなぜですか？
彩度0%では色相を変えても灰色のままです。表示上の一定値として0°を使います。
色相360°は入力できますか？
はい。色相は円なので、360°は0°と同じ位置です。
プレビューだけで文字の読みやすさが分かりますか？
いいえ。コントラストを判断するには文字色と背景色の両方が必要です。
類似の計算機
同じトピックに関する次の計算機が役立つかもしれません：
- オンラインパスワードジェネレータ. 8文字、10文字、12文字以上のランダムな文字列で、安全で強力なパスワードを作成できます。
- オンラインHTMLビジュアルエディタ. HTMLコードを直接編集し、テキストやページの外観をリアルタイムでプレビューできます。
- 2進数から10進数への変換計算機. 2進数を入力し、10進数に変換します。
- 2進数から8進数への変換計算機. 2進数を入力し、8進数に変換します。
- 2進数から16進数への変換計算機. 2進数を入力し、16進数に変換します。
- 10進数から2進数への変換計算機. 10進数を入力し、2進数に変換します。
- 10進数から8進数への変換計算機. 10進数を入力し、8進数に変換します。
- 10進数から16進数への変換計算機. 10進数を入力し、16進数に変換します。
- 8進数から2進数への変換計算機. 8進数を入力し、2進数に変換します。
- 8進数から10進数への変換計算機. 8進数を入力し、10進数に変換します。
ソーシャルメディアで共有する
気に入ったら、計算機をソーシャルメディアプラットフォームで共有してください。あなたにとっては簡単で、プロジェクトのプロモーションにとっては有益です。ありがとうございます！