HEX を RGB に換算 Hexadecimal ↔ Red Green Blue 無料 オンライン 安全
HEX で値を入れれば、その場で RGB として読めます。計算はあなたのブラウザーの中で行われ、どこへも何も送られません。そして答えが何に左右されるかは、前提にせず下に書いてあります。
アップロードなし
この書き方はどこから来たか
十六進とRGBは、同じものを二通りに書いたものです。画面の色は三つの数——赤と緑と青の光をどれだけ出すか——で、どれも〇から二五五まで、つまり一バイトです。十六進はそのバイトを十六を底として書くだけですから、#FF8800 と rgb(255, 136, 0) は同じ画素への同じ命令です。HSLが考え出されたのは、どちらも人には読めないからでした。色相を色相環の角度で、彩度と明度を百分率で与えますから、作り手は三つの数を計算し直さずに何かを明るくできます。CMYKはまったく別の世界、光ではなく「インキ」のものです。減法で、四枚の版から組み立てられ、画面が出せるすべての色には届きません。画面は光を出し、紙は光を返すだけだからです。
どこで出会うか
十六進は、様式表に打ち込むものであり、意匠の道具が手渡してくるものです。RGBは色に計算が要るところならどこにでも現れます。階調、透明度、濃淡を算出する符号。HSLは手で配色を整えるときに手が伸びる書き方です。したいと思う変更は、たいてい三つの数のどれか一つの変更だからです。CMYKは印刷所が求めるもので、そこへ換算する瞬間こそ、意匠が光であることをやめてインキになる瞬間です。
よくある質問
私のCMYKの結果が印刷所のものと違うのはなぜですか。
唯一正しい換算というものが存在しないからです。このページの計算は、機器に依らない素朴なもので、出発点や大まかな相当値が要るときにはこれが正しい答えです。印刷所は、特定のインキと紙と印刷機を織り込んだ色の形を通して換算します。同じRGBの色でも、光沢紙と非塗工紙とでは別のCMYK値になります。きっちり合わせねばならないものについては、式を信じるより印刷所にその形を尋ねてください。
画面の色のいくつかが印刷できないのはなぜですか。
両者が届く色がそろっていないからです。画面は光を足して色を作り、インキがどうしても並べない鮮やかで濃い青緑や緑を出せます。紙は光を吸って色を作り、いちばん明るくなれるのは紙そのものの白までです。それぞれが届く色の範囲を色域と呼び、重ならないところでは、換算は手持ちのうちいちばん近い色を選ぶほかありません。画面で鮮やかな色が刷ると少しくすんで見えがちなのは、そのためです。
答えは正確ですか。
二つの単位が整数どうしで互いに定義されている場合は正確です — ページは数字の上でそう述べており、丸めは何桁表示するかにしかありません。比が有限小数にならない場合は十二桁の有効数字を示し、関係は近似であると述べます。そうでないふりはしません。
入力したものは端末から出ていきますか。
いいえ。計算はお使いのブラウザーの中で行われます。何も送られませんし、送る先のサーバーもありません。一度読み込めば、通信を切っても動きます。
なぜ HEX を RGB に変換するのか
デザインツールは色を #5A4632 として渡します。スタイルシート、キャンバスのスクリプト、グラフのライブラリ、グラフィックスのプログラムは、それを rgb(90, 70, 50) として求めます。同じ色で、一方の綴りからもう一方へ移す作業は、しょっちゅう出てきます。ブランドガイドが hex コードを載せていて、コードが明るい濃淡を計算するのに数字を必要とする。クライアントがロゴの色を送ってきて、透明度付きの rgba() を埋めなければならない。ライブラリが三つの別々の値しか受け付けない。HEX を RGB に変換するのは小さな作業ですが、信頼できる換算ツールは、頭の中で十六進の算数をして間違えることから救ってくれます。
この変換は正確で、これはすべての色の変換に当てはまることではありません。hex と rgb() は、画面が発すべき赤、緑、青の光の量である同じ三つの数字の二通りの綴りで、それぞれ 0 から 255 です。何も近似されず、往復で元に戻ります。このページはブラウザ内でそれを行い、何もアップロードされません。以下には、hex の数字が三つの数字にどう対応するか、透明度がどう引き継がれるか、短縮形が何をするか、sRGB の限界、そして開発者やデザイナーが HEX を RGB に変換する必要がある状況が載っています。
変換のしくみ
三組の数字が三つの数字になる
hex の色は、ハッシュ記号に続く六桁の十六進数で、二桁ずつ組にして読みます。最初の組が赤、二番目が緑、三番目が青です。各組は、00 と FF の間の十六進の数で、それは日頃使う十進法の 0 から 255 です。したがって #5A4632 は 5A、46、32 に分かれます。5A は 5 × 16 + 10 = 90、46 は 4 × 16 + 6 = 70、32 は 3 × 16 + 2 = 50 です。色は rgb(90, 70, 50) で、これがページが始まる例です。
なぜ数字が 0 から F まで進むのか
十六進は十六個の記号を必要とするので、9 の後には、10 から 15 を表す A から F の文字が来ます。そのような数字の組は、16 × 16 = 256 の値を与え、これはまさに一バイトが保持できるものです。画面の色は三バイトで、hex は単にそれを書くコンパクトな方法です。コンマと括弧付きの三つの数字の代わりに、六文字です。
大文字と小文字
#5a4632 と #5A4632 は同じ色です。CSS はどちらも受け付け、この換算ツールもそうです。プロジェクトでは一つの慣習を選んで守ってください。大文字小文字が混ざると、スタイルシートの検索が難しくなるからです。
変換が保つものと保てないもの
色を正確に保つ
hex と rgb() は、赤、緑、青の 0 から 255 という同じ三つの数字の二通りの綴りなので、何も近似されず、往復で元に戻ります。HEX を RGB に変換して戻せば、大文字の可能性を除いて、始めたのと同じコードが得られます。
透明度を引き継ぐ
透明度のための四つ目の値も引き継がれます。#RRGGBBAA は rgba() になり、戻ります。最後の組はアルファチャンネルで、完全に透明な 00 から完全に不透明な FF までです。したがって #5A463280 は rgba(90, 70, 50, 0.5) です。hex の 80 は 128 で、255 のうちの 128 は約半分だからです。八桁は現在のすべてのブラウザが受け付けます。
sRGB の外の色は記述できない
どちらの綴りも、画面が三十年使ってきた色空間である sRGB を記述します。その外の色は記述できず、それが新しい CSS の表記、lab()、oklch()、color() が存在する理由です。現代のディスプレイは sRGB が持つより彩度の高い色を表示でき、広色域のツールでそのような色を選んだデザイナーは、hex として書かれると sRGB に切り詰められるのを見ることになります。
短縮形は保たれず、展開される
短縮形は保たれずに展開されます。#abc は #AABBCC として戻り、それは長く書いた同じ色です。各桁が二重になります。つまり、三桁のコードを貼り付けて正しい数字を得られますが、長い綴りを見ただけで短い綴りを復元することはできず、各組が繰り返されているかを確認することでしかできません。
よくある色とその数字
覚えておくいくつか
白は #FFFFFF で、rgb(255, 255, 255)、三つの光すべてが全力です。黒は #000000、rgb(0, 0, 0)、光がまったくありません。純粋な赤は #FF0000、緑は #00FF00、青は #0000FF です。中間の灰色は、#808080、つまり rgb(128, 128, 128) のように、三つの等しい組を持つどのコードでもあります。等しい組は常に灰色を意味します。三つの光が等しい量だと色相を持たないからです。
コードを一目で読む
パターンがわかれば、hex の数字から色を見積もれます。最初の組が高いコードは赤みがかり、真ん中の組が高ければ緑がかり、最後の組が高ければ青みがかっています。#FF8800 は多くの赤、いくらかの緑、青なしで、オレンジです。そのためにツールは要りませんが、正確な数字にはツールが要ります。
ここで HEX を RGB に変換する方法
hex コードを入力するか貼り付ける
最初の欄に色を、ハッシュ記号付きでも無しでも入力します。三桁、六桁、八桁の形式が受け付けられます。
rgb の値を読む
答えはもう一方の欄にすぐに、rgb(90, 70, 50) の形で、コードが透明度を運んでいれば rgba() で現れます。ページは #5A4632 = rgb(90, 70, 50) という文を示すので、一目で確認できます。
コードにコピーする
結果を、それを求めたスタイルシート、スクリプト、ツールに貼り付けます。三つの数字を別々に必要とするなら、括弧の中のものがそれです。
これらの表記の由来
hex と RGB は同じものを二通りに書いたもの
画面の色は三つの数字、つまり赤、緑、青の光をどれだけ出すかで、それぞれ 0 から 255、一バイトです。hex は単にそのバイトを十六進で書いたもので、#FF8800 と rgb(255, 136, 0) は、同じピクセルへの同じ指示です。
HSL と CMYK
HSL は、どちらも人間には読みにくいために発明されました。色相を色相環の周りの角度として、彩度と明度を百分率として示すので、デザイナーは三つの数字を計算し直さずに、何かをより明るくできます。CMYK はまったく別の世界、光ではなくインクのものです。減法混色で、四つの印刷版から作られ、画面が光を発するのに対して紙は反射するだけなので、画面が出せるすべての色には届きません。それらについては、HEX を HSL に変換とHEX を CMYK に変換を見てください。
どこで出会うか
スタイルシートで
hex は、スタイルシートに入力するもので、デザインツールが渡すものです。RGB は、色に算数が必要なところならどこにでも現れます。グラデーション、透明度、濃淡を計算するコード。両方の綴りを知り、その間を行き来できることは、日常のフロントエンドの仕事の一部です。
スクリプトとキャンバス描画で
描画コードは、二つの色を混ぜたり、一定量だけ暗くしたり、ピクセルが目標に合うか調べたりするために、三つの数字を別々に求めることがよくあります。HEX を RGB に変換すれば、数字が直接得られます。
グラフィックスと画像ツールで
画像編集ソフトは、通常、色を三つの数字か hex コードで示し、どちらでも入力できます。二つの間を行き来すれば、ウェブページの色を、数字を求めるプログラムで再現できます。
文書とブランドガイドで
ブランドガイドは、色をウェブ用の hex、画面用の RGB、印刷用の CMYK で載せていることがあります。最初の二つを一致させるのは一回の変換の問題で、千枚のチラシに印刷される前に誤字を見つける類の確認です。
RGB 形式の実用的な使い方
二つ目の色なしの透明度
rgba(90, 70, 50, 0.5) なら、色が半分の強さで得られ、その後ろのものが透けて見えます。新しい色を作らずに、ブランドカラーからオーバーレイ、影、色付きの背景を作る標準的な方法です。
より明るい、より暗い濃淡を計算する
ホバー状態を少し暗くするには、スクリプトが三つの数字のそれぞれから一定量を引けます。hex の文字列で同じことをするのは面倒ですが、rgb なら単純な算数です。色相に基づく調整が必要なら、代わりに HEX を HSL に変換してください。
コントラストの確認
アクセシビリティのツールは、赤、緑、青の値から二つの色の間のコントラストを計算します。数字があれば、自分で計算したり、確認ツールに貼り付けたりして、背景の上の文字が読めることを確かめられます。
HEX を RGB に変換するときの落とし穴
アルファの組を忘れる
八桁のコードは、最後の二桁に透明度を持ちます。それを取り除くと、失われます。結果がその色だと決める前に、コードの長さを確認してください。
順序の取り違え
hex は赤、緑、青です。いくつかの形式や一部の古いグラフィックス API は、青、緑、赤を使います。特定のプログラムで色がおかしく出たら、そのチャンネルの順序を確認してください。
スクリーンショットからコピーする
スクリーンショットから読み取った色は、画面の色管理と圧縮の後の色です。元のファイルの色とわずかに違うことがあります。できればデザインファイルを使ってください。
画面が一致すると思い込む
二つの画面は同じコードをわずかに違って表示します。数字は正確で、見え方はディスプレイとそのプロファイルに依存します。
変換する前に人が尋ねる質問
#FF0000 は RGB で何ですか。
rgb(255, 0, 0)、純粋な赤です。
#FFFFFF は RGB で何ですか。
rgb(255, 255, 255)、白です。
三桁のコードを変換できますか。
はい。各桁が二重になります。#09C は #0099CC になり、それは rgb(0, 153, 204) です。
変換は正確ですか。
はい。同じ三つの数字の二通りの綴りです。
色はアップロードされますか。
いいえ。算数はブラウザ内で行われ、何もどこにも送られません。
どうやって戻しますか。
RGB を HEX に変換を使います。三つの数字を hex コードとして書きます。
HEX を RGB に変換するときの賢い選び方
次に何が必要かを知る
透明度が必要なら、rgba() が自然な形です。明度や色相を調整する必要があるなら、HSL のほうが簡単です。色が印刷されるなら、次の段階は CMYK で、変換が伴う注意点が付きます。RGB を CMYK に変換を見てください。
hex をマスターとして保つ
ブランドのパレットの色は、hex コードを基準として保ってください。短く、あいまいさがなく、どこでも理解されます。必要なときに、そこから他の形式を導き出します。
カスタムプロパティを使う
CSS では、色を --brand: #5A4632 のように一度だけ定義し、名前で参照します。rgba() のために数字が必要なら、--brand-rgb: 90 70 50 も定義します。そうすれば変換は一回で済みます。
現代の CSS と RGB 形式
空白区切りの構文
現在の CSS は、rgb(90 70 50 / 50%) のように、空白と、透明度のためのスラッシュを使った rgb() を受け付けます。数字はコンマ形式と同じなので、変換の結果は両方で使えます。古いブラウザや一部のツールはコンマを期待するので、色がどこで使われるかわからないときは、コンマ形式が安全な選択のままです。
パーセントと分数
RGB は、rgb(35% 27% 20%) のようにパーセントでも書け、そこでは 100 パーセントが 255 です。ページは整数を示します。それが hex が保存するもので、ほとんどのツールが期待するものだからです。パーセントが必要なら、各数字を 255 で割って 100 を掛けてください。
三つの数字のためのカスタムプロパティ
よくある工夫は、三つの数字だけをカスタムプロパティ --brand-rgb: 90 70 50 に保存し、rgb(var(--brand-rgb) / 0.5) として使うことです。一つの定義で、不透明な用途と半透明な用途の両方に役立ちます。この目的で HEX を RGB に変換するときは、答えから数字だけをコピーしてください。
実際の色の扱い
ブランドガイドと照らして確認する
ブランドガイドが同じ色について hex と rgb の両方を載せているなら、一方を変換してもう一方と比べてください。不一致は、たいていガイドの誤字を意味し、それをすべてのページで使われる前に見つけることは、かかる一分の価値があります。
パレットを短い一覧として保つ
ほとんどのサイトは五から八色を使います。両方の形式でメモに書いておきます。新しい部品のために HEX を RGB に変換する必要があるたびに、計算し直さず調べることができ、パレットは一貫したままです。
色を役割で名づける
プライマリー、サーフェス、警告のような名前は、緑や茶色のような名前より、リデザインを生き延びます。変換は数字を与え、名前はそれが何のためのものかを語ります。
関連する換算ツール
同じ系統のツールが、隣接する換算をカバーします。戻るには、RGB を HEX に変換を使ってください。色相で記述される色には、HEX を HSL に変換とHSL を HEX に変換があり、印刷には、HEX を CMYK に変換、CMYK を HEX に変換、CMYK を RGB に変換があります。同じスタイルシートのサイズには、px を rem に変換とpx を em に変換が、このページが色にすることを長さに対して行います。
計算例
ブランドカラーが #1E7A5C で、カードの背景に半透明のバージョンがほしいとします。コードを入力して、rgb(30, 122, 92) を読みます。スタイルシートには、background: rgba(30, 122, 92, 0.12)、同じ緑のごく薄い色合いと、rgba(30, 122, 92, 0.4) の枠線を書きます。カードは、透明度がページを透かすので、白いページの上にも灰色のページの上にも心地よく収まります。あとでブランドカラーが変わったら、一つのカスタムプロパティの三つの数字を置き換えるだけで、すべての色合いがついてきます。
短いチェックリスト
変換の前に
コードの長さを確認します。三桁、六桁、八桁。透明度が必要かを決めます。
変換中に
コードを貼り付け、rgb の値を読み、括弧付きで、または三つの数字だけをコピーします。
変換の後に
色を文脈の中で、実際の背景の上でテストし、その上に載る文字のコントラストを確認します。
よくある間違い
透明度の組を落とす
八桁はアルファを意味します。保つか、rgba() に変換してください。
チャンネルの順序の混同
hex は赤が最初です。ツールによっては青が最初のものもあります。
画面を真実として扱う
数字は正確です。見え方はディスプレイに依存します。
色は端末にとどまる
計算はローカルで行われます。値は自分のブラウザで使われ、何もどこにも送られません。後で削除するものはなく、作成するアカウントもありません。それが HEX を RGB に変換する素直な方法です。
まとめ
ここで HEX を RGB に変換するには、hex コードを入力するか貼り付けて、rgb の値をすぐに読みます。変換は色を正確に保ちます。hex と rgb() は、赤、緑、青の 0 から 255 という同じ三つの数字の二通りの綴りなので、何も近似されず、往復で元に戻ります。透明度のための四つ目の値も引き継がれ、#RRGGBBAA は rgba() になり、戻ります。どちらの綴りも sRGB を記述するので、その外の色は記述できず、短縮形は保たれずに展開されます。#abc は #AABBCC として戻ります。何もアップロードされません。