HEX と RGB 変換
HEX を RGB に（および RGB を HEX に）変換。ライブスウォッチ、フォーマットキット（HSL + CMYK）、クリック可能な tint→shade ランプ、白/黒上の WCAG コントラスト、貼り付け可能な CSS トークンスニペット。#rgb、#rrggbb、#rrggbbaa の貼り付け、ネイティブカラーピッカー、R/G/B…
HEX と RGB 変換について
HEX を RGB に（および RGB を HEX に）変換。ライブスウォッチ、フォーマットキット（HSL + CMYK）、クリック可能な tint→shade ランプ、白/黒上の WCAG コントラスト、貼り付け可能な CSS トークンスニペット。#rgb、#rrggbb、#rrggbbaa の貼り付け、ネイティブカラーピッカー、R/G/B 入力に対応。ブラウザ内 - 登録・アップロード不要。
HEX と RGB 変換の使い方
- HEX を貼る、カラーピッカーを使う、またはプリセットスウォッチをクリック。
- rgb()/rgba() CSS をコピー、または R/G/B（0-255）入力で HEX を生成。
- フォーマットキットで HSL/CMYK、tint→shade ランプで明/暗ステップを探索。
- WCAG コントラストカードを確認し、CSS トークンスニペットをテーマにコピー。
HEX と RGB 変換の例
#FFFFFF を RGB に
白: rgb(255, 255, 255)。
#3b82f6 を RGB に
Tailwind blue-500: rgb(59, 130, 246) とフォーマットキット内の HSL/CMYK。
短い #0f0
#00ff00 に展開 → rgb(0, 255, 0)。
コントラスト + トークン
青 #3b82f6 on 白は通常 AA 不合格; トークンスニペットは --brand-rgb をモダン CSS 用にエクスポート。
関連ガイド
完全なガイドを読む
HEX と RGB 変換 の使い方：完全ガイド（2026年版） - 5 分の読書
HEX と RGB 変換に関するよくある質問
- HEX を RGB に変換するには？
- HEX の各 2 桁ペアが 00（0）～ FF（255）の 16 進チャンネル。例 #1A2B3C → R=26, G=43, B=60、rgb(26, 43, 60)。入力に合わせて自動変換。
- 対応 HEX 形式は？
- 短い #rgb（#fff）、完全 #rrggbb（#3b82f6）、8 桁 #rrggbbaa（アルファ付き）。先頭 # は任意、大文字小文字可。ネイティブピッカーも可。
- RGB から HEX にも？
- はい - R/G/B を 0-255 で入力すると小文字 #rrggbb を出力。範囲外はクランプ。
- HSL と CMYK も表示されますか？
- はい。フォーマットキットに HEX、RGB、HSL、CMYK とワンクリック CSS コピー。CMYK は画面近似 - 色が重要なら印刷で必ずプルーフ。
- tint → shade ランプとは？
- 色を白（ティント）/黒（シェード）に混ぜた段階。クリックでその HEX を読み込み、ランプ全体をパレット用にコピー可能。
- コントラストカードの意味は？
- 白/黒背景上のテキストとしての WCAG コントラスト比と、通常/大文字の AA/AAA 合否。UI 色を公開前に確認するのに有用。
- rgb() と rgba() の違いは？
- rgb() は R/G/B のみ。rgba() は 0（透明）～ 1（不透明）のアルファを追加。8 桁 HEX 貼り付け時は rgba() を出力。
関連ツール
RGB と HSL 変換
RGB と HSL を即相互変換。ライブスウォッチとコピー可能な rgb()/hsl() CSS の無料オンラインカラー変換。
カラーパレットジェネレーター
ブラウザで無料カラーパレットジェネレーター。補色、類似色、トライアド、テトラード、split-complementary、モノクロ、ランダムパレットを構築。HEX、RGB、HSL、CSS変数をコピー。
PXからREMへのコンバーター
設定可能なベースフォントサイズでpxをremとemにオンライン変換。クイックリファレンス表付き無料px to remコンバーター。ブラウザで動作。
CSSグラデーションジェネレーター
ライブプレビュー付きでCSS linear、radial、conicグラデーションを構築。カラーストップを選び、background CSSをコピーしてスタイルシートに貼り付け。ブラウザで動作。