挑選顏色
在色輪上拖曳、輸入或貼上任何色碼、使用滴管,或開啟照片並點選像素。
從色輪、螢幕或任何圖片中挑選顏色,並以 HEX、RGB、HSL、HSV、OKLCH 或 CMYK 格式複製。
建立配色組合與深淺色階、檢查文字對比、以色盲視角預覽,並匯出可直接貼上的程式碼。
正在載入取色器…
在色輪上拖曳、輸入或貼上任何色碼、使用滴管,或開啟照片並點選像素。
用 RGB、HSL、HSV、OKLCH 或 CMYK 滑桿調整,一鍵複製所需的數值。
製作配色組合或深淺色階,檢查對比與色盲效果,再複製或下載專案所需的程式碼。
幾個小習慣,讓調色盤更好用、文字更易讀。
依 WCAG AA,內文與背景的對比至少需 4.5:1,大型文字需 3:1。檢查器會建議最接近且能通過的顏色。
OKLCH 的明度符合人眼感知,因此以 OKLCH 製作的色階能從淺到深均勻過渡,中間色不會混濁。
對許多人來說,紅色與綠色看起來很相似。在色盲分頁中預覽調色盤,並在重要的地方加上標籤或圖示。
照片近看會有雜訊。3×3 或 5×5 取樣能得到您實際看到的顏色,而不是單一雜點。
開啟您喜歡的照片,擷取 5 到 8 種顏色。K-means 能找出主要顏色;中位切割法則能保留小面積的點綴色。
印刷色會因紙張與印刷機而異。請以 CMYK 值作為起點,再用印刷廠的色彩描述檔確認。
用 WaveSpeed AI 從提示詞產生符合品牌色彩的圖片與影片。
符合資格的新帳號可獲得 $1 免費點數,無需信用卡。 生成器需另外擁有帳號與點數。取色器則完全免費。
開啟「圖片」分頁,選擇照片或截圖(或直接貼上),再點選任一像素。放大鏡會精確顯示游標所在的像素,也可以取 3×3 到 11×11 範圍的平均值。圖片在您的瀏覽器中讀取,並留在您的裝置上。
可以,前提是瀏覽器支援滴管工具(桌面版 Chrome、Edge 與其他 Chromium 瀏覽器)。點選「滴管」,再點選螢幕上的任何像素,即使在瀏覽器視窗之外也可以。在其他瀏覽器中,請截圖並貼到「圖片」分頁。
在顏色欄位輸入或貼上 HEX 色碼,RGB 值就會顯示在下方,可直接複製。若要一次轉換多個顏色,請在「轉換」分頁每行貼上一個,並選擇輸出格式。
HEX(3、4、6 與 8 位數)、RGB、HSL、HSV/HSB、HWB、OKLCH、OKLab 與 CMYK,以及所有 CSS 顏色名稱。貼上的數值有沒有函數名稱都可以,例如「255, 87, 51」。
OKLCH 以感知明度、彩度(鮮豔程度)與色相來描述顏色。相同的級距看起來也相同,因此非常適合製作深淺色階與一致的調色盤,且現代 CSS 已支援 oklch()。
它會計算文字與背景之間的 WCAG 2 對比度,並顯示一般文字、大型文字與介面元素是否通過 AA 與 AAA。它也會顯示 WCAG 3 草案中的 APCA 明度對比(Lc),並建議最接近且能通過的顏色。
挑選基礎色,再用「配色組合」產生互補、三角等配色,或用「深淺」產生淺色、深色與 50–950 色階。也可以從照片擷取調色盤。儲存喜愛的顏色並匯出為程式碼。
可以。「匯出」分頁可將調色盤輸出為 CSS 變數、SCSS、Tailwind v4 @theme 或 v3 設定檔、SwiftUI、UIKit、Android colors.xml、Jetpack Compose、JSON、GIMP 調色盤或純 Hex 清單。可複製或下載檔案。
是的。免費、無需註冊、沒有限制、沒有浮水印,一切都在您的瀏覽器中執行。
免費、私密,在瀏覽器中隨開即用。