RGB を HEX に換算 Red Green Blue ↔ Hexadecimal 無料 オンライン 安全
RGB で値を入れれば、その場で HEX として読めます。計算はあなたのブラウザーの中で行われ、どこへも何も送られません。そして答えが何に左右されるかは、前提にせず下に書いてあります。
アップロードなし
この書き方はどこから来たか
十六進とRGBは、同じものを二通りに書いたものです。画面の色は三つの数——赤と緑と青の光をどれだけ出すか——で、どれも〇から二五五まで、つまり一バイトです。十六進はそのバイトを十六を底として書くだけですから、#FF8800 と rgb(255, 136, 0) は同じ画素への同じ命令です。HSLが考え出されたのは、どちらも人には読めないからでした。色相を色相環の角度で、彩度と明度を百分率で与えますから、作り手は三つの数を計算し直さずに何かを明るくできます。CMYKはまったく別の世界、光ではなく「インキ」のものです。減法で、四枚の版から組み立てられ、画面が出せるすべての色には届きません。画面は光を出し、紙は光を返すだけだからです。
どこで出会うか
十六進は、様式表に打ち込むものであり、意匠の道具が手渡してくるものです。RGBは色に計算が要るところならどこにでも現れます。階調、透明度、濃淡を算出する符号。HSLは手で配色を整えるときに手が伸びる書き方です。したいと思う変更は、たいてい三つの数のどれか一つの変更だからです。CMYKは印刷所が求めるもので、そこへ換算する瞬間こそ、意匠が光であることをやめてインキになる瞬間です。
よくある質問
私のCMYKの結果が印刷所のものと違うのはなぜですか。
唯一正しい換算というものが存在しないからです。このページの計算は、機器に依らない素朴なもので、出発点や大まかな相当値が要るときにはこれが正しい答えです。印刷所は、特定のインキと紙と印刷機を織り込んだ色の形を通して換算します。同じRGBの色でも、光沢紙と非塗工紙とでは別のCMYK値になります。きっちり合わせねばならないものについては、式を信じるより印刷所にその形を尋ねてください。
画面の色のいくつかが印刷できないのはなぜですか。
両者が届く色がそろっていないからです。画面は光を足して色を作り、インキがどうしても並べない鮮やかで濃い青緑や緑を出せます。紙は光を吸って色を作り、いちばん明るくなれるのは紙そのものの白までです。それぞれが届く色の範囲を色域と呼び、重ならないところでは、換算は手持ちのうちいちばん近い色を選ぶほかありません。画面で鮮やかな色が刷ると少しくすんで見えがちなのは、そのためです。
答えは正確ですか。
二つの単位が整数どうしで互いに定義されている場合は正確です — ページは数字の上でそう述べており、丸めは何桁表示するかにしかありません。比が有限小数にならない場合は十二桁の有効数字を示し、関係は近似であると述べます。そうでないふりはしません。
入力したものは端末から出ていきますか。
いいえ。計算はお使いのブラウザーの中で行われます。何も送られませんし、送る先のサーバーもありません。一度読み込めば、通信を切っても動きます。
RGB を HEX に変換する理由
画像編集ソフト、オペレーティングシステムのカラーピッカー、またはコードの一行は、色を三つの数字で与えます。90、70、50。スタイルシート、デザイントークンのファイル、同僚へのメッセージは、それを一つの短いコードで求めます。#5A4632。その間の手順を、このページが行います。RGB を HEX に変換するとは、同じ三つの数字を十六進法で、それぞれ二桁で書き、前にハッシュ記号を付けることです。一つの色なら簡単ですが、二十色だと面倒で、数字に先頭のゼロが必要だったり、桁が文字だったりすると間違えやすくなります。
変換は正確で、これはどんな色の変換にも言えることではありません。hex と rgb() は、同じ三つの数字、つまり画面が出すべき赤、緑、青の光の量を、それぞれ 0 から 255 で表す、二通りの書き方です。近似されるものは何もなく、往復すれば出発点のものに戻ります。ページはこれをお使いのブラウザー内で行い、何もアップロードされません。以下では、各数字がどのように二桁の hex になるか、透明度がどう引き継がれるか、sRGB の限界、RGB を HEX に変換する必要がある場面、プロジェクトで色の一貫性を保ついくつかの習慣を説明します。
変換の仕組み
各数字が二桁の hex になる
rgb(90, 70, 50) を例にします。各数字を十六で割ります。90 は 5 × 16 + 10 で、10 は桁の A なので、90 は 5A になります。70 は 4 × 16 + 6 なので、46。50 は 3 × 16 + 2 なので、32。三組を並べてハッシュ記号を付けます。#5A4632。ページは入力に合わせてこれを行い、確認できるように rgb(90, 70, 50) = #5A4632 という文を示します。
先頭のゼロ
どの組も二桁でなければなりません。16 未満の数字は、前にゼロが必要です。7 は 07 に、0 は 00 になります。したがって rgb(0, 7, 255) は #0007FF であって、まったく別の意味になる #07FF ではありません。ゼロを忘れるのは、手作業で変換するときに最もよくある間違いです。
範囲
各数字は 0 と 255 の間になければなりません。255 を超える値は二桁の hex では書けず、負の値には意味がありません。コードの中の計算が 270 や −5 を出したなら、まず範囲に収めてください。コンバーターも同じことを行うので、無効なコードを出すことはありません。
変換が保つものと、できないこと
色を正確に保つ
hex と rgb() は、赤、緑、青を 0 から 255 で表す、同じ三つの数字の二通りの書き方なので、近似されるものは何もなく、往復すれば出発点のものに戻ります。RGB を HEX に変換して戻せば、始めた数字が得られます。
透明度も引き継ぐ
透明度の四番目の値も引き継がれます。#RRGGBBAA は rgba() になり、逆も同様です。0.5 の透明度は、255 の半分が約 128 で、hex では 80 なので、組 80 になります。したがって rgba(90, 70, 50, 0.5) は #5A463280 です。八桁の hex は、現在のすべてのブラウザーで受け付けられます。
sRGB の外の色は表せない
どちらの書き方も、画面が三十年使ってきた色空間である sRGB を表します。その外の色は表せず、それが、より新しい CSS の表記、lab()、oklch()、color() の存在理由です。広色域のツールの色から始める場合、コピーする三つの数字はすでに sRGB 版であり、hex はそれに忠実です。
省略形は保たれない
#AABBCC を #ABC と書くように、コードを三桁で書ける場合でも、コンバーターは長い形を返します。長い形は常に有効で同じ色です。短い形は読む人のための便宜にすぎません。
よく使う色とそのコード
覚えておきたいいくつか
rgb(255, 255, 255) は #FFFFFF、白です。三つの光がすべて全力です。rgb(0, 0, 0) は #000000、黒で、光がまったくありません。rgb(255, 0, 0) は #FF0000、純粋な赤です。rgb(0, 255, 0) は #00FF00、rgb(0, 0, 255) は #0000FF です。三つの数字が等しい色はどれもグレーで、そのコードは三つの等しい組を持ちます。rgb(128, 128, 128) は #808080 です。
ウェブセーフの習慣
古い解説書は、組が 00、33、66、99、CC、FF だけのウェブセーフカラーについて語っていました。それは 256 色の画面の時代のもので、残る理由はありません。好きな値を使ってください。画面はそのすべてを表示できます。
ここで RGB を HEX に変換する方法
三つの数字を入力する
最初の欄に、rgb(90, 70, 50) の形で、または数字をカンマか空白で区切って、色を入力します。パーセンテージは不要です。0 から 255 の数字を使ってください。
hex コードを読む
答えは、もう一つの欄に、ハッシュ記号で始まり大文字で、すぐに表示されます。透明度の四番目の値を指定した場合、コードは八桁になります。
作業にコピーする
コードをスタイルシート、トークンのファイル、メッセージに貼り付けてください。パレットのメモに加えておけば、次の変換は検索で済みます。
これらの表記の由来
hex と RGB は同じものを二度書いたもの
画面の色は三つの数字で、赤、緑、青の光をどれだけ出すかを、それぞれ 0 から 255、つまり一バイトで表します。hex は、そのバイトを十六進法で書いただけなので、#FF8800 と rgb(255, 136, 0) は、同じピクセルへの同じ指示です。
HSL と CMYK
HSL は、どちらも人間には読みにくいために発明されました。色相を色相環の角度として、彩度と明度をパーセンテージで与えるので、デザイナーは三つの数字を再計算せずに、何かをより明るくできます。CMYK はまったく別の世界、光ではなくインクに属します。減法混色で、四つの印刷版から作られ、画面にできるすべての色には達しません。画面は光を出しますが、紙は反射するだけだからです。HEX を HSL に変換とRGB を CMYK に変換をご覧ください。
出会う場面
デザインの引き渡しで
デザイナーは rgb の値を示すエディターやピッカーで作業し、開発者はスタイルシートのために hex が必要です。RGB を HEX に変換するのはその中間の手順で、パレットのすべての色について行われます。
色を計算するスクリプトで
二つの色を混ぜたり、一つを暗くしたりするスクリプトは、数字で作業し、その三つで終わります。結果をスタイルシートで使ったり表示したりするには、hex コードとして書かなければなりません。コードで手作業するのは数行ですが、コンバーターで結果を確認するほうが早いです。
データの可視化で
チャートライブラリは、色を hex の文字列として受け付けます。数値的な方法で生成されたパレットは、rgb の三つ組として出てきます。変換の手順が、一方を他方に変えます。
文書とプレゼンテーションで
Office のプログラムは色を RGB の数字で示し、ウェブエディターは hex を求めます。ブランドカラーが両方に現れなければならないとき、変換がそれらを同一に保ちます。
RGB を HEX に変換するときの落とし穴
先頭のゼロを忘れる
7 を 07 ではなく 7 と書くと、後に続くすべての桁がずれます。組ごとに常に二桁を使ってください。
パーセントと 0 から 255 を混同する
rgb(35%, 27%, 20%) は数字の別の書き方で、100 パーセントが 255 にあたります。元がパーセンテージを使っているなら、まず 0 から 255 に変換してください。2.55 を掛けます。
計算した色の丸め誤差
127.5 を出すスクリプトは、127 か 128 かを決めなければなりません。違いは目に見えませんが、一つの色だと思っていたものに二つのコードができてしまいます。どこでも同じ方法で丸めてください。
スクリーンショットから色を取る
スクリーンショットから読み取った色は、画面のカラーマネジメントを通り、場合によっては圧縮も経ています。元から一、二段階ずれていることがあります。可能なときは、デザインファイルを使ってください。
変換する前によくある質問
rgb(255, 0, 0) は hex で何ですか？
#FF0000、純粋な赤です。
rgb(0, 0, 0) は hex で何ですか？
#000000、黒です。
hex コードに小文字を使えますか？
はい。#5a4632 と #5A4632 は同じ色です。ページは大文字で書きます。
変換は正確ですか？
はい。同じ三つの数字の二通りの書き方です。
入力した色はアップロードされますか？
いいえ。算術はお使いのブラウザー内で実行され、何もどこにも送られません。
元に戻すには？
三つの組を数字として読むHEX を RGB に変換を使います。
プロジェクトで色の一貫性を保つ習慣
各色を一度だけ定義する
パレットを --brand: #5A4632 のようなカスタムプロパティに置き、色は名前で参照してください。新しい色のために RGB を HEX に変換するときは、一行を加えるだけで、すべての使用箇所が追随します。
大文字小文字を一つに決める
hex コードに大文字か小文字かを選んで、それを守ってください。そうすれば、コード内の色の検索が確実になります。
出典を記録する
各色の隣に、それがどこから来たかを書いておきます。ブランドガイド、ロゴ、サンプリングした画像などです。色が正しいかという問いが出たとき、どこで確認すればよいかがわかります。
コントラストをテストする
色のついた背景の上の文字には、ツールでコントラスト比を確認してください。rgb 形式の数字はそのまま式に入り、hex 形式はほとんどのチェッカーに入力するものです。
なぜ 256 段階なのか、数字の背後にあるもの
それぞれの光に八ビット
三つの数字はそれぞれ八ビットで保存され、0 から 255 までの 256 個の値が可能です。三つを合わせると 256 × 256 × 256、約 16.7 百万通りの組み合わせになり、これはほとんどの条件で目が区別できる以上です。hex コードがちょうど六桁である理由はそれです。光ごとに二桁、それより多くも少なくもありません。RGB を HEX に変換するとき、あなたは三バイトを、人々が合意できた最もコンパクトな形で書き出しています。
等しい段階が等しく見えない理由
数字は、目に届く光に比例していません。画面は 2.2 乗に近いカーブをかけるので、暗い色調が明るい色調より多くの 256 段階を得ますが、これは目に合っています。10 から 20 への一段階は、240 から 250 への一段階より大きな変化に見えます。つまり、二つの色の数字を平均しても、光を混ぜて見える色にはならず、コードでグラデーションやブレンドを計算するときに重要な事実です。
グレーと対角線
すべてのグレーは、三つの数字が等しい線上にあります。0 の黒から 255 の白まで、256 個あります。RGB を HEX に変換して三つの組が一致すれば、その色に色相がないことがすぐにわかります。組が一、二段階違うほぼグレーの色には、かすかな色合いがあり、デザイナーは中立の色にわずかな暖かさや冷たさを与えるために、これをよく使います。
パレットを作って確認する
選んだいくつかの色からパレットへ
典型的なパレットには、メインカラー、アクセント、文字用のニュートラル、面用の明るいニュートラル、成功とエラー用の一、二色の信号色があります。それぞれをデザインツールで選び、rgb の数字を読み、スタイルシート用に RGB を HEX に変換します。役割を表す名前のカスタムプロパティとして書けば、パレットはすべてのコンポーネントで使えるようになります。
文字と背景のコントラスト
読みやすい文字には、文字とその背景の間に、十分な明るさの差が必要です。アクセシビリティの指針は、二つの色の赤、緑、青の値から計算されるコントラスト比を定義し、通常のテキストには少なくとも 4.5 対 1 を求めます。チェッカーは hex コードを受け付けるので、ここで作ったコードをそのまま入力できます。白の上のメインカラーだけでなく、使う予定の組み合わせごとに確認してください。
一覧を変換する
変換する色が多いときは、一つずつ作業して、各結果を名前と用途とともに表に貼り付けてください。一色につき一分ほどで、その表がプロジェクト全体の基準になります。あとで色が調整されても、その行だけを変えれば済みます。
hex と rgb を揃えておく
プロジェクトが一部の色を hex で、ほかを rgb で保存していると、誰かが一方を編集してもう一方を忘れたときに、ずれやすくなります。一方を原本にして、通常は hex にし、必要なときはコンバーターでもう一方を導き出してください。
関連する変換ツール
同じ系統のツールが、隣接する変換を担います。戻るには、HEX を RGB に変換を使ってください。色相で表される色には、HEX を HSL に変換とHSL を HEX に変換があり、印刷には、RGB を CMYK に変換、CMYK を RGB に変換、CMYK を HEX に変換があります。同じスタイルシートのサイズには、px を rem に変換が、このページが色に対して行うことを、長さに対して行います。
実例
画像編集ソフトのカラーピッカーが、写真のアクセントは rgb(214, 98, 56) だと教えてくれたとします。三つの数字を入力して、#D66238 を読みます。スタイルシートには --accent: #D66238 と書き、ボタンとリンクに使います。同僚がブランドガイドでその色は何かと尋ね、あなたはコードを送ります。あとでバナー用に半透明の版が必要になり、HEX を RGB に変換して逆に変換し、rgba(214, 98, 56, 0.15) を作ります。どちらの変換も正確なので、バナーはボタンと同じ色相です。
短いチェックリスト
変換する前
各数字が 0 と 255 の間にあるか確認してください。透明度が必要かを決めてください。
変換している間
三つの数字を入力し、コードを読んで、ハッシュ記号ごとコピーしてください。
変換したあと
色を文脈の中で、実際の背景の上でテストし、その上に載る文字のコントラストを確認してください。
よくある間違い
先頭のゼロを落とす
どの組も二桁です。7 は 07 です。
255 を超える数字を書く
二桁では書けません。先に範囲に収めてください。
画面を真実として扱う
数字は正確です。見た目はディスプレイに依存します。
色は端末の中にとどまる
計算はローカルで行われます。値はお使いのブラウザー自身が使い、何もどこにも送られません。あとで削除するものも、作成するアカウントもありません。それが RGB を HEX に変換する素直な方法です。
まとめ
ここで RGB を HEX に変換するには、三つの数字を入力して、hex コードをすぐに読みます。変換は色を正確に保ちます。hex と rgb() は、赤、緑、青を 0 から 255 で表す、同じ三つの数字の二通りの書き方なので、近似されるものは何もなく、往復すれば出発点のものに戻ります。透明度の四番目の値も引き継がれ、rgba() は #RRGGBBAA になり、逆も同様です。どちらの書き方も sRGB を表すので、その外の色は表せません。どの組も二桁なので、16 未満の数字には先頭のゼロが付きます。何もアップロードされません。