HEX⇔RGB変換：カラーコードを無料で変換 | オンラインツール

A スポイトツールはブラウザ内だけでなく、画面全体から色を取得します。アイコンをクリックして、SlackやFigma、PDF上の任意のピクセルにカーソルを合わせましょう。クリックすると色が確定します。一部のOSでは、事前に画面収録の許可が必要な場合があります。

A はい、省略形のHEXコードも問題なく使えます。当ツールは#FFFを自動的に#FFFFFF（白）に展開します。#F06は#FF0066になります。RGB、HSL、RGBAの完全な値がすぐに表示されます。ただし、省略形が使えるのは各ペアの数字が同じ場合だけです。#ABCは#AABBCCになります。

A もちろんです。#E63946 の赤をWebバナー、SNS投稿、メールテンプレートで完全に統一したい場合、このツールにHEXコードを入力するだけです。RGB値はPhotoshop用、RGBAはオーバーレイ効果用、HSLは色彩理論調整用として即座に表示されます。ひとつのHEX値を全アウトプットで共有すれば、ヒーローセクションのグラデーションが微妙にずれる心配はありません。コツ：出力値をブランドガイドラインに保存し、誰も目分量で色を決めないようにしましょう。

A HEXコードをコンバーターに貼り付け、RGB値を取得します。その数値と背景色をコントラストチェッカーに入力してください。14pt未満の標準テキスト（太字）では、白または黒背景に対して4.5:1の比率を目指します。当ツールはコントラストを直接計算しませんが、正確な数値を提供してプロセスを高速化します。WCAG AAは4.5:1、AAAは7:1が必要です。プロのヒント：#CCCCCCのような薄いグレーは白背景で不合格になります。

A はい、#000000は正確にrgb(0, 0, 0)に変換されます。赤、緑、青の光がゼロの純粋な黒です。ただし、バックライトの漏れのため、モニターは真の黒を表示できません。最も暗いピクセルでもrgb(10, 10, 10)程度になります。有機ELディスプレイなら#000000で漆黒が表現できます。標準的な液晶では、#1a1a1aのような濃いグレーの方が純粋な黒より黒く見えることもあります。

A RGBは赤・緑・青の3つの値。RGBAはそれに透明度（0〜1）を示すアルファが加わります。要素を重ねる時、例えばヒーロー画像の上にナビゲーションバーを置く場合、RGBAなら下が透けます。当ツールに#3498DBを貼り付けると、rgb(52, 152, 219)とrgba(52, 152, 219, 1)の両方が表示されます。末尾の1は完全不透明の意味。でも、ベタ塗りならアルファは不要です。ホバー時の色変更やモーダルのオーバーレイにだけ使いましょう。コツ：0.7と0.5で試してみて、どちらが邪魔にならないか確認するのがおすすめです。

A 機能的な違いはありません。単に表記が異なるだけです。当ツールは #fff を自動的に #ffffff に展開するため、どちらの場合も同じ RGB 値が得られます。これは短縮形が各文字を2倍にするためです。#f は ff に、#c は cc になります。しかし注意点があります。#369 と #336699 は同じ色ではありません。短縮形の #369 は #336699 に展開され、数字を見て想像する #036090 にはなりません。迷ったら6桁の完全なコードを使ってください。

A 不要です。#FF5733のようなコードを入力欄に貼り付ければ、rgb(255, 87, 51)がすぐに表示され、HSLとRGBAも確認できます。処理はすべてブラウザ内で完結するので、インストールもアップロードもありません。FigmaやVS Codeの隣にこのタブを開きっぱなしにしているデザイナーも多いですよ。ブックマークしておくと思った以上に使う場面があります。

A CSSでHEXとRGBを混在させても、検索エンジンがペナルティを科すことはありません。ただ、構文ミスがあるとブラウザの読み込み速度に影響が出ることがあります。当ツールはrgb(241, 196, 15)のような正確なCSS用コードを出力します。ブランドカラーを一度貼り付けて、そのままCSSに貼り付けてください。

A Tailwindはカンマではなく59 130 246のようなスペース区切りの数値を必要とします。このコンバーターは通常のCSS文字列をそのまま出力します。モダンなユーティリティクラスを使うにはカンマを削除してください。フレームワークへ移行する際にこの構文の違いで見落としがちです。出力ボックスから生データを直接コピーしてエラーを防ぎましょう。