HEXまたはRGBを入力すると、もう片方へ自動で変換します。色見本もその場で更新されます。すべてブラウザ内で計算し、サーバーには送りません。
Web制作でよく使う定番カラー40色の一覧です。各行の背景がそのままその色になっています。コピーボタンでHEXをコピーでき、すべてブラウザ内で完結します。
※ 色名は一般的な呼称です。モニター環境により実際の見え方は多少異なります。
このツールの使い方
操作はシンプルです。難しい設定や会員登録は必要ありません。HEXかRGBのどちらか一方を入力するところから始めてください。
- 手元にあるカラーコードを、HEX欄またはRGB欄のどちらかに入力します。両方を埋める必要はありません。
- 入力すると同時に、もう片方の形式へ自動で変換されて表示されます。
- 入力欄の上にある色見本で、実際の色味をその場で確認できます。
- やり直すときは、すべて消去ボタンで入力欄と結果を空にできます。
そもそもカラーコードとは？
カラーコードとは、色をコンピューターが扱えるように数値や記号で表した文字列のことです。Webサイトの制作では、文字色や背景色を指定するときに欠かせません。代表的な表記に、6桁の16進数で表すHEXと、赤・緑・青の3要素で表すRGBがあります。
HEXとRGBは見た目の表記が違うだけで、指し示している色は同じです。たとえば#ff8800とrgb(255, 136, 0)はまったく同じオレンジ色を指します。HEXはCSSに短く書けて扱いやすく、RGBは各色の強さを直感的に調整しやすいという違いがあります。
カラーコード変換のメリット・デメリット
メリット
- デザインツールはRGB表記、CSSはHEX表記といった具合に、場面ごとに求められる形式へすぐ変換できます。
- 色見本でその場で色味を確認できるため、コードだけを見て色をイメージする手間がなくなります。
- 手計算だと桁を間違えやすい16進数と10進数の変換を、正確に一発で済ませられます。
デメリット・気をつけたい点
- HEXとRGBは同じ色を別表記にするだけなので、変換しても色そのものが見やすくなるわけではありません。配色の良し悪しは別途検討が必要です。
- 透明度（アルファ値）を含むRGBAや、HEXの8桁表記には対応していません。不透明な色の変換に用途を絞っています。
- モニターの設定や環境によって、画面上の色見本は実際の印刷結果と差が出ることがあります。
こんな時に使うと便利
- デザインカンプからコーディングするとき：デザインツールで得たRGB値を、CSSで使うHEXへその場で変換できます。
- 他人のサイトの色を再現したいとき：スポイトツールで拾ったHEXをRGBに直して、色の構成を把握できます。
- 色を微調整したいとき：RGBの各値を少しずつ変えながら、対応するHEXと色味を同時に確認できます。
- デザイナーとエンジニアで表記が食い違うとき：どちらの表記で渡されても、共通の色として突き合わせられます。
- 機密性の高い制作物を扱うとき：色情報をブラウザ内だけで変換したい場面で、外部送信なしに使えます。
よくある質問
-
Q3桁の短縮HEX（#f80など）も変換できますか？
-
A
はい、対応しています。3桁の短縮形は各桁を2回繰り返した6桁として扱われ、たとえば#f80は#ff8800として変換されます。入力時に#を付けても付けなくても、どちらでも認識します。
-
Q透明度（アルファ値）付きの色は変換できますか？
-
A
現在は非対応です。このツールは不透明な色のHEXとRGBの相互変換に絞っており、RGBAや8桁HEXのような透明度を含む形式は扱えません。透明度が必要な場合は、変換後のRGB値に別途アルファ値を加えてご利用ください。
-
Q入力した色の値は外部に送信されますか？
-
A
送信されません。変換の計算はすべてお使いのブラウザ内で完結し、入力したカラーコードがサーバーに送られることはありません。未公開デザインの色情報も安心して入力できます。
-
QHEXとRGBの違いは何ですか？
-
A
表記の方法が違うだけで、指し示す色は同じです。HEXは色を6桁の16進数で短く表す形式で、CSSに書きやすいのが利点です。RGBは赤・緑・青の3つの強さを0〜255の数値で表す形式で、各色の割合を直感的に調整しやすいのが特徴です。用途に応じて使い分け、必要なときに相互変換するのが実務的な使い方です。
コメント