~/devtools / color
tool::color
Color
Converter
HEX・RGB・HSL形式のカラーコードをリアルタイムで変換。カラーピッカーで視覚的に選択するか、任意の形式で直接入力できます。
// カラー形式
HEX: #RRGGBB — RGB: rgb(R, G, B) — HSL: hsl(H°, S%, L%)
// カラーピッカー
#00FF88
// フォーマット
HEX
RGB
HSL
// プリセット
ad · 300×250
// about this tool
Color Converterとは？
Web開発やデザイン作業ではHEX・RGB・HSLのカラー形式を頻繁に切り替える必要があります。デザインツールはHEXで出力することが多い一方、CSSではrgb()やhsl()の方が可読性が高い場合があります。
HEX（#RRGGBB）はWebで最も一般的なカラー表記です。RGBは各チャンネルの強度を0〜255で表します。HSL（色相・彩度・明度）はカラー調整に直感的で、パレット作成に最適です。
このツールは3つの形式をリアルタイムで相互変換します。カラーピッカーで視覚的に色を選択することもできます。変換された値はワンクリックでコピーしてCSSに直接使用できます。
主な使用例
- ▸FigmaやSketchのHEX値をCSS用RGBに変換
- ▸デザインシステム用にブランドカラーを複数フォーマットに変換
- ▸HSLで明度を調整してホバー・無効化状態のカラーを作成
- ▸アクセシビリティレビュー用のカラーコントラスト分析を準備
- ▸CSSカスタムプロパティ（--color-primaryなど）の値を決定
よくある質問
Q. RGBとHSLの違いは何ですか？
RGBは赤・緑・青の光の組み合わせで色を表します。HSLは色相（0〜360°）・彩度（0〜100%）・明度（0〜100%）を使用し、カラー調整がより直感的にできます。
Q. 3桁のHEX（#RGB）は入力できますか？
#RGBは#RRGGBBの省略形です。例えば#f0aは#ff00aaと同じです。このツールは3桁のHEXを受け付け、自動的に6桁に展開します。
Q. アルファ（透明度）はサポートされていますか？
現バージョンでは完全に不透明なカラー（alpha=1）のみをサポートしています。rgba()およびhsla()の透明度変換は今後のアップデートで対応予定です。
// related tools