色彩混合器
選兩個顏色、拖動混合比例，就能立即得到中間色、色階帶與可直接貼進樣式表的 CSS。
來源顏色
支援直接輸入 HEX 色碼，也可以用色票快速挑色。
顏色 A
顏色 B
混合比例
0% 代表完全保留顏色 A，100% 代表完全變成顏色 B。
快速預設
可先套用一組風格，再微調成自己的品牌色。CSS 漸層
可直接貼到 background 屬性，再依需求調整角度或百分比。
混合結果
下方會同步顯示混合後的 HEX、RGB、HSL 與色階帶。
中間色階
從 0% 到 100% 的混色過程一覽。- 在顏色 A 與顏色 B 輸入你要混合的兩個 HEX 色碼，或直接點色票挑色。
- 拖動比例滑桿，決定結果要偏向顏色 A 還是顏色 B。
- 右側會即時更新混合後的 HEX、RGB、HSL，方便你貼到設計稿、CSS 或設計系統文件。
- 下方的中間色階會列出多個混合節點，適合挑選 hover、border、背景層次色。
- 若需要快速試配色，可先套用預設組合或按下「隨機組合」。
提示：輸出的 CSS 漸層不是唯一答案，而是方便你把兩色與混合色快速帶進介面原型，再繼續微調。
何時會用到此工具？
當你手上已有兩個品牌色、按鈕色或插圖主色，想找出中間過渡色、建立色階，或快速產生一段可用的 CSS 漸層時，就很適合用這個工具。
它是用什麼方式混色？
目前以 RGB 線性插值計算混合結果，優點是直覺、速度快，也很適合做網頁介面、圖層背景和視覺稿的第一輪配色。
為什麼混出來的顏色看起來和我想像不同？
因為不同色彩空間的混色邏輯不一樣。RGB 混色偏向螢幕呈現，如果你在做印刷或很在意感知均勻度，還是要再用專業色彩工具進一步校正。
可以拿來做品牌色階嗎？
可以，特別適合先快速生出 5 到 6 個過渡色，再手動挑出適合作為 hover、卡片背景、分隔線或高亮標記的版本。
支援 RGB 或 HSL 直接輸入嗎？
目前主輸入格式是 HEX，因為它最適合在設計與前端之間複製貼上。如果你已經有 RGB 或 HSL，可先搭配站內的調色盤工具轉成 HEX 後再混色。
產生的 CSS 能直接用在哪裡？
可以直接貼到網頁的 background 屬性，也能帶進 Figma、簡報軟體或設計系統文件，當作按鈕、卡片、區塊背景的起點。
色彩對比度與無障礙設計：WCAG 標準、對比度計算原理與改善技巧
色彩對比度是無障礙網頁設計的核心指標，影響弱視、色盲及一般使用者在不同環境下的閱讀體驗。本文說明 WCAG 2.1 標準的 AA/AAA 等級、相對亮度計算公式，以及常見的色彩設計錯誤與修正策略。
色碼完全指南：RGB、HEX、HSL 的轉換原理與設計應用
前端工程師與設計師都離不開色碼，但你真的了解 RGB、HEX、HSL 背後的原理嗎？本文從光學物理到無障礙設計，完整解析各種色彩模型的換算邏輯、使用情境與配色實戰技巧。
圖片格式怎麼選？JPG、PNG、WebP、GIF 完整比較指南
同樣是存圖片，為什麼 PNG 有時比 JPG 大好幾倍？什麼時候該用 WebP？GIF 是不是已經過時了？本文從壓縮原理出發，一次搞清楚主流圖片格式的差異與選擇邏輯。
社群貼文圖片編輯全流程：尺寸規格、視覺一致性與輸出設定
想讓社群貼文更吸睛，不只靠設計感，更要掌握尺寸、構圖、色彩一致與輸出設定。本文整理一套可重複執行的圖片編輯流程，幫你穩定產出高品質內容。
Markdown 語法完全指南：從入門到實戰應用
Markdown 是現代寫作者、開發者與內容創作者最常用的輕量級標記語言。本文從語法基礎到進階技巧，完整解析 Markdown 的使用方式與各平台應用實戰。
PDF 合併、分割、壓縮怎麼做？日常文件整理完整攻略
收到一大份 PDF 只需要其中幾頁？多份報告要整合成一份寄出？檔案太大無法上傳？本文拆解最常見的四種 PDF 操作，讓你不需安裝任何軟體也能搞定。