アプリやウェブサイトで特定の色を識別する方法

画像をスクロールしていて、次のデザインプロジェクトに必要な正確な色合いである完璧な色を見つけたと想像してみてください。インターネット上には、アプリやWebサイトの特定の色を識別するのに役立つ素晴らしいツールがいくつかあります。それらの最良のオプションのいくつかを見てみましょう。

1. ChromeWebブラウザで開発者ツールを使用する

試すことができるオプションの1つは、Chromeデベロッパーツールです。Chromeには開発者にとって役立つ機能がたくさんあり、タスクをはるかに簡単に実行できます。次の手順を使用して、アプリやWebサイトの特定の色を識別できます。

• Chromeウェブブラウザで色を識別したいウェブサイトを開きます
• Chromeの右上にある3つのドットのアイコンをクリックします。一連のオプションを含むポップアップが表示されます。
• [その他のツール]をクリックし、表示されるポップアップから[開発者ツール]を選択します。
• 上記の手順をスキップする場合は、Ctrl + Shift + Iを使用します
• これで、ウィンドウは2つの画面に分割されます。左側のWebサイトと、右側のWebサイトのコードです。
• キーボードでCtrl + Shift + Cを入力します。これにより、マウスカーソルを要素に合わせると、Webサイト上の特定の要素のすべての詳細が表示されます。
• 要素のカラーコードは、他の役立つ情報とともに見つけることができます。

例

次のWebサイトの一部の要素の特定のカラーコードに関心があるとします。

画面の隅にある3つのドットをクリックして、開発者ツールを選択できます。ドロップダウンメニューで、[その他のツール]、[開発者ツール]の順に選択します。

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

コマンドとショートカット「Ctrl + Shift + C」を入力し、Webサイトの要素の上にマウスカーソルを置きます。これにより、その要素の色が他の有用な情報とともに表示されます。以下は、検索ツールの下にあるナビゲーションバーとダッシュボードの色を見つける2つの例です。

ここでは、ナビゲーションバーのポップアップにカラーコードがあります。カラーコードは＃333333です。

ダッシュボードの色は、他の便利な詳細とともに見つけることができます。色：＃333333、背景色：＃5D4A8E。最初は少し怖そうに見えるかもしれませんが、少し練習すればプログラムははるかに使いやすくなります。

2.スポイトクローム拡張機能

スポイトは、ウェブサイトやアプリで特定の色を見つけるのに役立つ、人気があり広く使用されているChrome拡張機能です。

以下の手順に従って、スポイト拡張ツールを使用してWebサイトまたはアプリの特定の色を識別します。

• Chromeウェブブラウザでウェブサイトまたはアプリを開きます
• スポイト拡張機能アイコンをクリックします
• [ウェブページから色を選択]を選択し、アプリまたはウェブサイトのさまざまな要素にマウスカーソルを合わせます。

ウェブページの右下にリストされている要素のカラーコードを見つけることができます。

例

さて、実際の例でスポイト拡張ツールを使用してみましょう。まず、ウェブサイトを開いて、スポイト拡張機能アイコンを押します。

ウェブサイトのさまざまな要素にカーソルを合わせると、画面右下のセクションにカラーコードが表示されます。

V字型のアイコンにカーソルを合わせると、前述のように下部のウィンドウにそのカラーコードが表示されます。このツールの利点は、要素の16進カラーコードと一緒にRGBコードも見つけることができることです。この方法は、お気に入りの色のコードを簡単かつ迅速に取得する方法が必要な場合に柔軟に使用できます。