ã«ã©ã¼ããã«ã¼
このツールについて
カラーピッカーを使えば、ビジュアルに任意の色を選択するか特定の値を入力して、HEX、RGB、HSL形式の等価値をすぐに確認できます。また、色の明度バリエーションを探索したり、任意の形式をワンクリックでコピーしたりできます。デザイナー、開発者、デジタルメディアで色を扱うすべての人に欠かせないツールです。
使い方
- カラースペクトラムの任意の場所をクリックして色を選択します。
- 色相スライダーをドラッグしてベースカラーを変更します。
- 明るさ/彩度スライダーを調整して微細なコントロールをします。
- または入力フィールドに直接特定のHEX、RGB、またはHSL値を入力します。
- 任意のカラーコードをクリックしてクリップボードにコピーします。
主な用途
- デザインモックアップで見た色のHEXコードを見つける
- CSSで使用するためにRGBカラー値をHEXに変換
- ブランドパレットのカラーバリエーションを探索
- ウェブページの構築やスタイリング時にカラーコード値を確認
使いこなすヒント
- HEX入力フィールドを使って既知のカラーコードを入力すると、すぐにそのRGBとHSLの等価値が確認できます。
- HSLはデザイナーにとってより直感的なことが多いです——色相（0-360）、彩度、明度が独立しています。
- 選択時にブラウザがアドレスバーを更新する場合は、特定の色のURLをブックマークしましょう。
よくある質問
HEX、RGB、HSLのカラー形式の違いは何ですか？
HEXとRGBはどちらも色を赤、緑、青のコンポーネントで表しますが、表記法が異なります。HSLは色相、彩度、明度を表すため、デザイナーは色の明るさや鮮やかさを独立して調整できます。
デザインモックアップで見た色のHEXコードをどうやって見つけますか？
カラースペクトラムを使用するか、既知のRGB/HSL値を入力フィールドに入力してください。ツールは即座に等価なHEXコードを表示します。
カラーコードをCSS で直接使用できるようにコピーできますか？
はい。表示されたカラーコード（HEX、RGB、またはHSL）のいずれかをクリックしてクリップボードにコピーし、スタイルシートに直接貼り付けられます。
このツールはアルファ透明度値をサポートしていますか？
RGBA またはHSLA形式が出力で利用可能な場合、色と共に透明度をキャプチャできます。標準RGB/HSL フィールドの横にあるフォーマットオプションを確認してください。
色選択はサーバーに送信されますか？
いいえ。すべてのカラー変換の計算はブラウザ内でローカルに実行されます。カラー値は送信されたり記録されたりしません。
色を選択してHEX、RGB、HSLコードを取得。カラーパレットやコントラストチェックも対応。
カラーピッカー · カラーツール · カラーパレット · HEXコード · RGBコード · HSLコード · デザインツール · 色選択 · カラ―コンバーター · カラ―コード · カラースキーム · カラージェネレーター · カラーユーティリティ · カラーピッカーオンライン · 色選択ツール · カラ―コントラスト · コントラストチェッカー · コントラストツール · コントラスト比 · コントラスト計算