Color Picker

このツールについて

カラーピッカーでは色を視覚的に選択し、HEX・RGB・HSLの表現をリアルタイムで確認できます。ネイティブカラーピッカーで広範な選択、RGBスライダーでチャンネルレベルの精密制御ができます。

選んだ色は自動的に「最近使った色」の履歴に保存され、再入力なしに素早く戻ることができます。色のバリエーションを比較したり、複数ツールでパレットを作る際に便利です。

使い方

1. 大きな色スウォッチをクリックしてブラウザのネイティブカラーピッカーを開き、色を選択します。
2. R・G・Bスライダーをドラッグして各チャンネルを精密に調整します。
3. HEX・RGB・HSLの隣にあるコピーボタンをクリックして値をクリップボードにコピーします。
4. コピーした色は「最近使った色」の行に表示されます — スウォッチをクリックすると復元されます。

活用事例

Webデザイナーはブランドガイドから正確な色を選びCSSにhexコードをコピーします。開発者はcanvasやWebGLのためにRGB値を微調整します。UIデザイナーはスライダーを調整して同じ色相の微妙なバリエーションを比較します。

よくある質問

• 選んだ色は永続的に保存されますか？ — いいえ。「最近使った色」はコンポーネントの状態に保存され、ページを離れるかリロードするとリセットされます。永久保存にはhexコードをコピーしてメモしてください。
• hexコードを直接入力できますか？ — はい。多くのブラウザのネイティブカラーピッカーにはhex入力フィールドがあり、直接入力できます。
• HSLとは何で、なぜ便利なの？ — HSLは色相(Hue)・彩度(Saturation)・輝度(Lightness)の頭文字です。人間の直感に沿った方法で色を表現します。輝度を変えると同じ色相を保ちながら明るくも暗くもできるため、ティントやシェードの生成に便利です。