ホーム コンピュータ カラーコードの変換 作成日: 2026年7月20日 21:33 カラーコードの変換 入力 入力形式HEXHEXカラーコード#3B82F6赤59緑130青246色相217彩度91明度60 コンピュータ カラーコードの変換 HEX・RGB・HSLの3形式でカラーコードを相互変換します。いずれかの形式で値を入力すると、他の2形式の値が算出されます。 入力形式 HEX RGB HSL 入力 カラーの入力 HEXカラーコード 先頭の # を付けても付けなくてもかまいません。3桁または6桁の16進数形式で入力します（例: #3B82F6 または #ABC）。 結果 値を入力すると計算結果が表示されます。 変換結果 HEX 6桁の16進数コードで表したカラーコード。 RGB 赤・緑・青それぞれ 0 から 255 の値で表した色。 HSL 色相を度数、彩度と明度をパーセントで表した色。 共有 レポートを印刷 リセット 埋め込み この計算機を埋め込む プレビュー このコードをページに貼り付けると計算機を表示できます。 コードをコピー この計算を共有 このリンクを開くと、入力した値がそのまま表示されます。 リンクをコピー 共有する XFacebookLINE メール 最終更新: 2026-06-23 カラーコードの変換 カラーコードの変換とは、1つの色をウェブで広く使われる3つの記法——HEX・RGB・HSL——の間で相互に書き換えることです。フロントエンド開発やデザイン作業では、デザインツールからコピーした HEX コードを CSS の RGB 関数に貼り付けたり、HSL 形式で色を微調整したりと、形式を行き来する場面が頻繁に発生します。 3つの色表現 RGB は赤・緑・青の3チャンネルそれぞれに 0 から 255 の整数を割り当て、光の混合比で色を定義します。HEX は同じ3チャンネルを16進数で表した形式で、各チャンネルを2桁の16進数に変換して #3B82F6 のように6桁のコードにまとめます。両形式は1チャンネルあたり同じ8ビットを格納しているため、HEX と RGB の変換は完全に可逆です。 HSL は別のアプローチを取ります。原色の混合比ではなく、色相（カラーホイール上の角度、0 から 360 度）・彩度（0 から 100 パーセント、グレーから鮮やかな色まで）・明度（0 から 100 パーセント、黒から純粋な色相を経て白まで）で色を記述します。「少し明るく、彩度を落とした青」といった感覚的な調整には HSL が適しており、CSS での色設計に広く使われています。 変換の仕組み HEX コードを RGB に分解するのは桁の読み換えで済みます。6桁を2桁ずつの3組に分割し、それぞれを 0 から 255 の10進数として読み取ります。 RGB から HSL への変換では、まず各チャンネルを 0 から 1 の範囲に正規化します。次に、最大値と最小値の中点から明度を、その差の広がりから彩度を、どのチャンネルが最大かによって色相を導きます。 M=max(r,g,b),m=min(r,g,b)L=12(M+m)S=M−m1−∣2L−1∣\begin{aligned} M &= \max(r, g, b), \quad m = \min(r, g, b) \\ L &= \tfrac{1}{2}(M + m) \\ S &= \frac{M - m}{1 - \lvert 2L - 1 \rvert} \end{aligned}MLS=max(r,g,b),m=min(r,g,b)=21(M+m)=1−∣2L−1∣M−m 計算例 #3B82F6 を例に取ります。3組のペアは 3B・82・F6 で、それぞれ 59・130・246 に相当するため、rgb(59, 130, 246) となります。各チャンネルを正規化すると約 0.231・0.510・0.965 です。最大チャンネルは青、最小チャンネルは赤なので、 L=12(0.965+0.231)=0.598≈60%S=0.965−0.2311−∣2(0.598)−1∣≈0.91=91%\begin{aligned} L &= \tfrac{1}{2}(0.965 + 0.231) = 0.598 \approx 60\% \\ S &= \frac{0.965 - 0.231}{1 - \lvert 2(0.598) - 1 \rvert} \approx 0.91 = 91\% \end{aligned}LS=21(0.965+0.231)=0.598≈60%=1−∣2(0.598)−1∣0.965−0.231≈0.91=91% 色相は約 217 度となり、hsl(217, 91%, 60%) が得られます。 変換時の誤差について RGB は各チャンネルを 256 段階で保持しますが、HSL は整数の度数とパーセントで値を丸めます。そのため RGB → HSL → RGB と往復変換すると、各形式の丸め処理の違いにより 1 ステップ分の誤差が生じることがあります。目視では判別できない差ですが、コードを比較する際に値が 1 単位ずれる原因がここにあります。HEX コードの背景にある16進数の演算についてはこちらの 基数変換ツール も参照してください。 よくある質問 (FAQ)HEXコードはどのようにRGBに変換されますか？6桁の16進数コードは、赤・緑・青の各チャンネルに対応する2桁ずつの組から成ります。各ペアは 00 から FF（10進数で 0 から 255）の数値を表します。たとえば #3B82F6 は 3B・82・F6 に分けられ、それぞれ 59・130・246 に相当するため、rgb(59, 130, 246) となります。両形式は同じ8ビットを格納しているため、HEX と RGB の変換は完全に可逆で情報の損失はありません。 HSLの各値はどのような意味ですか？HSLは原色の混合比ではなく、色相・彩度・明度で色を表す形式です。色相はカラーホイール上の角度（0 が赤、120 が緑、240 が青）を意味します。彩度は 0 パーセント（無彩色のグレー）から 100 パーセント（最も鮮やかな色）の範囲です。明度は 0 パーセント（黒）から 50 パーセント（純粋な色相）を経て 100 パーセント（白）まで変化します。 HSLは「もう少し明るく、薄い青に」といった直感的な色の調整をしやすい形式で、CSSでの色管理に広く使われています。 3桁のHEXコードは使えますか？使えます。3桁の省略形では各桁が2倍に展開されます。たとえば #ABC は #AABBCC と同じ色を指します。この省略形が使えるのは各チャンネルが同じ桁を繰り返す 4,096 色に限られるため、この変換ツールは常に6桁の完全な形式で結果を表示します。 変換を繰り返すと値が少しずれるのはなぜですか？RGBは各チャンネルを 0 から 255 の 256 段階で保持し、HSLは整数の度数とパーセントで値を丸めます。RGB から HSL に変換し再び RGB に戻すと、それぞれの形式が異なる単位で丸め処理を行うため、隣の段階の値になることがあります。差は最大で 1 ステップであり、目視では判別できませんが、往復変換で値が 1 単位ずれる原因がここにあります。 次のおすすめ 基数変換ツール 2進数・8進数・10進数・16進数など、基数2〜36の任意の整数を相互に変換できます。数値を入力して変換元と変換先の基数を選ぶだけで変換結果を表示します。 詳しく解説圧縮率の計算 圧縮前後のファイルサイズを入力して、圧縮率・節約容量の割合・節約バイト数を求めます。ファイル形式や圧縮アルゴリズムを問わず利用できます。 詳しく解説 200+ ツール · 10 言語対応 · 完全無料 データ・エンコードの他の計算 2の補数変換Base64エンコードのオーバーヘッドCRCチェックサムGit リポジトリのクローンサイズ推定IEEE 754 浮動小数点ビット表現カラーコードの変換 +18 more Show less QRコードの収容文字数Unixタイムスタンプ変換（エポック ⇄ 日時）UTF-8バイト数計算ツールオーディオファイルサイズ計算スループット (bps) 換算データ転送時間の計算テキスト → 2進数 / 16進数 / ASCII 変換ナイキストサンプリングレート計算ツールブルームフィルタ サイズ計算メガピクセル・印刷サイズ計算メモリアドレスビット計算圧縮率の計算画素密度（PPI・DPI）の計算画像ファイルサイズの計算色深度・ビット/ピクセルの計算動画ビットレートとファイルサイズ配信帯域幅の計算浮動小数点精度の計算 コンピュータの他のカテゴリ ネットワーク 1秒あたりパケット数(pps)の計算CIDRとサブネットマスクの変換IPv4 アドレス表現の変換IPv6サブネットの計算IPアドレス範囲の計算IPスーパーネットの計算MTU から MSS の計算TCP スループットの計算サブネットの計算レイテンシバジェットの計算帯域幅遅延積(BDP)の計算セキュリティ・暗号 chmodパーミッションの計算UUID 衝突確率の計算パスワードのエントロピーハッシュ衝突確率の計算アルゴリズム Luhn チェックディジットの計算シャノンエントロピーの計算ハミング距離の計算ビッグO記法の増加率レーベンシュタイン距離の計算信頼性・ストレージ APIレート制限の計算cron式デコーダー・次回実行時刻の計算MTBF・MTTR・稼働率 計算ツールRAID容量の計算クラウドストレージ料金の計算ハミング符号 ECCビット数計算ツール稼働率SLAの計算複合可用性の計算性能・待ち行列 Apdex スコアの計算CPU実行時間 計算ツールIOPS とスループットの変換M/M/1 待ち行列の計算M/M/c 待ち行列計算ツールアーランC 要員数計算アムダールの法則の計算キャッシュヒット率と実効アクセス時間（AMAT）の計算グスタフソンの法則の計算バッテリー駆動時間の計算ツールリトルの法則の計算平均メモリアクセス時間（AMAT）の計算 この計算機は役に立ちましたか？ 役に立った 改善が必要 改善が必要 どのような点が改善されると良いですか？ フィードバックを送信 Powered by OneCalc ↗
最終更新: 2026-06-23 カラーコードの変換 カラーコードの変換とは、1つの色をウェブで広く使われる3つの記法——HEX・RGB・HSL——の間で相互に書き換えることです。フロントエンド開発やデザイン作業では、デザインツールからコピーした HEX コードを CSS の RGB 関数に貼り付けたり、HSL 形式で色を微調整したりと、形式を行き来する場面が頻繁に発生します。 3つの色表現 RGB は赤・緑・青の3チャンネルそれぞれに 0 から 255 の整数を割り当て、光の混合比で色を定義します。HEX は同じ3チャンネルを16進数で表した形式で、各チャンネルを2桁の16進数に変換して #3B82F6 のように6桁のコードにまとめます。両形式は1チャンネルあたり同じ8ビットを格納しているため、HEX と RGB の変換は完全に可逆です。 HSL は別のアプローチを取ります。原色の混合比ではなく、色相（カラーホイール上の角度、0 から 360 度）・彩度（0 から 100 パーセント、グレーから鮮やかな色まで）・明度（0 から 100 パーセント、黒から純粋な色相を経て白まで）で色を記述します。「少し明るく、彩度を落とした青」といった感覚的な調整には HSL が適しており、CSS での色設計に広く使われています。 変換の仕組み HEX コードを RGB に分解するのは桁の読み換えで済みます。6桁を2桁ずつの3組に分割し、それぞれを 0 から 255 の10進数として読み取ります。 RGB から HSL への変換では、まず各チャンネルを 0 から 1 の範囲に正規化します。次に、最大値と最小値の中点から明度を、その差の広がりから彩度を、どのチャンネルが最大かによって色相を導きます。 M=max(r,g,b),m=min(r,g,b)L=12(M+m)S=M−m1−∣2L−1∣\begin{aligned} M &= \max(r, g, b), \quad m = \min(r, g, b) \\ L &= \tfrac{1}{2}(M + m) \\ S &= \frac{M - m}{1 - \lvert 2L - 1 \rvert} \end{aligned}MLS=max(r,g,b),m=min(r,g,b)=21(M+m)=1−∣2L−1∣M−m 計算例 #3B82F6 を例に取ります。3組のペアは 3B・82・F6 で、それぞれ 59・130・246 に相当するため、rgb(59, 130, 246) となります。各チャンネルを正規化すると約 0.231・0.510・0.965 です。最大チャンネルは青、最小チャンネルは赤なので、 L=12(0.965+0.231)=0.598≈60%S=0.965−0.2311−∣2(0.598)−1∣≈0.91=91%\begin{aligned} L &= \tfrac{1}{2}(0.965 + 0.231) = 0.598 \approx 60\% \\ S &= \frac{0.965 - 0.231}{1 - \lvert 2(0.598) - 1 \rvert} \approx 0.91 = 91\% \end{aligned}LS=21(0.965+0.231)=0.598≈60%=1−∣2(0.598)−1∣0.965−0.231≈0.91=91% 色相は約 217 度となり、hsl(217, 91%, 60%) が得られます。 変換時の誤差について RGB は各チャンネルを 256 段階で保持しますが、HSL は整数の度数とパーセントで値を丸めます。そのため RGB → HSL → RGB と往復変換すると、各形式の丸め処理の違いにより 1 ステップ分の誤差が生じることがあります。目視では判別できない差ですが、コードを比較する際に値が 1 単位ずれる原因がここにあります。HEX コードの背景にある16進数の演算についてはこちらの 基数変換ツール も参照してください。 よくある質問 (FAQ)HEXコードはどのようにRGBに変換されますか？6桁の16進数コードは、赤・緑・青の各チャンネルに対応する2桁ずつの組から成ります。各ペアは 00 から FF（10進数で 0 から 255）の数値を表します。たとえば #3B82F6 は 3B・82・F6 に分けられ、それぞれ 59・130・246 に相当するため、rgb(59, 130, 246) となります。両形式は同じ8ビットを格納しているため、HEX と RGB の変換は完全に可逆で情報の損失はありません。 HSLの各値はどのような意味ですか？HSLは原色の混合比ではなく、色相・彩度・明度で色を表す形式です。色相はカラーホイール上の角度（0 が赤、120 が緑、240 が青）を意味します。彩度は 0 パーセント（無彩色のグレー）から 100 パーセント（最も鮮やかな色）の範囲です。明度は 0 パーセント（黒）から 50 パーセント（純粋な色相）を経て 100 パーセント（白）まで変化します。 HSLは「もう少し明るく、薄い青に」といった直感的な色の調整をしやすい形式で、CSSでの色管理に広く使われています。 3桁のHEXコードは使えますか？使えます。3桁の省略形では各桁が2倍に展開されます。たとえば #ABC は #AABBCC と同じ色を指します。この省略形が使えるのは各チャンネルが同じ桁を繰り返す 4,096 色に限られるため、この変換ツールは常に6桁の完全な形式で結果を表示します。 変換を繰り返すと値が少しずれるのはなぜですか？RGBは各チャンネルを 0 から 255 の 256 段階で保持し、HSLは整数の度数とパーセントで値を丸めます。RGB から HSL に変換し再び RGB に戻すと、それぞれの形式が異なる単位で丸め処理を行うため、隣の段階の値になることがあります。差は最大で 1 ステップであり、目視では判別できませんが、往復変換で値が 1 単位ずれる原因がここにあります。
