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

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

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

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

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

如何在 Discord 上啟用或停用 NSFW 頻道

如何在 Discord 上啟用或停用 NSFW 頻道

想在 Discord 上查看各種內容嗎?透過本指南了解如何在 Discord 上啟用或停用 NSFW 頻道。

Finder 搜尋在 Mac 上不起作用的 8 個修復

Finder 搜尋在 Mac 上不起作用的 8 個修復

Finder 搜尋在 Mac 上無法運作可能會擾亂您的工作流程。以下是在 Mac 上修復 Finder 搜尋的最佳方法。

如何使用 Instagram 登入 Facebook

如何使用 Instagram 登入 Facebook

如果您忘記了密碼或您的帳戶已被駭客入侵,請按照以下步驟使用 Instagram 登入 Facebook。

8 個最佳 OxygenOS 您應該了解的 14 個提示和技巧

8 個最佳 OxygenOS 您應該了解的 14 個提示和技巧

擁有安裝了新 OxygenOS 14 更新的 OnePlus 裝置嗎?查看所有這些新的 OxygenOS 14 提示和技巧,以充分利用它。

無法在 Roblox 上購買任何東西的 7 個修復

無法在 Roblox 上購買任何東西的 7 個修復

無法在行動版或 PC 版 Roblox 上購買 Robux 或任何其他遊戲內物品?以下是一些可以幫助您快速解決問題的提示。

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

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

找到適合您專案的完美顏色了嗎?然後按照本指南輕鬆識別網站或應用程式中的顏色

如何使用兩台電腦和一台顯示器

如何使用兩台電腦和一台顯示器

有兩台電腦但只有一台顯示器?別擔心,以下是如何使用兩台電腦和一台顯示器。

如何查看 Instagram 上最近的追蹤者

如何查看 Instagram 上最近的追蹤者

這是關於如何透過幾個簡單步驟在 Instagram 上查看您自己或其他人最近的追蹤者的完整指南。

16 張 Cool Nothing Phone 2 桌布 (4K) 免費

16 張 Cool Nothing Phone 2 桌布 (4K) 免費

全新 Nothing Phone 2 的粉絲?即使您沒有,這裡也有所有很酷的 Nothing Phone 2 壁紙及其功能。

如何從雙方刪除 Facebook Messenger 上的舊消息

如何從雙方刪除 Facebook Messenger 上的舊消息

不小心發錯訊息了?您可以透過以下方法從雙方刪除 Facebook Messenger 上的舊訊息。