カラーコンバーター＆カラーピッカー
好きな色を選ぶと、HEX、RGB、HSLの値がすぐに表示されます。クリックするだけでどの形式もコピーでき、CSSやデザインツール、コードに最適です。
色の変換方法
カラーピッカーで色を選ぶか、HEX、RGB、HSLの値をいずれかの入力欄に直接入力します。
すべての形式がすぐに更新されます。
変更するたびに、HEX、RGB、HSLの値がリアルタイムで再計算されます。
使いたい形式の横にあるコピーボタンをクリックすると、値がクリップボードにコピーされ、CSSやFigma、コードにそのまま貼り付けられます。
よくある質問
HEX、RGB、HSL間の色変換について、よくいただく質問にお答えします。
HEX、RGB、HSLの違いは何ですか？
HEX（例：#FF5733）は、HTMLやCSSで使われる16進数の表記です。RGB（例：rgb(255, 87, 51)）は、赤・緑・青のチャンネルで色を表します。HSL（例：hsl(11, 100%, 60%)）は、色相・彩度・明度で色を表すため、デザイナーが微調整するときに直感的に扱いやすい形式です。
HEXコードを直接入力できますか？
はい。HEXの入力欄をクリックして、有効な6桁のHEXコード（例：#3B82F6）を入力または貼り付けてください。RGBとHSLの値は自動的に更新されます。3桁（#RGB）と6桁（#RRGGBB）の両方の形式に対応しています。
色のデータはサーバーに送信されますか？
いいえ。色の変換はすべてJavaScriptを使ってブラウザ内で行われます。サーバーには何も送信されません。
このツールでCSSのカラー値を取得できますか？
はい。HEX、RGB、HSLのいずれかの横にあるコピーをクリックして、そのままCSSに貼り付けるだけです。3つの形式はいずれも、最新のブラウザで利用できる有効なCSSカラー値です。
デザイナーと開発者のためのカラーコンバーター
HEX、RGB、HSLをリアルタイムで相互変換し、そのままCSS、Figma、デザイントークンにコピーできます。
リアルタイム変換
どの形式を編集しても、入力と同時にHEX、RGB、HSLが再計算されます。変換ボタンも待ち時間も不要です。
3つの形式を同期
コードにはHEX、計算にはRGB、直感的な調整にはHSL。3つの形式が連動しているので、使いやすいものを選べます。
ワンクリックでコピー
各形式に専用のコピーボタンがあり、CSSでそのまま使える値をクリップボードにコピーします。スタイルシートにそのまま貼り付けられます。
ビジュアルカラーピッカー
フルスペクトルのピッカーで、色を見ながら選べます。色の抽出や微調整、パレットの探索に便利です。
CSSにそのまま使える出力
すべての形式が有効なCSSとして出力されるため、書き直しや変換の手間がありません。最新のブラウザやデザインツールで利用できます。
100%プライベート — サーバー不要
色の計算はすべてブラウザ内で実行されます。色やパレット、値がお使いのデバイスの外に出ることはありません。
カラーコンバーターの活用シーン
CSSを学び始めた方から、デザインシステムを運用するブランドチームまで、1つのツールであらゆるワークフローに対応します。
Web開発者
ブラウザのインスペクターで取得したHEXコードを、CSSカスタムプロパティやTailwindの設定、デザイントークンの間で変換できます。
- CSS変数とTailwindのカラー
- FigmaのHEXをテーマ用にHSLへ変換
- プラットフォーム間の色の不一致をデバッグ
デザイナー
Figma、Sketch、Adobe、Webの間でパレットを統一できます。どの色もカラーシステム間ですぐに変換できます。
- FigmaのHEXをCSS用に書き出し
- HSLで彩度と明度を調整
- ツールをまたいでブランドカラーを統一
ブランド・スタイルガイド担当チーム
デザイナーにも開発者にも必要なHEX、RGB、HSLのすべての形式を並べて、ブランドパレットをドキュメント化できます。
- 3形式対応のブランドパレットを作成
- 共有しやすいカラー仕様を作成
- 古いカラーコードを棚卸し