HEX ↔ RGB ↔ HSL 変換ツール

HEX、RGB、HSL形式間で色を変換します。ライブプレビュー、クイックプリセット、CSS対応値のコピー。100%クライアントサイド、アップロードなし。

広告
広告

カラー変換ツールはウェブデザインやデジタルグラフィックスで使用される異なる形式表現間で色を変換します：HEX (#RRGGBB)、RGB (0-255)、HSL（色相、彩度、明度）、HSV（色相、彩度、値）。各形式は同じ色を異なる方法で記述します。このツールは入力に合わせて即座に変換し、すべてブラウザ内で処理します。

ブラウザを離れることなく色を即座に変換

HEX、RGB、HSL——3つの形式すべてが入力や選択に合わせてリアルタイムで更新。ワンクリックでCSS対応の値をコピー。

リアルタイム変換
CSS対応出力
無料・無制限

使い方

  1. 1

    色を選択

    HEX値を入力するか、RGB/HSLの数値入力を調整するか、クイックプリセットをクリックします。

  2. 2

    ライブプレビューを確認

    上部の見本が即座に更新されて現在の色を表示します。

  3. 3

    任意のフォーマットをコピー

    HEX、RGB、HSLの横のコピーボタンを使用して、CSS対応の値をコピーします。

このカラー変換ツールを使う理由

3フォーマットを1画面で

HEX、RGB、HSLがすべて同時に表示・編集可能で、1つを変更すると他が即座に更新されます。

CSS対応の出力

コピーボタンで`#RRGGBB`、`rgb(r, g, b)`、`hsl(h, s%, l%)`の文字列を取得でき、そのままCSSに貼り付けられます。

Tailwind CSSのデフォルトパレットや純粋な黒/白から始めて、スライダーで微調整できます。

広告

カラーフォーマットについて

HEX、RGB、HSL、HSVの解説

HEX (#RRGGBB)はウェブデザインに最もコンパクトなカラーフォーマットです。16進数の各ペア(00-FF)が赤、緑、青の強度を表します。00はチャンネルがオフ（黒）、FFはフル強度です。HEXはCSS、HTML、デザインツールで標準フォーマットです。各ペアが同じ場合の短縮表記（#F00など）もあります。

RGBは同じ3つのチャンネルに10進数値(0-255)を使用します。ディスプレイハードウェアがネイティブに理解するフォーマットです。RGBはJavaScriptのキャンバスAPIや画像処理ライブラリでも使用されます。RGBAは透明度のアルファチャンネルを追加します。

HSL（色相、彩度、明度）は人間にとってより直感的な方法で色を記述します。色相はカラーホイール上の角度(0度=赤、120度=緑、240度=青)、彩度は色の鮮やかさ(0%=グレー、100%=フルカラー)、明度は明るさ(0%=黒、50%=標準、100%=白)です。HSLはベースカラーのティント、シェード、トーンを簡単に作成できます。

広告

各形式をいつ使うか

CSSやHTMLにはHEXを使用します——最も広くサポートされ、最も短く書けます。カラーチャンネルをプログラムで操作する場合やアルファ透明度が必要な場合はRGBを使用します。色のバリエーションを作成する場合はHSLを使用します。

HSLはCSSカスタムプロパティ（CSS変数）で特に強力です。--hue: 210を定義し、スタイルシート全体でhsl(var(--hue), 70%, 50%)を使用できます。単一の変数を変更するだけでカラースキーム全体が更新されます。HEXやRGBでは不可能です。

広告

一般的な使用例

HSLでのデザイン

基本の色相を選んで明度を調整してカラーパレットを構築します — RGBよりもHSLの方がはるかに簡単です。

Figmaの色をCSSに変換

FigmaはHEXを表示することが多いですが、CSSではRGBやHSL（`color-mix`や不透明度用）が必要な場合があります。1クリックで正確な文字列を取得できます。

確認

このツールをコントラストチェッカーと組み合わせて、色の選択がWCAG要件を満たしているかを確認します。

微調整

Tailwindプリセットをカスタムブランドカラーに素早く差し替え、結果のHEXを設定にコピーします。

他のカラー変換ツールとの比較

人気のカラー変換ツールの比較。

機能NovaToolsRapidTablesW3Schools
HEX→RGB→HSL→HSV全形式制限あり
入力時のライブプレビュー即時送信ボタン
カラーピッカー統合EyeDropper API
プライバシー（アップロードなし）100% ローカルサーバー側
CSS対応値をコピー
オフライン動作

ほとんどのオンラインカラー変換ツールはサーバーで変換を処理します。私たちのツールはすべての計算をブラウザ内で実行します。

よくある質問

どのカラーフォーマットに対応していますか？
HEX（例：`#2563EB`）、RGB（例：`rgb(37, 99, 235)`）、HSL（例：`hsl(217, 83%, 53%)`）。3つすべてが任意の値を変更すると同時に更新されます。
RGBとHSLの違いは何ですか？
RGBは赤、緑、青の成分で色を記述します。HSLは色相（カラーホイールの角度）、彩度（強度）、明度で記述します。HSLは他を再計算せずに明度だけ変更できるため、デザイナーにとってより直感的です。
3桁のHEX短縮表記に対応していますか？
はい。`#fff`と入力すると自動的に`#FFFFFF`に展開されます。出力は互換性を最大化するため常に6桁形式を使用します。
CSS対応の値をコピーできますか？
はい。各フォーマットの横のコピーボタンで`#2563EB`、`rgb(37, 99, 235)`、`hsl(217, 83%, 53%)`を取得でき、そのままCSSに貼り付けられます。
無効なHEX値を入力した場合はどうなりますか？
HEXフィールドはフリーテキストのため任意の文字を入力できますが、RGBとHSLの値はHEXが有効な場合にのみ更新されます。これにより、前の色を失うことなく実験できます。
Tailwind CSSの色をRGBやHSLに変換するにはどうすればよいですか？
HEXフィールドにTailwindのHEX値を入力するだけです。RGBとHSLの値が即座に更新され、ワンクリックでコピーできます。また、組み込みのTailwindプリセットパレットを使用して任意の標準Tailwindカラーから開始できます。
このツールでカラーパレットを作成できますか？
はい。HSLはパレット生成に特に適しています。色相を固定して明度を変えることで、同じ色のティントやシェードを作成できます。このツールをコントラストチェッカーと組み合わせて、テキストと背景の組み合わせがWCAGアクセシビリティ基準を満たしているか確認できます。
このツールはプロのデザイン作業に正確ですか？
はい。変換の計算はW3C CSS Color Module Level 4仕様に従っており、ブラウザが内部で使用するのと同じ標準です。ツールはガンマ補正や色空間変換を適用しないため、すべての値は標準sRGB色空間です。

あなたのプライバシーが私たちの優先事項です

このツールは完全にブラウザ内で実行されます。ファイルはサーバーにアップロード、保存、分析されません。

  • ファイルをアップロード、保存、分析することはありません。
  • 処理するすべてのものはデバイスに残ります。
  • サーバー側処理、クラウドストレージ、分析はありません。

インターネット接続が切断されても、ファイルは安全です。

こちらもおすすめ

このトピックを見る

このカテゴリのすべてのツールカラーツールこのトピックのガイドデザインとアクセシビリティ

カラーピッカー

画像や画面から色を取得します。

コントラストチェッカー

WCAGに準拠した色のコントラストを確認します。

パレットジェネレーター

美しいカラーパレットを作成します。

役立つガイド

HEX・RGB・HSL間の色変換方法

HEX、RGB、HSL間の色変換方法を解説します。3つの色形式の違いと用途別の選び方、RGBとHSLの違い、CSS color-mix関数の活用ヒント、ライブプレビューで相互変換する手順を紹介するデザイナー・開発者向けガイドです。

UIデザインのためのカラーコントラスト実践ガイド

ウェブアクセシビリティとカラーコントラストの基礎を学びましょう。WCAGの評価（AA対AAA）を理解し、私たちのクイックチェックと実践的な修正方法を使って、誰もが読みやすいUIを作りましょう。

テキストケースの変換方法：camelCase, snake_case, Title Caseなど

テキストケースの変換方法を解説します。UPPERCASE、lowercase、Title Case、camelCase、PascalCase、snake_case、kebab-case、CONSTANT_CASEなど12種類のケーススタイルと、JavaScript、Python、CSSなど言語別の命名規約、変換手順を紹介するガイドです。

広告