カラーコード変換（HEX・RGB・HSL）

HEX（#3B82F6）・RGB（59, 130, 246）・HSL（217, 91%, 60%）を相互に変換します。PowerPointにもCSSにもそのまま貼れる形で並べてコピーできます。

入力した内容はブラウザの中だけで処理し、送信しません。

HEX・RGB・HSLのどれでも構いません。「#3B82F6」「59, 130, 246」「hsl(217, 91%, 60%)」のように、手元にある形のまま貼ってください。

押すとコピーします。PowerPointの「RGB」欄には「#」や括弧の無い形をお使いください。

カラーコード変換ツールでできること（HEX・RGB・HSLの相互変換）

色の指定を、HEX（#3B82F6）・RGB（59, 130, 246）・HSL（217, 91%, 60%）の間で相互に変換します。入力欄は1つだけで、貼られた文字列からどの書き方かを判別するので、手元の値がどれなのかを先に見分ける必要はありません。

出す形は3つだけではありません。同じHEXでも「#」が必要な場所と不要な場所があり、同じRGBでも「rgb(...)」ごと必要な場所と数字だけ必要な場所があります。どちらが必要かを考えずに済むよう、HEX・RGB・HSLそれぞれについてCSS向けの形と数字だけの形を分け、赤・緑・青を1つずつ入れる欄に向けてR・G・Bの値も並べています。

色名（red・whiteなど基本の色）や、不透明度つきのrgba・8桁HEXも読み取ります。読み取れた色は大きな面で表示し、その上に白と黒のどちらの文字が読めるかも合わせて確認できます。

カラーコードを変換する3ステップ

  1. 入力する手元の色コードを「色を貼り付けるか、選んでください」の欄に貼り付けます。「#3B82F6」でも「3b82f6」でも「59, 130, 246」でも構いません。色が決まっていなければ「色を選ぶ」や「見本から選ぶ」から選ぶこともできます。
  2. 結果を見る貼った瞬間に、「変換結果」にHEX・RGB・HSLと、それぞれの「数字だけ」の形が一覧で出ます。
  3. コピーする貼りたい先に合う欄を押すとコピーされます。PowerPointなら「HEX（#なし）」、CSSなら「HEX」です。

HEX（16進数）・RGB・HSLの違いと、どれをどこへ貼るか

HEXは赤・緑・青の量を16進数2桁ずつ並べて1つの文字列にした書き方で、#3B82F6の3Bが赤、82が緑、F6が青にあたります。RGBは同じ3つの量を10進数の0〜255で並べた書き方です。表している色はまったく同じで、書き方だけが違います。

HSLだけは考え方が違い、色相（何色か）・彩度（鮮やかさ）・明度（明るさ）の3つで色を表します。赤・緑・青の量をいじると色みごと変わってしまうのに対し、HSLなら明るさの数字だけを動かして同じ色の濃淡を作れます。

PowerPointやExcelに色コードを貼るとき「#」を外す理由

PowerPoint・Word・Excelの「その他の色」にある入力欄は、6桁の英数字だけを受け取る作りになっています。Webから写した「#3B82F6」をそのまま貼ると先頭の「#」で弾かれ、「無効な値です」と出るか、何も起きずに元の色へ戻ります。

同じ画面には赤・緑・青を1つずつ入れる欄もあり、そちらは「59」「130」「246」と数字だけを入れます。このツールが「HEX（#なし）」と「RGB（数字だけ）」を独立した欄として出しているのは、この2通りの入れ方に合わせるためです。

HSLで色みを保ったまま明るさ・鮮やかさだけを変える

資料のテーマカラーから濃淡違いを作るとき、HEXやRGBの数字を勘で動かすと色みまでずれます。HSLに変換してから明度の数字だけを上下させると、同じ色相のまま薄い版・濃い版を作れます。

作った値はこのツールに貼り直せばHEXやRGBへ戻せるので、HSLで調整してからPowerPointへ持っていく、という往復ができます。なお色は小数を含むため、HSLへ変換して戻すと元のHEXから1段ずれることがあります（表示のために整数へ丸めているためで、見分けはつきません）。

カラーコードの変換が必要な場面（資料・スライド・Web）

会社のテーマカラーをスライドに合わせる
ブランドガイドラインに載っているのはHEXだけということが多く、PowerPointに入れるには赤・緑・青を表す3つの数字か「#」なしの6桁が必要です。どちらも同時に出ます。
Webサイトと配布資料で色をそろえる
CSSに書いた色をそのまま資料へ持っていくとき、表記を移し替える手間をなくせます。逆に資料の色をWebへ持っていくこともできます。
Canvaや画像編集ソフトで同じ色を使う
多くのデザインツールはHEXを受け付けます。手元にRGBの数字しかない場合も、貼れば「#」付きのHEXに変わります。
文字が読める背景色かを確かめる
選んだ色を大きな面で表示し、その上に白と黒のどちらの文字なら読めるかを自動で判定して見せます。スライドの背景色を決めるときの目安になります。

カラーコード変換ツールのよくある質問

カラーコードのHEXとRGBは何が違うのですか？
同じ色を別の書き方で表しているだけで、色そのものは変わりません。HEXは16進数6桁で「#3B82F6」のように1つの文字列にまとめた書き方、RGBは赤・緑・青の量を0〜255の数字で「59, 130, 246」と3つ並べた書き方です。Webでは前者、PowerPointやExcelの色設定では後者を求められることが多いため、このツールは両方を同時に出しています。
PowerPointに貼ると色コードが受け付けられません。
先頭の「#」が原因であることがほとんどです。PowerPoint・Word・Excelの「その他の色」に入れる欄は6桁の英数字だけを受け取り、「#」が付いていると弾きます。このツールは「#」を外した形（3B82F6）を「HEX（#なし）」の欄として出しているので、そちらをコピーしてください。
手元の値がHEXなのかRGBなのか分かりません。
分からないまま貼って構いません。入力欄は1つで、貼られた文字列からどの書き方かを判別します。「#3B82F6」「3b82f6」「rgb(59, 130, 246)」「59, 130, 246」「hsl(217, 91%, 60%)」「red」のいずれでも読み取ります。
HSLは何に使うのですか？
色みを変えずに明るさや鮮やかさだけを動かしたいときに使います。HSLは色相・彩度・明度の3つで色を表すため、「同じ青のまま少し薄く」といった調整が1つの数字を動かすだけで済みます。資料のテーマカラーから濃淡違いを作るときに便利です。
半透明の色も扱えますか？
扱えます。rgba(59, 130, 246, 0.5) や8桁の #3B82F680を貼ると不透明度を読み取り、rgba・hslaと8桁HEXの形で出力します。不透明な色のときは8桁の欄を出しません（貼り付け先が8桁を受け付けないことがあるためです）。
入力した色はどこかに保存されますか？
保存されません。変換はすべてお使いのブラウザの中で行われ、入力した値が外部に送信されることはありません。登録もログインも要らず、回数の制限も無いので、何度でも無料で使えます。