- 対応形式で色を入力します — #3b82f6、rgb(59, 130, 246)、hsl(217, 91%, 60%) など。
- 他の形式が即座に更新され、色のライブプレビューも表示されます。
- CSS、デザインソフト、コードで使いたい形式をコピーします。
すべてブラウザ内でローカルに処理されるため、アップロードもアカウントもなく、変換回数の制限もありません。
HEX、RGB、HSLは同じ色を表す3つの見方です。Web開発者はこの間を行き来する場面が多くあります。デザインツールのパレットはHEXで届き、コンポーネントにはrgb()の上書きが必要で、アニメーションスクリプトはHSLの値で補間したいことがあります。手計算はエラーが出やすく、1桁間違えると色全体が変わってしまいます。
ヒント
#fff のようなショートハンドのHEXも使えます。解析できない入力をした場合は、勝手に推測せずエラーを表示するので、無効な値によって間違った色が静かに生成されることはありません。色相を変えずに明度だけを調整したい場合は、HSLの表示が便利です。
なぜ使うか
デザインツールもCSSも色を扱いますが、形式は別々です。ブラウザの開発者ツールと計算機を行き来する代わりに、このコンバーターならすべての形式を1か所で得られ、目視で確認できるプレビュー付きです。高速で、プライベート、そして正確です。
Real-world use cases
- API development: Format JSON responses from Chrome DevTools before committing fixtures.
- Debugging: Validate timestamps, regex or hashes without switching to a terminal or IDE.
- On-call fixes: From your phone, quickly convert timezone or generate a UUID for a hotfix branch.
How it compares
| Tool | Offline | Privacy | Setup | Cost |
|---|---|---|---|---|
| This tool | Yes | 100% local | None | Free |
| Server tools | No | May log IP | None | Free/Ads |
| CLI / IDE plugin | Yes | Local | Install & config | Free |
For quick checks without context switching, the browser tool is fastest. For CI, keep the CLI as source of truth.
Pro tips
- Bookmark the tool. With prefetch enabled, it opens near-instantly next time.
- For secrets like hashes with salts, prefer your local terminal for production values.
- Pair UUID/Password generators with your password manager for rotation workflows.