カラーコンバーター＆ピッカー
任意の色を選択すると、その色のHEX、RGB、HSL値が瞬時に表示されます。クリックするだけで任意の形式をコピーをます。CSS、デザインツール、コードに最適です。
デザイナーと開発者向けに開発されたカラーツール
HEX、RGB、HSL間の変換をリアルタイムで行い、CSS、Figma、またはデザイントークンに直接コピーを。
リアルタイム変換
あらゆる形式のデータを編集でき、入力した瞬間にHEX、RGB、HSLが再計算されます。変換ボタンも遅延もありません。
3つのフォーマットが同期
コードにはHEX、計算にはRGB、直感的な調整にはHSL。これら3つはすべてリンクしているので、お好みに合わせて選択できます。
ワンクリックコピー
各フォーマットには専用のコピーをボタンがあり、CSSにそのまま使用できる値をクリップボードにコピーできます。そのままスタイルシートに貼り付けてください。
ビジュアルカラーピッカー
フルスペクトルピッカーを使って、視覚的に任意の色を選択できます。サンプリング、微調整、カラーパレットの探索に最適です。
CSS対応出力
あらゆるフォーマットが有効なCSSとして出力されます。フォーマット変換や再キャストは一切不要です。最新のブラウザやデザインツールすべてに対応しています。
完全プライベート - サーバーなし
色の計算はすべてブラウザ内で実行されます。色、パレット、値などのデータは、デバイスから外部に送信されることはありません。
カラーコンバーターは誰が使用していますか？
CSSを初めて学ぶ人から、デザインシステムを維持するブランドチームまで、あらゆるワークフローに対応するツールが1つだけ。
ウェブ開発者
CSSカスタムプロパティ、Tailwind設定、ブラウザのインスペクターから取得したHEXコード間でデザイントークンを変換します。
- CSS変数とTailwindの色
- Figma HEXをHSLに変換してテーマを作成する
- プラットフォーム間で色の不一致をデバッグする
デザイナー
Figma、Sketch、Adobe、Webなど、あらゆるプラットフォーム間でカラーパレットの一貫性を保ち、カラーシステム間のあらゆる色合いを瞬時に変換。
- FigmaからCSSへのHEXエクスポート
- HSLで彩度と明度を調整する
- ツール全体でブランドカラーを統一する
ブランド＆スタイルガイドチーム
デザイナーや開発者が必要とするあらゆるフォーマット（HEX、RGB、HSL）でブランドカラーパレットを文書化します。
- トリプルフォーマットのブランドパレットを生成する
- 共有可能なカラー仕様を作成する
- 監査レガシーカラーコード
色の変換方法
カラーピッカーを使って色を選択するか、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%)）は、色相、彩度、明度で色を定義します。これは、細かな調整を行うデザイナーにとって、より直感的な場合が多いです。
16進数コードを直接入力できますか？
はい。HEX入力フィールドをクリックして、有効な6桁のHEXコード（例：#3B82F6）を入力または貼り付けてください。RGB値とHSL値は自動的に更新されます。3桁（#RGB）と6桁（#RRGGBB）の両方の形式がサポートされています。
色データはサーバーに送信されますか？
いいえ。色の変換はすべてブラウザ内でJavaScriptを使用して行われます。サーバーにデータが送信されることはありません。
このツールを使ってCSSの色値を取得できますか？
はい、HEX、RGB、またはHSLの横にある「コピー」をクリックして、CSSに直接貼り付けるだけです。これら3つの形式はすべて有効なCSSカラー値であり、最新のブラウザですべてサポートされています。