CSS カラー変換

HEX、RGB、HSL 間で変換し、ライブスウォッチを表示します。

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

可読性を確認しますか? 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 エンジニア向けに作られています。すべてはブラウザ内のローカルで動作するため、入力した値が端末から外に出ることはありません。

機能

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 に変換し、対応するライブスウォッチを表示。

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

よくある質問

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

関連ツール

すべての ArrayKit ツール