影像色彩擷取器可在 iPhone 瀏覽器中使用,並將本機照片、螢幕截圖、插畫或標誌轉換為排序的 3、5、8 或 12 色調色板,並提供 HEX、RGB 及可見像素百分比。
你不必逐一點選像素,也不必安裝原生取色應用程式:選擇影像後,讓頁面進行分析,再選擇色樣以複製其 HEX 色碼。完整流程都在目前的瀏覽器中執行,因此很適合從 iPhone 照片或螢幕擷取畫面擷取起始色彩。

在 iPhone 上執行什麼
選擇檔案時,瀏覽器會透過暫時性 Object URL 進行解碼,並將其繪製到記憶體中的畫布。你的影像不會上傳至 Lizely 或遠端影像服務。更換影像或離開頁面時,即會釋放暫時性 URL。
進行分析時,瀏覽器只會在必要時按比例縮小影像,讓任一邊不超過 512 像素。Alpha 值低於 128 的像素會被忽略,以避免大多透明的背景主導調色板。
檔案輸入上限為 20 MB,而像素處理函式另外設有防禦性緩衝區限制。因此,即使壓縮後的檔案大小低於 20 MB,尺寸非常大的影像仍可能遇到限制。介面支援常見的 PNG、JPEG、WebP、GIF、BMP 和 AVIF 檔案,但最終能否成功解碼仍取決於瀏覽器。
在 iPhone 上執行調色板擷取
請在你想於手機上使用的瀏覽器中依照下列流程操作:
- 開啟工具並選擇影像。前往影像色彩擷取器,點選檔案選擇器,並從 iOS 提供的位置選擇本機影像,例如「照片」或裝置檔案。請將檔案維持在 20 MB 或以下。如果瀏覽器顯示不支援的格式,請先另存為 PNG 或 JPEG 副本。
- 選擇調色板大小。選擇 3、5、8 或 12 種顏色。較小的清單能提供精簡的視覺摘要,較大的清單則會顯示更多經過排序的色彩群組。
- 等待本機畫布分析。瀏覽器會在目前頁面中解碼及處理影像,不需要手動選擇具代表性的像素。
- 將色樣與影像比較。查看每種排序色彩出現在可見構圖中的哪些位置。某個背景可能因占據較大面積而排名靠前,而非因為工具認為它在美學上很重要。
- 選擇色樣以複製其 HEX 值。每項結果也會顯示 RGB 三元組,以及分配至該色彩群組的取樣可見像素百分比。你可以將複製的 HEX 色碼貼到「備忘錄」草稿或設計應用程式中。
- 確認最終用途。將前景與背景色彩用於文字前,請先透過色彩對比檢查器進行檢測。若是官方品牌色彩或印刷工作,請在適當的色彩管理應用程式中檢查原始來源。
依工作選擇調色板大小
調色板大小控制項決定你會看到多少個排序群組;它不會改變底層的面積頻率分析。
| 調色板大小 | 提供內容 | 適用情境 |
|---|---|---|
| 3 種顏色 | 最常見群組的精簡組合 | 你只需要影像大致色彩的簡短視覺摘要 |
| 5 種顏色 | 涵蓋範圍更廣的起始調色板 | 影像包含數個不同的色彩家族 |
| 8 種顏色 | 更詳細的排序清單 | 你想更清楚區分可見區域 |
| 12 種顏色 | 提供的最大調色板 | 你要仔細探索相關色調與次要區域 |
請先從實用的最小調色板開始,並與來源影像比較。當兩個重要區域似乎合併,或缺少強調色時,再增加大小。較大的清單能顯示更多群組,但無法還原因縮圖而移除的細節,或落在可見取樣範圍之外的細節。
讀取排序色彩與百分比
每項結果都包含 HEX 色碼、RGB 三元組,以及分配至該群組的取樣可見像素占比。這些百分比描述的是用於分析的縮小取樣,而非原始檔案的完整像素數。它們有助於比較各群組在受分析影像中占據的面積大小。
擷取器與像素選取器可回答不同的問題。若要取得已知按鈕、標誌邊緣或小型細節的準確色彩,直接指向該位置時,影像色彩選取器是更好的選擇。
| 你的需求 | 適當工具 | 結果 |
|---|---|---|
| 找出整張影像中出現的大致色彩 | 影像色彩擷取器 | 含有 HEX、RGB 及取樣面積百分比的排序色樣 |
| 讀取單一準確位置 | 影像色彩選取器 | 所選像素的準確 RGB 值 |
擷取出的色樣屬於描述性資訊:它代表一組相關像素,並不表示該區域中的每個像素都與顯示的顏色完全相符。當需要像素層級的準確度時,請使用選取器;當你想取得整體構圖的起始色彩時,請使用擷取器。
強調色或小型細節可能消失的原因
有上限的縮圖有助於瀏覽器有效率地處理影像,但也可能降低極小特徵的影響力。細線強調線、微小圖示或單一像素對取樣的貢獻可能較少,甚至完全消失,即使它對設計很重要也是一樣。
此方法也會將色彩分組至最多 512 個粗略的 RGB 色桶。人在感知上非常相近的兩種顏色可能被分至相鄰色桶,而幾種細微差異的色調則可能合併成一個平均值色樣。這能讓結果具重現性,但這並非感知聚類程序。
對於動態影像,調色板呈現的是瀏覽器解碼至畫布的影格,而非動畫中的每個影格。如果忽略透明區域後,檔案沒有足夠可見的像素,工具會回傳明確錯誤,而不是空白或誤導性的調色板。
瞭解色彩數值無法證明的事
此分析不會建立亮度、Gamma、裝置色彩描述檔或人類視覺敏感度的模型。因此,其色樣是快速的頻率摘要,而不是色彩管理證據,無法證明每種色彩在校正後的顯示器或印刷條件下將呈現的樣貌。
調色板排序衡量的是取樣面積,而非視覺重要性、對比品質或無障礙程度。大型背景可能只是因為覆蓋影像的大部分而排在最前面。同樣地,百分比高並不代表色彩適合用於文字,輸出結果也無法確立官方品牌調色板、商標授權、印刷油墨配方、Pantone 色號或無障礙文字配對。
檢查對比與準確品牌色彩
將調色板複製到設計草稿後,請使用色彩對比檢查器測試每種預定的文字與背景組合。在擷取色樣中看起來和諧的配對,仍可能需要調整才能確保易讀性,而頻率排序無法替你做此決定。
當準確的品牌或印刷配對很重要時,請在色彩管理設計應用程式中開啟原始檔案,並對預定來源像素進行取樣。擷取器仍然有助於快速探索,但其分組平均值不應取代最終成果的權威色彩參考。
iPhone 調色板的實用情境
擷取出的色彩可為情緒板、簡報主題、CSS 變數、圖表系列、插畫研究或設計審查提供實用的起點。在 iPhone 上,你可以從相機照片、螢幕截圖或已儲存的設計中擷取大致色彩,並將實用的 HEX 值複製到工作文件中。
檢視調色板時,請讓來源影像保持可見。將排序群組與你辨識出的區域比較,必要時增加調色板大小,並將最終選擇視為經過informed判斷的設計方向,而非自動產生的品牌規格。
如果你正在權衡各種選項,初學者如何反轉影像色彩有詳細說明。
如果你正在權衡各種選項,Android 上的影像色彩選取器:選取準確色彩有詳細說明。