打開任何一個線上 color picker，點選你要的顏色，複製那組六位字元的 hex 值就好。#3B82F6 是中等藍色。不用裝軟體，瀏覽器上十秒內搞定。
什麼是 Hex 色碼？
Hex 色碼是一組六個字元的字串，前面加上 # 符號，例如 #FF5733。每兩個字元代表一個顏色通道：前兩碼紅色、中間兩碼綠色、最後兩碼藍色。數值範圍從 00（無）到 FF（最大值），用十六進位表示。
#FF0000 是純紅、#00FF00 是純綠、#0000FF 是純藍。#000000 黑色、#FFFFFF 白色。看懂規律之後，你可以在渲染前大概猜出色碼對應什麼顏色——三組數值都高的偏白，都低的偏黑。
Hex 色碼是網頁開發的標準格式，瀏覽器、CSS、Figma、Canva 都直接接受。根據 MDN Web Docs 的說明，hex 色碼從 CSS 規範最早期就存在了。
Hex vs. RGB vs. HSL — 差在哪裡？
打開 color picker，你會看到三種輸出格式，各有適合的場景。
Hex（#3B82F6）最精簡，也是 HTML、CSS 和多數設計工具的預設格式。複製貼上很方便。
RGB（rgb(59, 130, 246)）用十進位數字表達同一個顏色。需要處理透明度的時候 RGB 最適合——rgba(59, 130, 246, 0.5) 可以做出 50% 透明的覆蓋層。Hex 除非用到八位數的擴充格式，否則沒辦法處理透明度。
HSL（hsl(217, 91%, 60%)）代表色相（Hue）、飽和度（Saturation）和亮度（Lightness）。色相是色輪上的角度（0–360），飽和度是顏色鮮豔程度，亮度就是亮暗。HSL 在調色時最直覺：想讓顏色亮 20%，直接改 L 值就好，不用重新算紅綠藍個別的數值。
線上 color picker 讓你輸入任何顏色，馬上看到 hex、RGB、HSL 三種數值。Atoolin 的 color picker 三種格式並排顯示，拖曳選色器時即時更新。
如何線上取得任何顏色的 Hex 色碼
步驟很簡單：
- 在瀏覽器中打開一個 color picker。
- 拖曳色相滑桿和選色器，或者直接輸入已知的數值。
- 點擊 hex 欄位複製結果。
如果你要比對圖片或截圖中的顏色，用支援圖片上傳或滴管功能的 color picker。把滑鼠移到你想取色的像素上就能讀到色碼，不到 30 秒，結果精確到像素。上網搜「品牌名稱 hex 色碼」不太靠得住——品牌換 logo 之後，過時的數值到處都是。
設計師的 Hex 色碼指南
跟開發者說「那個按鈕弄成藍綠色」，每個人做出來的結果不一樣。交出 #0D9488，每個瀏覽器、每個螢幕密度下顏色都相同。
Design system 會把 hex 色碼存成命名好的 token。團隊在共用的 stylesheet 定義 brand-primary: #0D9488，所有元件引用這個 token。改一個值，整個產品同步更新。在還沒建立 token 系統之前，色差是 UI 審查中最常被挑出來的問題。
Figma、Sketch、Adobe XD 的顏色面板預設顯示 hex 值，交付給開發者時不需要額外轉換。
常見的 Hex 色碼
| 顏色名稱 | Hex 色碼 | 常見用途 |
|---|---|---|
| 純白 | #FFFFFF |
背景、深色底上的文字 |
| 純黑 | #000000 |
內文、邊框 |
| 中等藍 | #3B82F6 |
按鈕、連結（Tailwind blue-500） |
| 藍綠色 | #0D9488 |
強調色（Tailwind teal-600） |
| 紅色 | #EF4444 |
錯誤狀態（Tailwind red-500） |
| 淺灰 | #F3F4F6 |
卡片背景（Tailwind gray-100） |
社群媒體配色比對
社群媒體平台都有公布官方 logo 的 hex 色碼。用對色碼值，你為 Instagram、LinkedIn 或 YouTube 做的圖片放在平台 UI 旁邊才不會突兀。
目前幾個平台的品牌色：Facebook 藍 #1877F2、LinkedIn 藍 #0A66C2、YouTube 紅 #FF0000、X（前 Twitter）用 #000000、Spotify 綠 #1ED760。
品牌色會更新。好幾個設計部落格在 Twitter 改名好幾個月後還在列舊版藍色（#1DA1F2）。與其相信靜態清單，不如直接用 color picker 從官方截圖或該平台目前首頁取色，拿到的才是真正的數值。
跨格式維持顏色一致
同時為多個平台製作圖片——YouTube 橫幅、Instagram 貼文、部落格縮圖——匯出尺寸不同，但顏色要一樣。一組存好的 hex 色碼就是定錨點，一個應用程式調好了，其他貼上同一組值就能重現。
客戶給的是 PANTONE 色票而不是 hex？用 PANTONE 轉 hex 的對照表。轉換結果是近似值，因為 PANTONE 是印刷標準、hex 是螢幕標準，同一組色碼在不同色彩設定檔的螢幕上也可能有些微差異。
FAQ
Hex 色碼裡的 # 符號是什麼意思？
# 是前綴符號，告訴瀏覽器和 CSS 解析器後面六個字元是 hex 色碼。有些工具不加 # 也能接受，但加上去才是標準做法，能避免解析錯誤。
可以從照片或截圖取得 hex 色碼嗎？
可以。用支援圖片上傳或滴管功能的 color picker，上傳圖片後把滑鼠移到目標像素上，工具會回傳該像素的 hex、RGB 和 HSL 值。讀取的是實際儲存的色彩值，不是估算。
為什麼同一個顏色在手機和電腦上看起來不一樣？
螢幕會因硬體和色彩設定檔不同而有顏色差異。#3B82F6 這個 hex 色碼在每台裝置上定義的數學值相同，但廣色域螢幕（例如 Apple Display P3）可能比舊款 sRGB 螢幕顯示更飽和的顏色。對多數網頁和社群媒體的工作來說，差異小到可以忽略。