カラーピッカー:11形式のカラーコードをブラウザで取得
ネイティブピッカーで色を選ぶか、対応ブラウザでは画面のEyeDropperを使います。カラーピッカーは選択した色をhex、RGB、HSL、HSV、HWB、CMYK、LAB、LCH、OKLabを含む11形式で表示します。どの形式もワンクリックでコピーでき、値と並んで最も近いCSSの名前付きカラーを確認できます。
カラーピッカーは、色を選んで11形式を一度に表示するブラウザベースのツールです。ネイティブピッカーで色を選ぶか、対応ブラウザでは画面のEyeDropperを使います。最も近いCSSの名前付きカラーも表示されるので、数値やコード値と並んで認識しやすい名前を確認できます。
色を選ぶと、カラーピッカーは利用可能な表現をhex、RGB、HSL、HSV、HWB、CMYK、LAB、LCH、OKLabを含めて表示します。形式の文字列をクリックすると作業用にコピーできます。形式をまとめて表示するので、手動で変換せずに値を比較しやすくなります。最も近いCSSの名前付きカラーは参考として表示されます。最も近い名前付きカラーであり、必ずしも完全一致ではありません。
これらの形式は色を異なる方法で表します。HexとRGBはコード化または数値のチャンネル値で色を表し、HSLとHSVは色相ベースのモデルを使います。LAB、LCH、OKLabは色を表す別の方法です。複数の表現が用意されていると、スタイルシート、デザインリファレンス、ドキュメントが特定の形式を求めるときに役立ちます。ツールではまず色を選び、タスクに合う表現をコピーできます。
カラーピッカーは完全にブラウザ上で動作します。入力はデバイス上で処理され、サーバーにアップロード・保存・送信されることはありません。ページの読み込み後は接続なしで使えるので、オフラインでも動作します。異なる形式で色の値を選択、確認、コピーしたい開発者、デザイナー、誰にでも役立ちます。
手順1: カラーピッカーを開き、ネイティブピッカーで色を選びます。
手順2: ブラウザが対応している場合、画面のEyeDropperで画面上の色を選択します。
手順3: 見た目がしっくりくるまで色を調整します。選択した色に合わせて利用可能な形式の値が更新されます。
手順4: 11のカラー形式と、並んで表示される最も近いCSSの名前付きカラーを確認します。
手順5: 必要な形式の文字列をクリックしてコピーし、コードやドキュメントに貼り付けます。
用途: 色の値を推測する代わりに、対話的に色を選んでから、必要な表現をコピーします。
用途: 対応している場合は画面のEyeDropperでデザインやドキュメントから色を拾い、正確な表示値を取得します。
用途: 使う表現を決める前に、同じ色を複数の形式で比較します。
用途: スタイルシート用のhexやRGB値をコピーしたり、タスクに必要な別の形式を選んだりします。
用途: 選んだ色に馴染みのある名前があるか知りたいときに、最も近いCSSの名前付きカラーを確認します。
用途: カラーピッカーが示す形式間を手動で変換する代わりに、1か所で色の値を取得します。