アプリまたはウェブサイト上の特定の色を識別する方法

Web やアプリのデザイン、感情の伝達、ブランディング、ユーザー エクスペリエンスの向上など、色は確かに重要な役割を果たします。ただし、適切な色や色の組み合わせを見つけるのは、言うは易く行うは難しです。ありがたいことに、アプリや Web サイト上の特定の色を識別するためのツールがいくつかあるので、気になった色を選択して保存できます。

アプリまたはウェブサイト上の特定の色を識別する方法

Web サイトをスクロールして、完璧な色、次のプロジェクトに必要なまさにその色合いを見つけることを想像してください。それでは、ウェブサイトやアプリの背景やその他の要素の正確な色を見つけるお手伝いをさせていただきます。

1. Web ツールまたは Web サイトを使用して Web サイト上の HEX カラーコードを見つける

Web サイトからカラーコードを取得する最も簡単な方法の 1 つは、専用の Web ツールとカラー ピッカー Web サイトを使用することです。使用するブラウザが、Web との互換性が高いChromium ベースであっても、Apple のデフォルトの Safari であっても、この方法は適用できます。

さらに、Mac、Windows ラップトップ、iPhone、iPad、Android デバイスのいずれを使用している場合でも、これらの色を識別する Web ツールは、あなたの武器に追加すると便利です。いくつかのオプションをテストしましたが、ここでは最も適したオプションを紹介します。

ステップ 1 : ブラウザを開いて、ImageColorPicker.com にアクセスします。

画像カラーピッカー

ステップ 2 : [画像を使用] をクリックまたはタップして、Web サイト/画像の URL を指定するか、画像をアップロードします。

アプリまたはウェブサイト上の特定の色を識別する方法

ステップ 3 : 次のいずれかを行うことができます。

  • ウェブサイトのアドレスをコピーする
  • 画像またはその URL をコピーします
  • ページのスクリーンショットを撮る

アプリまたはウェブサイト上の特定の色を識別する方法

ステップ 4 : 画像が処理されたら、カーソルを移動して色を選択できます。

ステップ 5 : 同様に、HEX または RGB コードが表示され、必要に応じてコピー/貼り付けして使用します。

アプリまたはウェブサイト上の特定の色を識別する方法

ImageColorPicker.com が気に入らない場合、またはより多くのオプションが必要な場合は、次の Web サイトを試してみてください。

レッドケチャップ カラーピッカー

HTML カラーコード

パインツール

ただし、ImageColorPicker とは異なり、これらの Web サイトは Web サイトまたは画像の URL をサポートしません。画像のアップロードはあなたに依存しています。したがって、スクリーンショットを撮ってアップロードし、色を見つける必要があります。

2. 写真編集ソフトウェアを使用してウェブサイトから色を選択する

写真編集ツールを使用している場合は、それ以上探す必要はありません。 Photoshop などの高度な写真編集ソフトウェアであっても、Canva などのオンライン ツールであっても、ほとんどの写真編集ソフトウェアには、Mac の Quick LookiPhone のスクリーンショット エディターなど、便利なカラー ピッカー/スポイト ツールが装備されています。

ただし、すべてが Web サイトやアプリからカラーコードを取得するのに役立つわけではありません。ウィンドウ内の色を選択して使用できるようになります。それが気に入ったら、お好みの写真編集ツールを使用して特定の色を識別してください。ここではCanva を例に挙げます。

ステップ 1 : Web サイトまたはアプリのスクリーンショットを撮ります。

ステップ 2 : ブラウザ (またはモバイルデバイスのアプリ) で Canva を開きます。

ステップ 3 : キャンバスを選択し、画像をアップロードします。

アプリまたはウェブサイト上の特定の色を識別する方法

ステップ 4 : 次に、色関連のツール、テキスト、描画、要素などを開きます。

ステップ 5 : カラーボックスを選択し、「+ 新しい色の追加」アイコンをクリックします。

アプリまたはウェブサイト上の特定の色を識別する方法

ステップ 6 : 色までスクロールし、クリック/タップして目的の色を選択します。

アプリまたはウェブサイト上の特定の色を識別する方法

3. Firefox のカラーピッカーを使用して、あらゆる Web サイトから色を見つける

写真編集ソフトウェアに加えて、Firefox ブラウザにはスポイト ツールも組み込まれています。少し隠されているので、そのハックを明らかにしましょう。

ステップ 1 : Firefox を起動し、色を選択したい Web サイトを開きます。

ステップ 2 : 右上隅にある三本線のアイコンをタップします

ステップ 3 : [その他のツール]、[スポイト] の順に選択します。

アプリまたはウェブサイト上の特定の色を識別する方法

ステップ 4 : ここで、カーソルを識別したい色に移動するだけで、Firefox が即座に 16 進数のカラーコードを見つけて表示します。

アプリまたはウェブサイト上の特定の色を識別する方法

ステップ 5 : 特に、スポイトツールは終了するまでカラーコードの検査と配信を続けます。ツールを閉じるには、画面上の任意の場所をクリックするだけです。

Firefox と同様に、Chrome にも、Web サイト上の特定の色を識別するのに役立つ開発者ツールがいくつかあります。ただし、落とし穴があります。確認してみましょう。

4. Chrome 開発者ツールを使用して色を選択する

Google Chrome のカラーピッカー ツールはかなり制限されています。このトリックは、Web サイトにコード化された要素の色、つまりコードで言及されている色のみを伝えることができます。したがって、ロゴや画像などのインポートされた要素に関する色関連の情報を取得することはできません。

ステップ 1 : Chrome を起動し、色を選択したい Web サイトを開きます。

ステップ 2 : 次に、右上隅にある 3 点アイコンをクリックします。

ステップ 3 : [その他のツール]、[開発者ツール] の順に選択します。

アプリまたはウェブサイト上の特定の色を識別する方法

: 画面は視覚的に 2 つのページに分割されます。左側に Web サイト、右側にサイトのコードが表示されます。

ステップ 4 : Web サイトから色を選択するには、Ctrl + Shift + C を入力し、選択したい色にカーソルを移動します。

ステップ 5 : 背景、テキスト、または要素のカラーコードを表示できるようになりました。

アプリまたはウェブサイト上の特定の色を識別する方法

5. ブラウザ拡張機能を使用して、Web サイト上の色の 16 進コードを検索する

ブラウザ拡張機能を使用すると、生産性が向上するだけでなく、色の識別がさらに便利になります。ありがたいことに、Chrome や Firefox サポートを含むほとんどの一般的なブラウザには、そのような拡張機能が備わっています。

色を識別するための Chrome 拡張機能

16 進カラーピッカー

スポイト

カラースポイト

色を識別するための Firefox 拡張機能

カラージラ

カラーピックスポイト

目的の拡張機能をブラウザに追加したら、あとは簡単です。ウェブサイトを開く → メニューバーから拡張機能を選択 → カーソルを色に移動 → カラーコードを取得します。

色を選んでください

あなたがデザイナー、開発者、または遭遇した色に興味がある人であっても、アプリや Web サイト上の特定の色を識別することは便利なスキルです。このように、とらえどころのないカラーコードや色の名前を見つけるのに役立つ複数の方法とツールを取り上げてきました。

お役に立てれば幸いです。このようなハックや提案がさらに必要な場合、または技術関連の不可解な質問への回答が必要な場合は、コメント セクションがいつでも開いています。

コメントを残す

リテーナーケースの洗浄方法:安全で簡単な、実際に乾燥させる手順

リテーナーケースの洗浄方法:安全で簡単な、実際に乾燥させる手順

中性洗剤とぬるま湯を使ってリテーナーケースを洗浄する方法、適切に乾燥させる方法、熱による損傷を避ける方法、そしてケースを交換すべき時期について学びましょう。

車のエアフィルターを安全に掃除する方法:掃除するタイミングと交換するタイミング

車のエアフィルターを安全に掃除する方法:掃除するタイミングと交換するタイミング

エンジンエアフィルターの点検と整備方法、清掃が適切な場合、交換の方が安全な場合、そして適切な再取り付けを確認する方法を学びましょう。

冷凍庫の製氷機の掃除方法:初心者向けガイド

冷凍庫の製氷機の掃除方法:初心者向けガイド

冷凍庫の製氷機を安全に清掃する方法を学びましょう。製氷容器、アクセス可能な製氷機表面、ディスペンサーシュート、乾燥、再組み立て、そして避けるべき間違いについて解説します。

ビデノズルを安全に洗浄する方法:効果的な方法と避けるべき方法

ビデノズルを安全に洗浄する方法:効果的な方法と避けるべき方法

ビデのノズルを安全に洗浄する方法、セルフクリーニングの実際の仕組み、ミネラル分の蓄積への対処法、そしてお使いの機種に合った洗浄剤について学びましょう。

プール用砂ろ過器の掃除方法:逆洗、すすぎ、そしてより深く洗浄するタイミングを知る

プール用砂ろ過器の掃除方法:逆洗、すすぎ、そしてより深く洗浄するタイミングを知る

プールの砂ろ過器を安全に清掃する方法、逆洗が効果的だったかどうかを判断する方法、そしてより徹底的な清掃、修理、またはろ材の交換が必要となるタイミングについて学びましょう。

コーヒーグラインダーを安全に洗浄する方法:臼式グラインダーと刃式グラインダーのための8ステップガイド

コーヒーグラインダーを安全に洗浄する方法:臼式グラインダーと刃式グラインダーのための8ステップガイド

コーヒーグラインダーを安全に清掃する方法を学びましょう。刃の乾式ブラッシングから、取り外し可能な部品の洗浄、再組み立て、テスト、ブレードグラインダーの手入れまで、幅広く解説します。

服の生地を傷めずにネイルグルーを落とす方法

服の生地を傷めずにネイルグルーを落とす方法

乾いた接着剤を削り取る方法から、アセトンの慎重な使用、洗濯、乾燥前の生地の確認まで、衣類についたネイルグルーを安全に除去する方法を学びましょう。

生地を傷めずに服からステッカーの跡を落とす方法

生地を傷めずに服からステッカーの跡を落とす方法

衣類についたステッカーの跡を安全に除去する方法を学びましょう。低温処理や前処理から、溶剤の慎重な使用、洗濯、自然乾燥まで、様々な方法をご紹介します。

メカニカルキーボードを安全にクリーニングする方法:4ステップの徹底クリーニングガイド

メカニカルキーボードを安全にクリーニングする方法:4ステップの徹底クリーニングガイド

メカニカルキーボードを安全にクリーニングする方法を学びましょう。取り外し可能なキーキャップ、ほこりや汚れの除去、乾燥、再組み立て、そして作業を中断してマニュアルを確認すべきタイミングなどについて解説します。

生地を傷めずに服から接着剤を落とす方法

生地を傷めずに服から接着剤を落とす方法

まずは、衣類についた接着剤を優しい方法で落とす方法、ホットグルーや瞬間接着剤を使うべきタイミング、そして乾燥前に生地の状態を確認する方法を学びましょう。