影像色彩擷取器可在 iPhone 瀏覽器中使用,並將本機照片、螢幕截圖、插畫或標誌轉換為排序的 3、5、8 或 12 色調色板,並提供 HEX、RGB 及可見像素百分比。

你不必逐一點選像素,也不必安裝原生取色應用程式:選擇影像後,讓頁面進行分析,再選擇色樣以複製其 HEX 色碼。完整流程都在目前的瀏覽器中執行,因此很適合從 iPhone 照片或螢幕擷取畫面擷取起始色彩。

image color extractor on iphone
iPhone 上的影像色彩擷取器:找出照片中的色彩

在 iPhone 上執行什麼

選擇檔案時,瀏覽器會透過暫時性 Object URL 進行解碼,並將其繪製到記憶體中的畫布。你的影像不會上傳至 Lizely 或遠端影像服務。更換影像或離開頁面時,即會釋放暫時性 URL。

進行分析時,瀏覽器只會在必要時按比例縮小影像,讓任一邊不超過 512 像素。Alpha 值低於 128 的像素會被忽略,以避免大多透明的背景主導調色板。

檔案輸入上限為 20 MB,而像素處理函式另外設有防禦性緩衝區限制。因此,即使壓縮後的檔案大小低於 20 MB,尺寸非常大的影像仍可能遇到限制。介面支援常見的 PNG、JPEG、WebP、GIF、BMP 和 AVIF 檔案,但最終能否成功解碼仍取決於瀏覽器。

在 iPhone 上執行調色板擷取

請在你想於手機上使用的瀏覽器中依照下列流程操作:

  1. 開啟工具並選擇影像。前往影像色彩擷取器,點選檔案選擇器,並從 iOS 提供的位置選擇本機影像,例如「照片」或裝置檔案。請將檔案維持在 20 MB 或以下。如果瀏覽器顯示不支援的格式,請先另存為 PNG 或 JPEG 副本。
  2. 選擇調色板大小。選擇 3、5、8 或 12 種顏色。較小的清單能提供精簡的視覺摘要,較大的清單則會顯示更多經過排序的色彩群組。
  3. 等待本機畫布分析。瀏覽器會在目前頁面中解碼及處理影像,不需要手動選擇具代表性的像素。
  4. 將色樣與影像比較。查看每種排序色彩出現在可見構圖中的哪些位置。某個背景可能因占據較大面積而排名靠前,而非因為工具認為它在美學上很重要。
  5. 選擇色樣以複製其 HEX 值。每項結果也會顯示 RGB 三元組,以及分配至該色彩群組的取樣可見像素百分比。你可以將複製的 HEX 色碼貼到「備忘錄」草稿或設計應用程式中。
  6. 確認最終用途。將前景與背景色彩用於文字前,請先透過色彩對比檢查器進行檢測。若是官方品牌色彩或印刷工作,請在適當的色彩管理應用程式中檢查原始來源。

依工作選擇調色板大小

調色板大小控制項決定你會看到多少個排序群組;它不會改變底層的面積頻率分析。

調色板大小 提供內容 適用情境
3 種顏色 最常見群組的精簡組合 你只需要影像大致色彩的簡短視覺摘要
5 種顏色 涵蓋範圍更廣的起始調色板 影像包含數個不同的色彩家族
8 種顏色 更詳細的排序清單 你想更清楚區分可見區域
12 種顏色 提供的最大調色板 你要仔細探索相關色調與次要區域

請先從實用的最小調色板開始,並與來源影像比較。當兩個重要區域似乎合併,或缺少強調色時,再增加大小。較大的清單能顯示更多群組,但無法還原因縮圖而移除的細節,或落在可見取樣範圍之外的細節。

讀取排序色彩與百分比

每項結果都包含 HEX 色碼、RGB 三元組,以及分配至該群組的取樣可見像素占比。這些百分比描述的是用於分析的縮小取樣,而非原始檔案的完整像素數。它們有助於比較各群組在受分析影像中占據的面積大小。

擷取器與像素選取器可回答不同的問題。若要取得已知按鈕、標誌邊緣或小型細節的準確色彩,直接指向該位置時,影像色彩選取器是更好的選擇。

你的需求 適當工具 結果
找出整張影像中出現的大致色彩 影像色彩擷取器 含有 HEX、RGB 及取樣面積百分比的排序色樣
讀取單一準確位置 影像色彩選取器 所選像素的準確 RGB 值

擷取出的色樣屬於描述性資訊:它代表一組相關像素,並不表示該區域中的每個像素都與顯示的顏色完全相符。當需要像素層級的準確度時,請使用選取器;當你想取得整體構圖的起始色彩時,請使用擷取器。

強調色或小型細節可能消失的原因

有上限的縮圖有助於瀏覽器有效率地處理影像,但也可能降低極小特徵的影響力。細線強調線、微小圖示或單一像素對取樣的貢獻可能較少,甚至完全消失,即使它對設計很重要也是一樣。

此方法也會將色彩分組至最多 512 個粗略的 RGB 色桶。人在感知上非常相近的兩種顏色可能被分至相鄰色桶,而幾種細微差異的色調則可能合併成一個平均值色樣。這能讓結果具重現性,但這並非感知聚類程序。

對於動態影像,調色板呈現的是瀏覽器解碼至畫布的影格,而非動畫中的每個影格。如果忽略透明區域後,檔案沒有足夠可見的像素,工具會回傳明確錯誤,而不是空白或誤導性的調色板。

瞭解色彩數值無法證明的事

此分析不會建立亮度、Gamma、裝置色彩描述檔或人類視覺敏感度的模型。因此,其色樣是快速的頻率摘要,而不是色彩管理證據,無法證明每種色彩在校正後的顯示器或印刷條件下將呈現的樣貌。

調色板排序衡量的是取樣面積,而非視覺重要性、對比品質或無障礙程度。大型背景可能只是因為覆蓋影像的大部分而排在最前面。同樣地,百分比高並不代表色彩適合用於文字,輸出結果也無法確立官方品牌調色板、商標授權、印刷油墨配方、Pantone 色號或無障礙文字配對。

檢查對比與準確品牌色彩

將調色板複製到設計草稿後,請使用色彩對比檢查器測試每種預定的文字與背景組合。在擷取色樣中看起來和諧的配對,仍可能需要調整才能確保易讀性,而頻率排序無法替你做此決定。

當準確的品牌或印刷配對很重要時,請在色彩管理設計應用程式中開啟原始檔案,並對預定來源像素進行取樣。擷取器仍然有助於快速探索,但其分組平均值不應取代最終成果的權威色彩參考。

iPhone 調色板的實用情境

擷取出的色彩可為情緒板、簡報主題、CSS 變數、圖表系列、插畫研究或設計審查提供實用的起點。在 iPhone 上,你可以從相機照片、螢幕截圖或已儲存的設計中擷取大致色彩,並將實用的 HEX 值複製到工作文件中。

檢視調色板時,請讓來源影像保持可見。將排序群組與你辨識出的區域比較,必要時增加調色板大小,並將最終選擇視為經過informed判斷的設計方向,而非自動產生的品牌規格。

如果你正在權衡各種選項,初學者如何反轉影像色彩有詳細說明。

如果你正在權衡各種選項,Android 上的影像色彩選取器:選取準確色彩有詳細說明。