作者：陳俊佑 / 臺灣大學計算機及資訊網路中心程式設計組資訊工程師
摘要
學Tailwind CSS像做披薩，配料隨心選，放上鳳梨更可以烤出獨一無二的風味！
本文以輕鬆幽默方式介紹 UI Colors 在 Tailwind CSS配色上的應用。重點包括輸入顏色後自動生成完整色階、支援HSL/RGB/LCH調整、提供顏色命名與介面元件即時預覽，協助提升設計一致性與使用者體驗；並能匯出Tailwind CSS、CSS等程式碼，降低設計與開發溝通成本。
前言
大家好，我是富田町47番地的社畜工程師柚子哥，第二篇大家還記得自定義顏色的強度嗎?官方網站推薦UI Colors(https://uicolors.app/create)好用工具網址給大家使用。
大家是不是曾經為了挑一個按鈕的顏色，苦思冥想到懷疑人生？選來選去覺得完美無缺，結果業務單位冷冷丟一句：「這顏色好像有點怪哦。」你內心瞬間崩潰，開始懷疑自己是不是色盲。
別擔心，現在有UI Colors，讓你瞬間從「顏色苦手」進化為「色彩大師」，不需要學設計也能贏得掌聲！
進入網站
這網站有多神奇呢？簡單來說，它就是你的 Tailwind CSS 調色板生成機。只要輸入一個顏色，它就能幫你變出一整套深淺不一、和諧優雅的配色，讓你的專案瞬間高大上。
圖1. 官網。
使用起來更是簡單到不行，你只需要輸入一個十六進位顏色碼（就算亂選也沒關係，因為它會讓所有顏色看起來都像專業挑的）。
再調整 HSL 值，簡單滑滑鼠就能把顏色調到最合心意的狀態。它還會自動生成一整套色階，比如淺色、深色
圖2. HSL調色。
圖3. RGB調色。
圖4. LCH調色。
這個工具自動為每個顏色配上名字，讓你告別「這到底是什麼顏色」的困擾。每當你選擇顏色時，系統會幫你生成一個貼切的名字，無論是「午夜藍」還是「古董金」，甚至連像「橄欖綠」這種顏色名也都幫你搞定，讓你感覺自己瞬間變成了色彩專家，讓你擺脫取名稱障礙的困擾。
圖5.顏色名稱。
即時預覽按鈕、卡片等常見元件的效果，讓設計更直觀
在設計網站或應用程式時，顏色的選擇不僅僅是美觀的問題，更關乎到使用者的體驗與互動。而 UI Colors 這個工具最令人驚艷的地方之一，就是它能讓你即時預覽各種常見元件（如按鈕、卡片、輸入框等）的顏色效果，這樣不僅可以讓你更直觀地看到顏色搭配的結果，還能確保你所選擇的顏色在實際界面中是否合適。
1.讓設計更具體：
在大多數顏色生成工具中，你只能看到純粹的顏色，這對設計師來說有時候並不夠直觀，因為顏色在不同的元素中呈現出來的效果是截然不同的。比如說，對比度很高的顏色在背景上看起來可能很好，但如果用在按鈕上，可能會顯得過於刺眼。UI Colors 則通過即時預覽功能，幫助你看到顏色在具體元件上的呈現效果，無論是標題、按鈕、卡片，甚至是整體背景，這些元素都能清晰呈現顏色的互動感覺。
2.強化用戶體驗：
顏色在用戶體驗中的作用不可忽視。它不僅影響視覺效果，還能影響使用者的情感和行為。例如，一個柔和的顏色可以讓人感覺舒適，而鮮豔的顏色則可能讓人感覺興奮或緊張。UI Colors 讓你可以在顏色生成的同時，立即查看它們在實際按鈕、卡片等元件上的效果，這樣你能更好地調整顏色以達到最佳的用戶體驗。當你在為按鈕選擇顏色時，可以立刻看到該顏色在互動時的效果，是否讓按鈕顯得更突出，或者是否與整體頁面設計和諧配合。
3.減少設計時間與反覆修改：
設計過程中最讓人頭痛的一部分就是顏色的反覆調整，特別是當你無法立即看出顏色選擇對最終效果的影響時。許多設計師可能會花大量時間不斷調整顏色，直到找到一個看似合適的方案。但有了 UI Colors，這一過程變得更加高效。通過即時預覽，你能在選擇顏色的同時，立刻看到它在各個元件中的效果，這樣就能大大縮短設計時間，減少反覆修改的次數，讓整個設計流程更加流暢。
4.提升設計一致性：
一個好的設計不僅要美觀，還需要一致性。UI Colors 通過提供一致的顏色範圍和即時預覽功能，幫助你保持整體設計的一致性。在設計過程中，顏色的選擇不僅要考慮單個元件的美觀，還要考慮整個頁面的視覺平衡。即時預覽讓你能夠查看顏色在不同元件中的應用效果，幫助你確保各個元素的顏色搭配協調，進而提升整體設計的一致性和美感。
圖6.UI模擬。
Export Cod
UI Colors 的 Export Code功能是另一個讓開發者和設計師愛不釋手的亮點！這個功能的出現，徹底解決了設計與開發之間「顏色怎麼用？」的溝通問題。它讓你在設計過程中選擇顏色後，能夠立即生成相應的CSS或 Tailwind CSS 代碼，方便你直接將設計應用到前端開發中。
1.支援 Tailwind CSS(免費)：
對於使用 Tailwind CSS 的開發者來說，UI Colors更加貼心。它不僅能生成標準的 CSS 代碼，還能直接導出符合 Tailwind CSS語法的代碼。這意味著你可以輕鬆將設計轉換為 Tailwind 的顏色類名，無需再手動轉換每個顏色的格式。只需要在你的 HTML 或 JSX 中使用這些自動生成的 Tailwind 顏色類別，設計和開發的過渡變得更加順暢。
2.自動生成 CSS 代碼(要付費)：
當你確定了設計中的顏色後，UI Colors 會自動為你生成對應的 CSS 代碼。這樣，你不需要再手動去寫顏色的 HEX 或 RGB 值，UI Colors 已經幫你處理好了，讓你的工作流變得更高效、更省時。從顏色生成到代碼導出，整個過程無縫銜接，開發者可以直接把這些代碼複製到自己的項目中，節省了大量手動編寫 CSS 的時間。
3.支援其他格式(要付費)：
除了 CSS 和 Tailwind CSS，UI Colors 還提供了其他格式的代碼選項。無論你是使用 SASS、LESS 還是純 CSS，UI Colors 都能幫助你生成對應格式的代碼，這對於多種開發環境和框架的支援來說，無疑是個巨大的便利。
圖7. Export Code。
如果懶到連這些都不想做，那付點錢給它，它的API直接幫你搞定一切。還可以輕鬆地把顏色直接帶進專案，不用再在開發和設計之間來回扯皮。甚至還有Figma插件，讓設計師和開發者能用同一套顏色溝通無障礙。
圖8. API。
結語
總之，UI Colors不只是個工具，更像是一個全天候待命的色彩顧問。它不僅讓你告別那些花式被同事吐槽的設計，幫你贏得「這設計有水準！」的讚嘆聲。再也不用因為顏色被質疑自信心崩潰，現在就去試試吧！
別忘了，設計裡的細節成就整體，而配色正是最能一眼抓住人心的那部分。UI Colors，讓你的設計不僅看起來專業，還能讓你自己都忍不住說：「原來我也有這麼強！」，晚上睡覺都會躲在棉被裡面偷笑。
參考資料