即時取色
點擊圖片任意位置，毫秒內顯示 HEX、RGB、HSL 三種顏色代碼，無需等待。
上傳圖片，點擊取色，即時獲取 HEX / RGB / HSL 顏色代碼
簡單、快速、隱私友善的線上圖片取色工具
點擊圖片任意位置，毫秒內顯示 HEX、RGB、HSL 三種顏色代碼，無需等待。
所有圖片處理均在您的瀏覽器本機完成，圖片絕不會被上傳到任何伺服器。
內建 3 倍放大鏡與十字準星，即使是圖片中最小的像素也能精準選取顏色。
點擊任一顏色格式即可複製到剪貼簿，直接貼到您的設計軟體或程式碼中。
支援拖曳上傳、點擊選擇檔案，甚至可以直接 Ctrl+V 貼上剪貼簿中的圖片。
無需註冊、無需付費。隨時隨地開啟瀏覽器即可使用，無任何限制。
將圖片拖曳到上傳區域，或點擊「選擇圖片」按鈕。也可以直接 Ctrl+V 貼上剪貼簿中的圖片。
在圖片上移動滑鼠，放大鏡會幫助您精確定位。點擊想要擷取的顏色位置。
右側面板會顯示 HEX、RGB、HSL 三種格式。點擊任一格式即可複製到剪貼簿。
所有選取的顏色會自動記錄在歷史面板中，方便您隨時回顧與比較不同顏色。
深入理解 HEX、RGB、HSL 三種顏色格式在網頁設計與開發中的應用
HEX 顏色代碼是網頁設計中最常見的顏色表示方式。HEX 代碼是一組六位元的十六進位數字，前面加上井字號（#），例如 #FF6B6B。該代碼分為三組兩位數字，分別代表紅、綠、藍三個通道。
每組數字的範圍從 00（最低強度）到 FF（最高強度），採用十六進位（base-16）表示法。這意味著每個通道有 256 種可能數值，總共可以產生超過 1600 萬種顏色（256 × 256 × 256 = 16,777,216 種顏色）。
舉例來說，#FF6B6B 的分解為：紅 = FF（255）、綠 = 6B（107）、藍 = 6B（107），形成珊瑚粉色。當三個通道都為最小值（#000000）時為黑色，都為最大值（#FFFFFF）時為白色。
HEX 代碼受到所有現代網頁瀏覽器支援，是 CSS 框架、Figma 和 Sketch 等設計工具以及多數取色器的標準格式。它簡潔易複製，在網頁開發社群中被廣泛使用。
RGB（紅、綠、藍）是一種用於數位顯示的加法色彩模型。在 CSS 中，RGB 顏色使用 rgb() 函數指定，三個參數分別代表對應通道的強度，每個值為 0 到 255 的整數。
例如，rgb(255, 107, 107) 與 #FF6B6B 代表相同的珊瑚粉色。RGB 格式對於使用數值工作的程式設計師來說更直覺，常用於 JavaScript Canvas 操作、影像處理程式庫和遊戲開發。
CSS 也支援 rgba()，它增加了 Alpha 通道（透明度）作為第四個參數，範圍從 0.0（完全透明）到 1.0（完全不透明）。例如，rgba(255, 107, 107, 0.5) 會建立半透明的珊瑚粉色。這使得 RGB 在需要建立疊加效果、陰影或分層設計時特別實用。
HSL（色相、飽和度、明度）是一種圓柱座標色彩模型，設計上更符合人類的直覺。在 CSS 中，HSL 使用 hsl() 函數指定三個參數：
例如，hsl(0, 100%, 71%) 代表珊瑚粉色：色相 0°（紅色）、飽和度 100%（完全飽和）、明度 71%（明亮但未完全亮）。HSL 在建立配色方案時特別強大，因為您可以保持相同色相，只需調整飽和度和明度即可創造和諧的變化。
現代 CSS 也支援 hsla()（增加 Alpha 通道），使其在網頁設計任務中更加靈活。
從任何圖片中建立美麗配色方案的專業技巧
建立專業調色盤最有效的方法之一，是從一張您喜愛的參考圖片開始。使用 Get Color Code，您可以上傳任何照片、插圖或設計作品，並提取其關鍵顏色。首先從圖片的不同區域選取 3-5 個主要顏色，尋找主要的背景色、強調色和高光色調。這些自然協調的顏色將構成您調色盤的基礎，因為它們在原始圖片中已經和諧共存。
專業設計師在建立品牌識別、網站主題或插畫調色盤時經常使用此技巧。關鍵是從色彩關係已經平衡的構圖良好照片或藝術作品中選取顏色。
互補色是指在色環上相對位置的顏色配對。當它們相鄰放置時，會產生最大的對比和視覺衝擊。例如，藍色（#0000FF）和橙色（#FFA500）是互補色，紅色（#FF0000）和綠色（#00FF00）也是。在建立調色盤時，考慮使用一組互補色作為主色和強調色，以創造鮮明、引人注目的設計。
要使用我們的工具尋找互補色，先從圖片中選取一種顏色，然後在 HSL 色相刻度上尋找大約相差 180 度的顏色。此技巧廣泛應用於標誌設計、行動呼籲按鈕和突顯重要視覺元素。
類似色配色方案使用色環上相鄰的顏色，例如藍色、藍綠色和綠色。這些方案天生和諧悅目，是背景、插圖和整體網站主題的絕佳選擇。與創造對比的互補色方案不同，類似色方案能營造視覺統一和寧靜的感覺。
從圖片中選取類似色時，請在漸層、天空、風景或任何具有平滑色彩變化的圖片中尋找逐漸的色彩過渡。使用 Get Color Code 捕捉相鄰色調之間的細微差異，並在您的設計中重現它們。
每種顏色格式各有其優勢。HEX 最適合在 CSS 檔案、HTML 屬性和設計工具中快速複製貼上。它是最簡潔的格式，也是設計師之間最常分享的格式。RGB 非常適合在 JavaScript 中以程式方式操作顏色、Canvas 操作以及需要單獨處理顏色通道的情況。HSL 在需要建立顏色變化時表現出色，例如透過增加明度來產生更淺的懸停狀態，或透過偏移色相來建立漸層。
許多專業設計師和開發人員會根據使用情境使用全部三種格式。Get Color Code 同時顯示所有三種格式，讓您可以複製最符合目前工作流程的格式，無需任何轉換步驟。
色彩無障礙設計對於確保您的設計能被所有人（包括視覺障礙者）使用至關重要。網頁內容無障礙指南（WCAG）建議一般文字的對比度至少為 4.5:1，大字型文字為 3:1。從圖片中選取顏色時，請注意文字和背景顏色之間的對比度。
使用 HSL 數值有助於無障礙設計：將飽和度維持在適中範圍（50-70%），並仔細管理前景和背景顏色之間的明度差異，自然會改善對比度。請記住，有些使用者有色覺缺陷（色盲），因此切勿僅依賴顏色來傳達重要資訊。在使用顏色編碼的同時，務必使用圖示、文字標籤或圖案等其他輔助指示。
HEX、RGB、HSL 三種顏色格式之間的快速轉換指南
了解如何在顏色格式之間進行轉換是網頁設計師和開發人員的基本技能。以下是如何手動轉換顏色的實用指南，幫助您理解每種格式之間的關係。
要將像 #FF6B6B 的 HEX 代碼轉換為 RGB：將六位數字分為三組（FF、6B、6B）。將每組從十六進位（base-16）轉換為十進位（base-10）：FF = 255，6B = 107，6B = 107。結果為 rgb(255, 107, 107)。計算方式為：（第一位數 × 16）+ 第二位數。例如，FF = (15 × 16) + 15 = 255，6B = (6 × 16) + 11 = 107。
要將像 rgb(255, 107, 107) 的 RGB 數值轉換為 HEX：將每個數值除以 16 得到第一位數，取餘數作為第二位數。255 ÷ 16 = 15（F），餘數 15（F）= FF。107 ÷ 16 = 6（6），餘數 11（B）= 6B。將所有配對組合，前方加上 # 前綴：#FF6B6B。
#FF0000
rgb(255,0,0)
hsl(0,100%,50%)
#00FF00
rgb(0,255,0)
hsl(120,100%,50%)
#0000FF
rgb(0,0,255)
hsl(240,100%,50%)
#000000
rgb(0,0,0)
hsl(0,0%,0%)
#FFFFFF
rgb(255,255,255)
hsl(0,0%,100%)
#808080
rgb(128,128,128)
hsl(0,0%,50%)
#FFD700
rgb(255,215,0)
hsl(51,100%,50%)
#FF69B4
rgb(255,105,180)
hsl(330,100%,71%)