🎨 數顏色計算機 ♥

預覽文字效果

🎨 底色 (Background)

HEX:
RGB:
R 171
G 6
B 6

✏️ 文字色 (Text Color)

HEX:
RGB:
R 255
G 255
B 255

sRGB → 十六進位色碼轉換

輸入 0~1 的 sRGB 分量

🎨 HEX 快查色碼表(點擊套用)

📚 顏色代碼知識說明

什麼是 HEX 色碼?

  • HEX(16進位):使用 # 開頭加上 6 位數字/字母表示顏色,如 #FF0000 代表紅色
  • 格式:#RRGGBB,每兩位代表紅(R)、綠(G)、藍(B)的強度
  • 範圍:00 到 FF(十進位的 0-255)
  • 優點:簡潔、網頁通用、設計師最常用

什麼是 RGB 色碼?

  • RGB(Red Green Blue):使用三個 0-255 的數值表示顏色
  • 格式:rgb(255, 0, 0) 代表紅色
  • 原理:模擬螢幕像素的發光方式,紅綠藍三色混合
  • 應用:CSS、程式設計、圖片處理常用

如何使用這個工具?

  • 方法一:點擊色塊,從拾色器選擇顏色
  • 方法二:直接輸入 HEX 色碼(如 #FF0000)
  • 方法三:拖動 RGB 滑桿調整顏色
  • 方法四:點擊下方快查表的顏色直接套用
  • 複製色碼:點擊「複製」按鈕一鍵複製到剪貼簿

💡 實用技巧:

• 網頁設計建議使用 HEX 格式(如 #667eea)

• CSS 動畫可使用 RGB 格式便於計算過渡

• 純黑 #000000,純白 #FFFFFF

• 相同的兩位數可簡寫(#FF0000 = #F00)

色彩搭配建議

  • 對比色:色環上相對的顏色,視覺衝擊強(如紅配綠)
  • 鄰近色:色環上相鄰的顏色,和諧舒適(如藍配紫)
  • 互補色:對比色的一種,最強烈的對比效果
  • 單色系:同一顏色的深淺變化,統一專業

網頁設計色彩心理學

  • 紅色:熱情、緊急、刺激(促銷、警告)
  • 藍色:信賴、專業、冷靜(企業、科技)
  • 綠色:健康、環保、成長(醫療、自然)
  • 黃色:活力、溫暖、注意(警示、兒童)
  • 紫色:高貴、神秘、創意(奢侈品、藝術)
  • 黑色:權威、精緻、現代(時尚、高端)
  • 白色:純潔、簡約、乾淨(醫療、極簡)

無障礙設計(Accessibility)

  • 對比度:文字和背景的對比度至少 4.5:1
  • 色盲友善:不要僅靠顏色區分資訊
  • 可讀性:淺色背景配深色文字最易讀
  • 避免:紅配綠(色盲者難辨識)

常見色碼對照

  • #FFFFFF:純白色
  • #000000:純黑色
  • #FF0000:純紅色
  • #00FF00:純綠色
  • #0000FF:純藍色
  • #FFFF00:黃色
  • #FF00FF:洋紅色
  • #00FFFF:青色