デジタルの世界は、私たちの周りの色を文字と数字の単純な組み合わせに変換します。好きな色を取得するには、コードを取得するだけで、それを再現できます。
Webを閲覧しているときに、特定の色に気づきましたか？または、すべての一貫性を保つために、デザインで特定の色相を使用する必要がありますか？画面上の任意のピクセルのRGBまたはHEXコードを取得する方法は次のとおりです。
画面上の色のRGBまたはHEX値を決定します
画面上のRGBまたはHEXカラー値を識別するには、専門家の目や高価なツールは必要ありません。PCでは、カラーコードを取得する簡単な方法がいくつかあります。
PCアプリを使用する
画面から任意の色を取得する最初の方法は、コンピューターアプリケーションを使用することです。このアプリケーションは、すでにコンピュータにインストールされている可能性があります。
Windows用インスタントドロッパー
カラーコードを頻繁に取得する必要がある場合は、簡単なツールを手元に用意しておくと、作業が楽になります。Instant Eyedropperは現在、Windows専用の無料アプリケーションです。
インストールすると、システムトレイからアクセスできるようになります。選択した色でマウスの左ボタンを押したままにして、離すだけです。アプリケーションは即座にカラーコードをクリップボードにコピーし、それを任意のプログラムに貼り付けることができます。インスタントドロッパーはWindowsXP-10で動作します。
Mac用デジタルカラーメーター
Digital Color Meterは、Macデバイスにプリインストールされている同様のツールです。アプリケーションフォルダを開き、ユーティリティを探します。デジタルカラーメーターツールがすぐそこにあるはずです。
このアプリケーションを起動すると、カーソルがスポイトに変わり、画面から任意の色を選択できます。アプリはデフォルトでRGB値を表示します。それらをコピーして後でHEXに変換するか、設定を微調整して目的の正確な色を取得できます。
Mac用SIP
より高度なツールが必要な場合は、Macで利用可能なSIPを調べることができます。SIPは単なるカラーピッカーではありません。また、Webデザイナーなら誰でも喜ぶ多くの高度な機能を提供します。色を簡単に編集したり、パレットに整理したり、ニーズに合わせて形式を変更したりできます。
残念ながら、 SIPは無料のツールではありませんが、無料の試用版を提供しています。追加機能があなたのお金の価値があるかどうかを確認するためにそれを試してみることができます。
これらのデスクトップアプリケーションの利点は、画面のほぼすべての部分から色をキャプチャできることです。以下のブラウザツールは、Webページ内でのみこれを実行できます。もちろん、ブラウザで表示する写真やスクリーンショットをアップロードすることで、この制限を回避できます。
ブラウザを使用する
RGBまたはHEXコードの色を取得する次の簡単な方法は、ブラウザの組み込みツールを使用することです。既存のWebページからのみ色を選択できますが、これにはFirefoxとChromeの両方を使用できます。
Firefoxのカラーピッカーは次のとおりです。
- Firefoxを起動し、カラーコードを抽出するWebサイトを開きます。
- 右上隅にあるブラウザメニュー（3本の水平線）をクリックします。
- オプションの中からWeb開発ツールを見つけてください。「追加ツール」セクションにある可能性があります。
- ページの下部にウィンドウが開きます。スポイトアイコンを見つけると、ワンクリックでカラーコードをコピーできるようになります。
手順はChromeでも同様です。
- Chromeを起動し、目的のWebサイトを開きます。
- 右上隅のメニュー（縦に3つ並んだ点）をクリックし、[その他のツール]の下にある[開発者ツール]を見つけます。
- ページの右側にウィンドウが開きます。2番目のセクションで「スタイル」を見つけてクリックします。
- 「本体」の下に、色付きの長方形の束が表示されます。それらのいずれかをクリックして、カラーピッカーをアクティブにします。
助言。任意のページを右クリックして[検査]を選択することにより、両方のブラウザで開発者ツールを開くこともできます。
ブラウザ拡張機能を使用する
開発者ツールとは別に、便利なブラウザ拡張機能を使用して、Webページ上の任意の色を選択することもできます。次の拡張機能を確認してください。これらはすべて機能します。
ウェブサイトを使用する
色のRGBまたはHEXコードを決定するために、必ずしもアプリや拡張機能は必要ありません。色を取得したい特定の画像がある場合は、Webサイトを使用することもできます。数え切れないほどのWebサイトで、写真をアップロードしたり、カラーコードを抽出したり、調和のとれたパレットを作成したりすることができます。
PineTools画像カラーピッカー
PineTools Webサイトで画像カラーピッカーを見つけて、画像をアップロードします。必要に応じてズームインして、キャプチャするピクセルを見つけます。ワンクリックでRGB値と16進コードを取得します。
画像の色の選択
Image Color PickerのWebサイトには、画像のアップロード以外にもいくつかのオプションがあります。「画像を使用」をクリックして、画像をインポートする場所を選択します。画像の任意の部分をクリックして特定の色を選択できますが、Webサイトでは画像ベースのカラーパレットも提供しています。
画像カラー検索
シンプルなカラーピッカーであるだけでなく、ImageColorFinderはクリエイティブツールとしても機能します。アップロードされた画像をピクセル化して、色をよりよく表示し、必要なだけ拡大することができます。このサイトはまた、いくつかの色を自動的に提案します。
スクリーンショットを撮る
最後に、上記のすべてのツールを使用せずにカラーコードを決定できます。代わりに、スクリーンショットを撮り、そこから色を選択します。
- 選択する色が画面に表示されていることを確認してください。
- Windowsではキーボード（PrntScr、PrtScnなど）のPrint Screenボタンを押すか、Macでは「Shift + Command + 3」を同時に押し続けて、スクリーンショットを撮ります。スクリーンショットは自動的にクリップボードにコピーされます。ヒント：画面の一部のみをキャプチャすることもできます。Windowsでは、[スタート]メニューからSnippingToolを開きます。Macでは、キーボードショートカット「Shift +Command+4」を使用します。
- MSペイント（またはその他のイメージングアプリケーション）を開き、スクリーンショットを貼り付けます。
- スポイトツールを見つけて、色を選択します。
- MSペイントのカラーパレットの横にある[色の編集]をクリックします。スライダーの下に、現在の色のRGB値が表示されます。これらの数値を16進コードに変換するには、Webサイトのヘルプが必要になります。
- RGB to HEXに移動し、適切なフィールドに値を入力します。
- 「16進数に変換」をクリックすると、コードが表示されます。
追加のFAQ
RGBとHEXの違いは何ですか？私が必要なものは何？
RGBコードとHEXコードは同じ色を表します。ただし、必要なコードはその使用目的によって異なります。RGBコードは、目的の色を生成するために放出する赤、緑、および青の光の量を画面に指示します。HEXコードは同じ情報を伝達しますが、コーディング言語で伝達されます。
設計者または開発者は、おそらくカラーHEXコードを必要とします。
モバイルデバイスで色を決定する方法は？
モバイルデバイスの画面で色を選択するには、アプリをダウンロードするか、上記のWebサイトのいずれかを使用します。マークアップツールには、iOS用のカラーピッカーもあります。また、色のHEXコードを提供することもできます。
ワンクリックで見た色を手に入れましょう
RGBまたはHEXカラーコードを使用すると、エラーの可能性がなくなります。これらのユニバーサルカラー言語を使用すると、同じ色相でデザインの一貫性を保つことができます。画面上のカラーコードを抽出する方法はたくさんあるので、あなたはあなたにとって最も簡単な方法を見つける必要があります。
どのカラーピッカーが好きですか？または、追加する別の信頼できる方法がありますか？以下にお知らせください。
コメントを残す