色彩工具

Random Color 隨機顏色產生器

一鍵產生美麗配色,支援 10 種配色模式。 鎖定喜歡的顏色、匯出多種格式,設計配色從未如此簡單。

配色模式
色票數量
匯出
Space 快速重新產生配色
色票 Palette
Random · 3 色
廣告
Google AdSense 廣告區塊

什麼是 Random Color Generator?

Random Color Generator(隨機顏色產生器)是一款專為設計師、前端開發者與內容創作者打造的免費線上工具。它能快速產生隨機色彩與和諧配色,支援多達 10 種配色模式,並可匯出為多種常用格式。

如何使用 Random Color Generator?

使用非常簡單:先從左側選擇您想要的配色模式(如 Pastel、Vibrant、Neon 等),然後設定色票數量(1、3、5、8 或 10 個顏色),點擊「產生配色」按鈕或按下鍵盤的 Space 鍵即可隨機產生配色。若看到喜歡的顏色,可以點擊色票右上角的鎖定圖示將其鎖定,下次重新產生時該顏色將被保留。

配色模式介紹

格式說明

每個色票提供三種色彩格式:HEX(十六進位色碼,如 #A855F7)、RGB(紅綠藍數值,如 rgb(168, 85, 247))以及 HSL(色相/飽和度/亮度,如 hsl(277, 91%, 65%))。您可以一鍵複製任何格式的色值,或將整個色票匯出為 PNG、SVG、JSON 及 CSS Variables。

常見問題 (FAQ)

如何鎖定顏色?
每個色票右上角有一個鎖定圖示,點擊後該顏色會被鎖定(圖示變為紫色)。鎖定後,當您重新產生配色時,鎖定的顏色不會被改變,只有未鎖定的顏色會重新隨機產生。
配色模式有什麼不同?
每種模式會根據不同的色相(Hue)、飽和度(Saturation)和亮度(Lightness)範圍來產生顏色。例如 Pastel 模式使用高亮度低飽和度,Vibrant 使用中亮度高飽和度,而 Dark 模式則使用低亮度。這讓您可以快速找到適合專案風格的配色方向。
如何匯出色票?
點擊左側匯出區塊的對應按鈕即可。PNG 和 SVG 會下載圖片檔案,JSON 會下載包含所有色值的 JSON 檔案,CSS Variables 則會下載 CSS 檔案。您也可以使用「複製色票」按鈕將所有色值複製到剪貼簿。
什麼是 CSS Variables?
CSS Variables(CSS 自訂屬性)是一種在 CSS 中定義重複使用值的方式。產生的格式如 --color-1: #A855F7;,您可以直接將其複製到您的 CSS 檔案中使用,方便管理配色方案。
這個工具可以離線使用嗎?
可以!所有顏色的產生和計算都在您的瀏覽器中進行,不需要網路連線(除了首次載入頁面資源外)。一旦頁面載入完成,您可以在完全離線的環境中使用所有功能。
工具會保存我的配色嗎?
不會。所有配色僅存在於您的瀏覽器記憶體中,重新整理頁面後就會重置。如果您想要保存配色,可以使用匯出功能下載 JSON 或 CSS 檔案。

瀏覽器相容性

本工具使用標準 Web API(HTML5、CSS3、Canvas、ES6+),支援所有現代瀏覽器:

🌐
Chrome
最新版
🦊
Firefox
最新版
🍏
Safari
最新版
🔷
Edge
最新版

隱私說明

此工具完全在您的瀏覽器中執行。您產生的任何顏色都不會傳送到任何伺服器。我們不會對這個工具使用 Cookie 或追蹤功能。