現在在做數位產品的大家，可能都對設計系統 Design System 的概念不陌生了吧？前端同事每天都說好想用的 Tailwind CSS 就是一個類似的東西，像和設計師簽約一樣，說好往後的設計就只用這些字體大小和顏色，並給他們命名。這麼一來，設計系統能讓非設計師也能做出雖不完美但適合的設計決策。 但設計系統要開始時，定義顏色真的很頭痛對吧～要如何設計出一個不會限制設計的顏色系統呢？甚至，如果已經有固定的品牌顏色時要怎們產生搭配的色階呢？這都是我自己在現在工作做設計系統時遇到的問題。 因應這些問題，我寫了這個色彩系統產生工具，請有在做 design system 的大家試著使用看看： https://chromaspec.studio-so-soft.net/ 。這個工具使用 LCH 描述色彩—同明度(Lightness)的顏色，會有同等的視覺上的亮度，解決了不同色相之間的色階問題。另外還有其他根據設計師需求所設計的工具，例如不繁瑣，又保有自由度的飽和度調整工具。在色輪上顯示選擇的色相們的分佈...等等。