顏色選擇器

← ToolBox / 取色器
📖 檢視「顏色選擇器使用指南」

🎨 Color Picker & Converter

Pick or enter a colour and convert between HEX, RGB, HSL, HSV and CMYK, with preset swatches and one-click copy.

#4151E1
主色
📐 計算公式 / 原理
V = max(R,G,B)；S = (max−min)/max；H 由最大通道分段求得；CMYK = 1 − RGB/255（減色法近似）
基於標準色彩空間轉換：HEX 與 RGB 為 8 位三通道，HSL/HSV 將色相、飽和度、明度分離，CMYK 由 RGB 按減色法近似換算；用於跨格式取色與印刷輸出參考。
RGB、HEX、HSL 均可直接輸入

📜 歷史記錄

🎯 預設色板

📊 顏色分析

🎨 配色建議

基於當前顏色生成互補、相鄰與三角色，點選色塊即可繼續編輯。

♿ 文字可讀性（WCAG）

以當前顏色和背景色計算對比度；可調整背景色以檢查實際介面。

⚠️ 使用說明與注意事項

📚 深度解析：取色器

💡 常見使用場景

取橙色得 HEX/RGB/HSL
<p><strong>輸入：</strong>在色域點選橙區。</p><p><strong>處理：</strong>讀出該點顏色。</p><p><strong>輸出：</strong>#FF6B35 / rgb(255,107,53) / hsl(16,100%,60%)，可複製。</p>

❓ 常見問題（FAQ）

螢幕色準嗎？
受顯示器校色影響，僅作近似參考；印刷以專色為準。結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。
兩種色對比度不夠會提示嗎？
會按 WCAG 算出對比度值與等級，未達標會標紅提醒，便於及時換色或調深。
會儲存或上傳我的內容嗎？
結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。

🔗 相關工具

📈 CSS動畫生成器（關鍵幀視覺化） - 免費線上工具，純前端處理 | ToolBox免費線上工具箱CSS動畫生成器（關鍵幀視覺化） 🎵 Web Audio 節拍器 - 免費生成器工具，線上節拍器 | ToolBox免費線上工具箱線上節拍器 🔳 二維碼生成器（已有，可加強定製） - 免費線上工具，純前端處理 | ToolBox免費線上工具箱二維碼生成器（已有，可加強定製） 🏷️ 條形碼生成器（EAN-13等） - 免費線上工具，純前端處理 | ToolBox免費線上工具箱條形碼生成器（EAN-13等） 📈 盒子陰影生成器（視覺化調整） - 免費線上工具，純前端處理 | ToolBox免費線上工具箱盒子陰影生成器（視覺化調整）
📖關於「顏色選擇器」 ▼

📝工具簡介

免費線上顏色選擇器，支援RGB/HEX/HSL顏色格式互轉，螢幕取色，調色盤，顏色搭配推薦。設計創意工具，視覺化操作，一鍵生成 CSS 程式碼。

✨功能特點

🎯使用場景

如何使用顏色選擇器

  1. 在對應的輸入框或選項中填寫、選擇所需引數。
  2. 點選「計算」或「生成」按鈕執行。
  3. 在結果區檢視輸出，可複製結果或匯出使用。

引數說明

適用場景

設計稿標註、配色與排版相關的快速參考。

常見問題

顏色選擇器是做什麼的？
線上顏色選擇器，支援 HEX/RGB/HSL/HSV/CMYK 多格式互轉、螢幕取色與即時預覽，內建預設色板，一鍵複製所需格式顏色值，純前端執行。
如何使用顏色選擇器？
在對應的輸入框或選項中填寫、選擇所需引數，點選「計算」或「生成」按鈕即可執行，結果會在結果區即時顯示，支援複製與匯出。
計算結果準確嗎？
本工具在你的本地瀏覽器中即時計算，不依賴伺服器；只要輸入的引數正確，結果即按對應的規則得出。涉及經驗估算的部分僅供參考，不作為正式依據。
顏色選擇器適合哪些場景？
設計稿標註、配色與排版相關的快速參考。
使用本工具需要聯網或上傳資料嗎？
不需要。所有計算均在你的裝置本地完成，資料不會上傳到任何伺服器，可放心使用。