CSS カラー変換: HEX を RGB と HSL へ

CSS の色を HEX・RGB・HSL の間で変換。ライブスウォッチとアルファ対応。すべてブラウザ内で動作するため、データが端末から外に出ることはありません。

入力したすべての色はブラウザ内のローカルで変換され、サーバーにアップロードされることはありません。

開発・運営：Udit Agarwal

HEX, RGB and HSL Color Codes, Explained

可読性を確認しますか? Contrast Checker を試してください。

CSS カラー変換 について

この CSS カラー変換ツールは、任意の色の値を HEX・RGB・HSL に一度に変換し、ライブスウォッチプレビューで入力しながら正確な色合いを確認できます。HEX コード、rgb() や hsl() の値、blue・teal・gold といった一般的な CSS カラー名を貼り付けると、入力を即座に 3 つの形式すべてに正規化します。rgba()・hsla()・アルファチャンネル付き 8 桁 HEX を含む透明度にも対応します。デザイントークンのために hex から rgb を計算する、スタイルシート用に rgb を hex に変換する、パレット調整中に hsl 値を確認するといった場面で、すべての形式を同期させます。色の形式を日常的に扱うフロントエンド開発者、デザイナー、QA エンジニア向けに作られています。すべてはブラウザ内のローカルで動作するため、入力した値が端末から外に出ることはありません。

機能

• 1 つの入力から HEX・RGB・HSL を一度に変換
• blue・teal・gold など一般的な CSS カラー名を認識
• rgba()・hsla()・8 桁 HEX アルファによる透明度に対応
• 入力に合わせて即座に更新されるライブカラースウォッチプレビュー
• 3 桁・4 桁の短縮 HEX コードを受け付け
• パーセンテージと 0〜255 の RGB チャンネル値を正規化
• 値を解析できないときは明確なインラインエラーを表示
• ブラウザ内のローカルで処理

CSS カラー変換 の使い方

1. Color 入力欄に色を入力するか貼り付けます。
2. HEX コード、rgb()、hsl()、または blue のような CSS カラー名を使います。
3. 結果の各行に変換された HEX・RGB・HSL の値を確認します。
4. 入力欄の横にあるスウォッチで正確な色をプレビューします。

例

入力

#3b82f6

出力

HEX  #3b82f6
RGB  rgb(59, 130, 246)
HSL  hsl(217, 91%, 60%)

1 つの HEX 値を RGB と HSL に変換し、対応するライブスウォッチを表示。

よくあるエラーとトラブルシューティング

• 値を入力すると「Couldn't parse that color」と表示される。 — 有効な HEX コード、rgb()/rgba()、hsl()/hsla()、またはサポートされている CSS カラー名を使ってください。余計な文字や括弧の欠落は解析を妨げます。
• 「salmon」のような CSS カラー名が認識されない。 — サポートされるのは厳選された一般的な名前のみです。代わりに対応する HEX または rgb() の値を入力してください。
• 変換後にアルファが失われる。 — rgba(0,0,0,0.5) や 8 桁 HEX の #00000080 のように、入力にアルファチャンネルを含めてください。すべての形式に引き継がれます。
• 255 を超える RGB 値やパーセンテージがおかしく見える。 — チャンネルは有効範囲にクランプされます。0〜255 の数値、または 0%〜100% のパーセンテージを渡すと期待どおりの結果になります。

よくある質問

CSS カラー変換ツールとは何ですか?

任意の HEX・rgb()/rgba()・hsl()/hsla()・一般的な CSS カラー名を読み取り、ライブスウォッチプレビューとともに HEX・RGB・HSL へまとめて変換するブラウザ内ツールです。

このツールで HEX を RGB と HSL に変換するには?

#3b82f6 のような HEX コードを Color 欄に貼り付けると、CSS カラー変換ツールが結果の各行に対応する rgb() と hsl() の値を即座に表示します。

CSS カラー変換ツールは透明度やアルファチャンネルに対応していますか?

はい。rgba()・hsla()・アルファ値付き 8 桁 HEX をすべて解析し、アルファはすべての出力形式で保持されます。

コードの代わりに CSS カラー名を貼り付けられますか?

はい。blue・teal・gold・indigo といった標準的な名前を認識し、HEX・RGB・HSL に変換します。

短縮 HEX コードを受け付けますか?

はい。#f00 や #f00a のような 3 桁・4 桁の短縮 HEX は変換前に自動的に展開されます。

入力した色の値はどこかにアップロードされますか?

いいえ。CSS カラー変換ツールはすべてブラウザ内で動作するため、入力した値はローカルで処理され、端末から外に出ることはありません。

関連ツール

• コントラストチェッカー — 2色間のWCAGコントラスト比とAA/AAA合格を確認します。
• CSS / SCSS フォーマッター — CSS/SCSS/LESS の整形・圧縮、プロパティの並べ替え、重複の除去を行います。
• SVG オプティマイザー — SVGを圧縮: コメント、メタデータ、エディタの残骸を削除し、空白をまとめます。
• 基数変換ツール — 整数を2進数、8進数、10進数、16進数の間で変換します。
• HTML エスケープ / アンエスケープ — HTMLの特殊文字とエンティティをエスケープ・アンエスケープします。
• JS / TS フォーマッター — JavaScript・TypeScript・JSX/TSX を Prettier のオプションで整形。素の JavaScript は圧縮もできます。
• HTML フォーマッター — HTMLの整形・圧縮、インラインCSS/JSの整形、結果のプレビューを行います。

コードフォーマッターの他のツール

• テキスト比較 — 2つのテキストを行単位で比較し、追加と削除を確認します。
• MDX 変換ツール — MDXをテキストとしてレンダリングし、HTML → MDX 変換やMDXリテラルへのエスケープを行います。
• CSS / SCSS フォーマッター — CSS/SCSS/LESS の整形・圧縮、プロパティの並べ替え、重複の除去を行います。
• JS / TS フォーマッター — JavaScript・TypeScript・JSX/TSX を Prettier のオプションで整形。素の JavaScript は圧縮もできます。
• HTML フォーマッター — HTMLの整形・圧縮、インラインCSS/JSの整形、結果のプレビューを行います。
• XML フォーマッター — XMLの整形・圧縮・検証を行い、XML ↔ JSON を変換します。
• SQL フォーマッター — MySQL、PostgreSQL、SQL Server、SQLite、BigQuery、Oracle 向けにSQLを整形します。
• GraphQL フォーマッター — GraphQLのクエリやスキーマを整形・圧縮し、構文を検証してオペレーションを抽出します。
• Dockerfile フォーマッター — Dockerfileを整形し、ベストプラクティスやlintの提案を表示します。
• MongoDB クエリフォーマッター — MongoDBシェルのクエリと集約パイプラインを整形します。
• コントラストチェッカー — 2色間のWCAGコントラスト比とAA/AAA合格を確認します。
• Mermaid 図レンダラー — Mermaid図（フロー、シーケンス、ガント）をブラウザ内でSVGにレンダリングします。

コードフォーマッターのツールをすべて見る (32) · すべてのツール