カラーコード変換

HEX・RGB・HSLをブラウザだけで変換

HEX・RGB・HSLのいずれかのフィールドに色を入力すると、残り2つの形式が即座に更新されます。現在の色を示すスウォッチも同時に表示されるので、CSSのコーディングやデザインの受け渡し、色コードの見た目確認にそのまま使えます。

変換処理は標準的なsRGB↔HSLの計算式（ブラウザが内部でhsl()やrgb()を扱う際と同じ数式）を自前実装しており、外部ライブラリには依存していません。

入力した内容が端末の外に出ない理由

ここでのプライバシーは約束ではなく仕組みです。送信先のサーバーが存在しないため、アップロードという工程がそもそもありません。

• 変換処理はすべてブラウザ内で実行されます。
• ページは静的ファイルとして配信され、入力した色の値を伴うリクエストは送信しません。
• ソースは公開されており、誰でも読めます（MIT）。
• オフラインでも動作します。これは、データが端末から出ないからこそ可能です。

ご自分で確かめるなら、変換中にブラウザの Network パネルを開いてください。入力値を運ぶリクエストは出ていません。 ソースを読む。

使い方

1. いずれか1つのフィールドに色を入力

   HEXコード（#fff または #ffffff）、RGB値（rgb(255,0,0) または 255,0,0）、HSL値（hsl(0,100%,50%) または 0,100%,50%）のいずれかを入力します。

2. 残り2つが自動で更新される

   入力していない残り2つのフィールドが対応する値に自動更新され、カラースウォッチのプレビューも合わせて変わります。

3. 不正な入力はそのフィールドだけエラー表示

   その形式として無効な値を入力した場合、そのフィールドだけにエラーが表示されます。残り2つのフィールドは直前の有効な値を保持するので、入力内容が消えることはありません。

よくある質問