選好顏色,複製代碼,繼續工作

選色器、漸層產生器和圖片滴管集於一頁。無需註冊、無需安裝、無需等待:選一個色調,複製為 HEX、RGB、HSL 或 HSV。

%
開啟顏色頁面

顏色代碼

HEX#0F37FF
RGBrgb(15, 55, 255)
HSLhsl(230°, 100%, 52.94%)
HSVhsv(230°, 94.12%, 100%)
CMYKcmyk(94.12%, 78.43%, 0%, 0%)
XYZxyz(19.61, 10.05, 95.5)
LABlab(37.93, 62.96, -98.45)
LCHlch(37.93, 116.86, 302.6°)

包含哪些功能

滴管

從上傳的圖片取色,在瀏覽器支援時也可以從螢幕上任意位置取色。把檔案拖到頁面上,點擊像素即可。

格式轉換

在 HEX、RGB、HSL、HSV、CMYK、XYZ、LAB 和 LCH 之間即時切換,並把任一數值直接複製到 CSS 或設計軟體。

漸層產生器

在色條上新增並拖曳色標,切換線性與放射,調整角度和不透明度,然後複製完成的 CSS。

顏色紀錄

你做過的每個顏色和漸層都留在瀏覽器裡,方便以後回看或在別的專案裡重複使用。

配色與變化

每個顏色頁都提供淡色、暗色和六種配色方案,任一種都能一鍵變成漸層。

免費且注重隱私

沒有付費牆,也不會追蹤你選了什麼。上傳的圖片在瀏覽器內讀取,不會傳到任何地方。

適合誰使用

設計師與產品團隊
在勾勒介面或品牌色板、嘗試搭配、複製漸層所需的確切 CSS 時。
插畫與繪畫
用滴管從照片和畫作中取色,並用漸層工具規劃柔和的明暗過渡。
前端開發
在專案中產出一致的顏色數值,並從既有設計稿中讀回這些數值。
做無障礙檢查的人
在不同顏色模型之間對比同一個顏色,並調整到對比度達到所需門檻。

如何使用

  1. 1

    選一個顏色

    在飽和度區域點擊任意位置,再用色相和透明度滑桿微調。HEX、RGB 和 HSV 會同步更新。

  2. 2

    從圖片取色

    把圖片拖到頁面上或選擇檔案,然後點擊想要的像素,色值會立刻出現。

  3. 3

    做一條漸層

    點擊色條新增色標並拖到位置,切換線性或放射,再設定角度。

  4. 4

    複製並使用

    複製數值或整段 CSS 宣告。你選過的一切都會自動存進紀錄。

常見問題

一個不礙事的小工具

它最初只是內部小工具:我們想取個顏色、調一下就繼續做事,而不必先打開笨重的設計軟體。它刻意只有一頁,刻意保持輕快,並且會一直免費。

瀏覽器擴充功能

想直接從瀏覽的網頁取色?Chrome 和 Edge 擴充功能會在工具列加上滴管按鈕,保存各自的紀錄,並可一鍵開啟本工具。