如何識別應用程式或網站上的特定顏色

無論是網頁和應用程式設計、傳達情感、品牌推廣或增強用戶體驗,顏色無疑都發揮著至關重要的作用。然而,找到正確的顏色或​​顏色組合說起來容易做起來難。值得慶幸的是,我們可以使用一些工具來識別應用程式或網站上的特定顏色,這樣我們就可以選擇並保存吸引我們注意的顏色。

如何識別應用程式或網站上的特定顏色

想像一下,滾動瀏覽一個網站並找到完美的顏色,即您下一個項目所需的確切顏色。那麼,讓我們幫助您找到網站或應用程式上背景或任何其他元素的確切顏色。

1.使用網路工具或網站在網站上尋找十六進位顏色代碼

從網站獲取顏色代碼的最簡單方法之一是使用專​​用的網路工具和顏色選擇器網站。無論您使用哪種瀏覽器,無論是基於 Chromium且具有深層網路相容性的瀏覽器,還是 Apple 預設的 Safari,此方法都適用。

此外,無論您使用的是 Mac、Windows 筆記型電腦、iPhone、iPad 還是 Android 設備,這些顏色識別 Web 工具都將成為您工具庫中的便利補充。我們測試了幾種選擇,這是最適合我們的一種。

步驟 1:開啟瀏覽器並造訪 ImageColorPicker.com

影像顏色選擇器

第 2 步:點擊/點擊使用您的圖像提供網站/圖像 URL 或上傳圖像。

如何識別應用程式或網站上的特定顏色

第 3 步:現在您可以,

  • 複製網址
  • 複製圖像或其 URL
  • 截取頁面截圖

如何識別應用程式或網站上的特定顏色

步驟 4:處理完影像後,您可以移動遊標來選取顏色。

步驟5:相應地,您將看到HEX或RGB程式碼,複製/貼上並根據需要使用它們。

如何識別應用程式或網站上的特定顏色

如果您不喜歡 ImageColorPicker.com 或想要更多選項,您可以嘗試以下網站。

紅色番茄醬顏色選擇器

HTML 顏色程式碼

松木工具

但是,與 ImageColorPicker 不同,這些網站不支援網站或圖片 URL。他們依靠您上傳圖像。因此,您必須截取螢幕截圖,上傳它們,然後找到顏色。

2.透過照片編輯軟體從網站上選擇顏色

如果您使用照片編輯工具,那麼您實際上不需要再進一步尋找。無論是像 Photoshop 這樣的高級照片編輯軟體,還是像 Canva 這樣的線上工具,大多數照片編輯軟體都配備了方便的顏色選擇器/滴管工具,包括Mac 的 Quick LookiPhone 的螢幕截圖編輯器

但是,並非所有方法都可以幫助您從網站或應用程式取得顏色代碼。他們將允許您在視窗中選擇和使用顏色。如果這對您來說很酷,請繼續使用您選擇的照片編輯工具來識別特定顏色,我們以Canva為例。

第 1 步:截取網站或應用程式的螢幕截圖。

步驟 2:在瀏覽器(或行動裝置上的應用程式)上開啟 Canva。

第 3 步:選擇畫布並上傳圖像。

如何識別應用程式或網站上的特定顏色

第 4 步:接下來,開啟任何與顏色相關的工具、文字、繪圖、元素等。

第 5 步:選擇顏色框,然後按一下「+ 新增顏色」圖示。

如何識別應用程式或網站上的特定顏色

第 6 步:捲動到顏色並點擊/點擊以選擇所需的顏色。

如何識別應用程式或網站上的特定顏色

3. 使用 Firefox 中的顏色選擇器從任何網站尋找顏色

除了照片編輯軟體之外,火狐瀏覽器還擁有內建的吸管工具。雖然它有點隱蔽,所以讓我們揭開其中的秘密。

步驟 1:啟動 Firefox 並開啟您要從中選擇顏色的網站。

第 2 步:點擊右上角的三行圖標

步驟 3:選擇更多工具,然後選擇滴管。

如何識別應用程式或網站上的特定顏色

步驟 4:現在,只需將遊標移至您想要識別的顏色,Firefox 將立即找到十六進位顏色代碼並將其呈現給您。

如何識別應用程式或網站上的特定顏色

步驟 5:值得注意的是,吸管器將繼續檢查並提供顏色代碼,直到您退出。要關閉該工具,只需單擊螢幕上的任意位置即可。

就像 Firefox 一樣,Chrome 也有一些開發人員工具可以幫助您識別網站上的特定顏色。然而,有一個問題;讓我們來看看。

4.使用Chrome開發者工具選擇顏色

Google Chrome 的顏色選擇器工具非常有限。這個技巧只能告訴網站中編碼的元素的顏色,也就是程式碼中提到的顏色。因此,您無法取得有關導入元素(如徽標、圖像等)的任何與顏色相關的資訊。

步驟 1:啟動 Chrome 並開啟您要從中選擇顏色的網站。

步驟 2:接下來,點選右上角的三點圖示。

步驟 3:選擇更多工具,然後選擇開發人員工具。

如何識別應用程式或網站上的特定顏色

注意:您的螢幕將在視覺上分為兩頁。您將在左側看到網站,在右側看到網站的程式碼。

步驟 4:若要從網站中選擇顏色,請鍵入 Ctrl + Shift + C 並將遊標移至要選取的顏色。

第 5 步:您現在可以查看背景、文字或元素顏色代碼。

如何識別應用程式或網站上的特定顏色

5.使用瀏覽器擴充功能在網站上尋找顏色的十六進位代碼

瀏覽器擴充功能不僅可以提高您的工作效率,還可以使顏色識別更加方便。值得慶幸的是,大多數常��的瀏覽器(包括 Chrome 和 Firefox)都支援此類擴充功能。

用於識別顏色的 Chrome 擴展

十六進位顏色選擇器

眼藥水

顏色滴管

用於識別顏色的 Firefox 擴充

彩色齊拉

取色滴管

一旦您將所需的擴充功能添加到瀏覽器中,剩下的事情就很簡單了。開啟網站→從功能表列中選擇擴充功能→將遊標移至顏色→取得顏色代碼。

選擇你的顏色

無論您是設計師、開發人員還是對遇到的顏色感到好奇,識別應用程式或網站上的特定顏色都是一項有用的技能。因此,我們介紹了多種方法和工具來幫助您找到難以捉摸的顏色代碼或顏色名稱。

希望我們能為您服務。如果您需要更多此類技巧或建議,或者需要一些令人費解的技術相關問題的答案,評論部分始終開放。



Leave a Comment

如何刪除 Viber 中的消息

如何刪除 Viber 中的消息

透過此逐步指南說明如何刪除 Viber 中的訊息,無縫清除 Viber 上的混亂並維護隱私。

解決繼續觀看 Netflix 上不顯示問題的 7 種方法

解決繼續觀看 Netflix 上不顯示問題的 7 種方法

您的 Netflix 上未顯示「繼續觀看」標籤嗎?利用繼續觀看窗格帶來的所有便利,了解如何修復它。

如何啟用或停用 WhatsApp 聊天備份的端對端加密

如何啟用或停用 WhatsApp 聊天備份的端對端加密

透過簡單的步驟保護您的對話。了解如何輕鬆啟用或停用 WhatsApp 聊天備份的端對端加密。

什麼是 iMessage 中的聯絡人金鑰驗證以及如何使用它

什麼是 iMessage 中的聯絡人金鑰驗證以及如何使用它

再也不用擔心您在 iMessage 上與誰聊天了!了解 iMessage 中的聯絡人金鑰驗證是什麼以及如何使用它。

修復 Apple Watch 手腕檢測不起作用的 9 種方法

修復 Apple Watch 手腕檢測不起作用的 9 種方法

無法使用手腕檢測功能?以下是解決 Apple Watch 手腕偵測不起作用問題的 9 種方法。

Outlook 郵件搜尋在 Mac 上無法運作的 7 個最佳修復方法

Outlook 郵件搜尋在 Mac 上無法運作的 7 個最佳修復方法

如果郵件搜尋功能在 Mac 上的 Outlook 應用程式中不起作用,可以使用以下一些可靠的修復方法來解決此問題。

修正 Facebook Messenger 通知無法消失的 7 種方法

修正 Facebook Messenger 通知無法消失的 7 種方法

即使在您閱讀訊息後,Facebook Messenger 通知也不會消失?以下是解決該問題的一些方法。

什麼是 Telegram 已讀回執以及您可以關閉嗎

什麼是 Telegram 已讀回執以及您可以關閉嗎

讓我們詳細了解 Telegram 已讀回執是什麼,以及您是否可以在 Telegram 應用程式上關閉此功能。

8 個最佳 Google Pixel 8 和 8 Pro 提示和技巧

8 個最佳 Google Pixel 8 和 8 Pro 提示和技巧

給自己買一台全新的 Pixel?查看我們的最佳 Google Pixel 8 和 Pixel 8 Pro 提示和技巧列表,以提升您的體驗。

為什麼我的 Apple TV 無法打開以及如何修復它

為什麼我的 Apple TV 無法打開以及如何修復它

蘋果電視打不開?讓我們來看看 6 種方法來幫助您解決此問題並使您的 Apple TV 重新啟動並運行。