Color tools
Ten browser-based color utilities — convert HEX to RGB and HSL, mix and blend colors, generate complementary, analogous, and triadic schemes, create tint and shade palettes, look up CSS named colors, extract CSS variables, and pick colors from images. No signup, no cloud, nothing leaves your device.
-
HEX 轉 RGB 轉換器
將十六進位色碼轉為 RGB 值,取得 r、g、b 分量與 CSS rgb() 字串。
開啟工具 →
-
HEX 轉 HSL 轉換器
將 Hex 顏色轉為 HSL(色相、飽和度、亮度),便於主題化與 CSS 變數。
開啟工具 →
-
顏色混合器
以任意比例混合兩種顏色,即時顯示混合後的 Hex、RGB 與 HSL 值。
開啟工具 →
-
互補色查詢
查詢任一 Hex 顏色的互補色(色輪上對應 180° 的顏色)。
開啟工具 →
-
類似色產生器
產生類似色色彩配置(色輪上 ±30°、±60°)構成和諧的色盤。
開啟工具 →
-
三等分色產生器
產生三等分色色彩配置——色輪上每 120° 等距分布的三種顏色。
開啟工具 →
-
色調與陰影產生器
為任一基礎色產生完整的淺色(tints)與深色(shades)漸層。
開啟工具 →
-
顏色名稱查詢
查詢任一 Hex 值最接近的 CSS 命名顏色,或依顏色名稱取得 Hex 碼。
開啟工具 →
-
CSS 變數擷取器
貼上 CSS 程式碼,一鍵擷取所有自訂屬性(--variables)與其值。
開啟工具 →
-
圖片像素取色
上傳圖片並點擊任一像素,即時讀取其 Hex、RGB 與 HSL 色彩值。
開啟工具 →
Why browser-only color tools?
Color decisions are at the heart of every design system. These tools let you experiment freely without pasting values into a remote service or signing up for yet another SaaS product. Every conversion, blend, and palette is calculated locally in JavaScript — instant feedback with zero latency, no data sent anywhere.
Choosing the right tool
Need to translate design tokens? Use HEX to RGB or HEX to HSL to get CSS-ready values. Building a palette? Try Complementary, Analogous, or Triadic generators for harmonious schemes. Need more depth? Tints & Shades generates a full lightness range. For matching a real-world color, use Color from Image Pixel to sample any photo.