カラーコード変換ツール
HEX・RGB・HSLを相互変換。カラーピッカーでビジュアルに色を選択。
RGB スライダー
R 37
G 99
B 235
Webデザインやアプリ開発で「この色のカラーコードは？」と聞かれた経験はありませんか。デザインカンプではHEXで指定されているのに、CSSではRGBで書きたい──そんな変換作業を一瞬で解決するツールです。カラーピッカーで直感的に色を選んで、HEX・RGB・HSLの3フォーマットをワンクリックでコピーできます。
このツールでできること
- HEX ⇔ RGB ⇔ HSL 相互変換 ── どのフォーマットから入力しても、残り2つが自動変換されます
- カラーピッカー ── ビジュアルに色を選択し、コードを自動生成
- RGBスライダー ── R/G/B各チャンネルをスライダーで微調整
- コピーボタン ── 各フォーマットをワンクリックでクリップボードにコピー
- リアルタイムプレビュー ── 入力と同時に色プレビューが更新されます
カラーコードの基礎知識
| フォーマット | 表記例 | 特徴 |
|---|---|---|
| HEX | #FF5733 | CSS/HTMLで最も一般的。短縮形（#F53）も使用可能 |
| RGB | rgb(255, 87, 51) | 赤・緑・青の3値（0-255）で指定。rgba()で透明度も指定可能 |
| HSL | hsl(11, 100%, 60%) | 色相・彩度・明度で指定。色の微調整がしやすい |
活用例・使い方Tips
- Figma→CSS変換：FigmaのカラーコードはHEX形式。CSSでrgb()やhsl()を使いたい場合に本ツールで変換
- ダークモード対応：HSLのL（明度）を下げるだけでダークモード用の色を生成できます
- 配色の微調整：HSLのH（色相）を±10度ずつずらすと、調和のとれた配色が作れます
最終更新日:
よくある質問
HEXカラーコードとは何ですか？
HEXカラーコードは16進数で色を表現する方法です。#に続く6桁の数字・英字（例：#FF5733）で、先頭2桁が赤（R）、中間2桁が緑（G）、末尾2桁が青（B）を表します。CSSやHTMLで最も広く使われる色指定方法です。
RGBとHSLの違いは？
RGBは赤・緑・青の3原色の混合で色を表現します。HSLは色相（Hue, 0-360°）・彩度（Saturation, 0-100%）・明度（Lightness, 0-100%）で表現します。HSLの方が人間の感覚に近く、「もう少し明るく」「もう少し鮮やかに」といった調整がしやすいのが特徴です。
Webデザインで使いやすいのはどのフォーマット？
CSSではHEX（#FF5733）が最も一般的です。透明度を含める場合はrgba()やhsla()を使います。最近のCSSではhsl()が推奨される傾向にあり、色の微調整がしやすいメリットがあります。
カラーコードをコピーするにはどうすればいいですか？
各フォーマット（HEX/RGB/HSL）の横にあるコピーボタンをクリックすると、クリップボードにコピーされます。そのままCSSやデザインツールに貼り付けて使えます。
入力したデータはサーバーに送信されますか？
いいえ。すべての変換処理はブラウザ上で完結しており、入力データがサーバーに送信されることはありません。
関連する計算ツール
ご注意
本ツールの変換結果は参考値です。ブラウザやモニターにより色の見え方は異なります。 計算は暮らし・変換の情報に基づいています。