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

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 LookやiPhone のスクリーンショット エディターなど、便利なカラー ピッカー/スポイト ツールが装備されています。

ただし、すべてが 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 サイト上の特定の色を識別することは便利なスキルです。このように、とらえどころのないカラーコードや色の名前を見つけるのに役立つ複数の方法とツールを取り上げてきました。

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