カラーピッカー/ HEX · RGB · HSL
色の選択、フォーマット変換、配色パレットを一体化。HEX、RGB、HSL、HSV に対応し、明度スケールとカラーハーモニーを自動生成します。
カラーコード
プリセットカラー
明度スケール
カラーハーモニー
補色
類似色
三色配色
このツールは役に立ちましたか？
よくある質問
どのカラーフォーマットに対応していますか？
HEX（例: #6366f1）、RGB（例: rgb(99, 102, 241)）、HSL（例: hsl(239, 84%, 67%)）、HSV/HSB に対応しています。入力フィールドにいずれかの形式を入力すると、自動的に解析・変換されます。
スポイト（EyeDropper）とは何ですか？
スポイトボタンをクリックすると、画面上の任意の場所をクリックしてそのピクセルの色を取得できます。ブラウザの EyeDropper API を使用しており、Chrome、Edge、Opera で利用可能です。Firefox と Safari ではまだサポートされていません。
明度スケールとは何ですか？
明度スケールは、選択した色の色相と彩度を維持したまま、非常に暗い（明度10%）から非常に明るい（明度90%）までの9段階の色合いを表示します。UI デザインで一貫したカラーパレットを構築するのに便利です。
カラーハーモニーとは何ですか？
カラーハーモニーは、視覚的に調和する色の組み合わせです。補色はカラーホイールの反対側（高コントラスト）、類似色は隣接する色（調和的）、トライアドは等間隔の3色（鮮やかでバランスが良い）です。
HSL と HSV の違いは何ですか？
どちらも色相（H）と彩度（S）を使用しますが、3番目の要素が異なります。HSL は明度 L（0%=黒、50%=純色、100%=白）を使用し、HSV は明度 V（0%=黒、100%=最大輝度）を使用します。HSV は Photoshop などのデザインツールで、HSL は CSS でよく使われます。
CSS でこれらの色をどう使いますか？
最も一般的な HEX 値（例: #6366f1）をそのままコピーして使えます。透明度が必要な場合は RGB 値を使用: rgba(99, 102, 241, 0.5)。CSS カスタムプロパティで明度や彩度をプログラム的に調整したい場合は HSL 値が便利です。