「這個藍色不對」
做過設計的人一定聽過這句話。
客戶說要藍色，你給了天空藍，他說太淺。換了深藍，他說太暗。最後他傳了一張截圖跟你說「就是這個藍」——一張被壓縮到看不清楚的 JPG。
顏色這件事，用嘴巴講永遠講不清楚。所以我們需要色碼。
什麼是色碼？
色碼就是用數字和字母來精確表示一個顏色。最常見的幾種格式：
HEX（十六進位）
網頁設計最常用。長得像 #FF5733 這樣，前面加個井號，後面六個字元。前兩位代表紅色、中間兩位代表綠色、後兩位代表藍色。
RGB
用紅（Red）、綠（Green）、藍（Blue）三個數值來混色，每個值從 0 到 255。比如 rgb(255, 87, 51) 就是一種橘紅色。
HSL 用色相（Hue）、飽和度（Saturation）、亮度（Lightness）來描述顏色。這個格式比較直覺——色相決定是什麼顏色，飽和度決定顏色鮮不鮮豔，亮度決定亮或暗。
這幾種格式其實描述的是同一個顏色，只是表達方式不同。
用 Free2Box 挑顏色
打開工具後，你可以：
- 直接在色盤上點選顏色，或是拖動滑桿調整
- 輸入已知的色碼（HEX、RGB 或 HSL 都行），工具會自動轉換成其他格式
- 複製色碼直接貼到你的 CSS、設計稿或簡報裡
整個過程不需要安裝任何軟體。
配色基礎：別怕，沒有想像中難
很多人覺得配色要有「美感天賦」，其實配色有規則可以遵循。掌握幾個基本方法，就能搭出不錯的配色方案。
互補色
色輪上正對面的兩個顏色，放在一起對比強烈，很有視覺衝擊力。比如藍配橘、紅配綠（但不是聖誕節那種搭法）。
適合用在需要強調的地方，比如按鈕、CTA 或標題。但大面積使用互補色會很刺眼，所以通常一個當主色、一個當點綴色。
相似色
色輪上相鄰的顏色，搭配起來和諧自然。比如藍、藍綠、綠放在一起，或是橘、橘紅、紅放在一起。
這種配色方案給人舒服的感覺，適合大部分的設計需求。缺點是對比不太強，需要靠明暗差異來拉出層次。
60-30-10 法則
這是室內設計常用但在網頁設計也很受用的比例：
- 60% 主色：背景和大面積區塊，用較中性的顏色
- 30% 輔色：次要區塊、卡片背景等
- 10% 強調色：按鈕、連結、重要提示等
按照這個比例分配，畫面自然就會有層次。
不確定顏色搭不搭的時候，先試試這個方法：選一個主色，然後搭配它的淺色和深色版本。同色系的深淺搭配幾乎不會出錯。
實際應用場景
做簡報
PowerPoint 或 Google Slides 裡自訂主題色的時候，需要輸入色碼。用顏色選擇器找到喜歡的顏色，複製 HEX 碼直接貼進去。
一份簡報建議用 2-3 個顏色就好。太多顏色看起來很雜。
寫 CSS
前端工程師每天都在跟色碼打交道。用顏色選擇器可以快速在 HEX、RGB、HSL 之間轉換，不用去背換算公式。
/* 這三行其實是同一個顏色 */
color: #3B82F6;
color: rgb(59, 130, 246);
color: hsl(217, 91%, 60%);
品牌識別
如果你在經營自己的品牌（不管是個人品牌還是公司），統一的品牌色很重要。用顏色選擇器確認精確的色碼，然後記下來，以後所有的設計物都用同一組色碼。
社群貼文
用 Canva 或其他工具設計社群貼文時，從品牌色延伸出來的配色會讓你的版面看起來一致、專業。
給新手的幾個建議
1. 少就是多 初學者最常犯的錯就是用太多顏色。3-4 個顏色（含黑白灰）就足以做出好看的設計。
2. 注意可讀性 文字和背景的對比度要夠。淺灰色字配白色背景，看起來可能很「時尚」，但閱讀起來超痛苦。尤其要考慮到老花眼或色弱的使用者。
3. 看看別人怎麼配 看到喜歡的網站或 App，可以用瀏覽器的開發者工具（F12）去查它用了什麼顏色。觀察多了，你對配色的感覺自然會進步。
4. 不要憑記憶選色 「我記得上次那個藍色大概是...」——不要這樣。每次都用色碼來溝通和記錄，才不會同一個品牌做出十種不同的藍。
螢幕上看到的顏色和印刷出來的顏色會有差異。如果你的設計需要印刷，建議用 CMYK 色彩模式的色碼，或是先印個小樣確認。
結語
顏色選擇聽起來是很感性的事，但其實有很多理性的方法可以輔助。有了顏色選擇器和基本的配色知識，你不需要是設計科班出身，也能搭出好看的顏色組合。下次遇到「這個顏色不對」的時候，直接丟色碼過去，比用嘴巴描述有效率多了。