任何執行 Safari、Chrome、Firefox 或其他現代瀏覽器的 Mac，都可以透過開啟 Random Color Generator，一鍵產生隨機的 HEX、RGB 與 HSL 色彩——這是一個免費的網頁工具，會從完整的 24 位元 RGB 空間中 16,777,216 種可能顏色裡抽取每個色票，並且只要輕點一下就能將任何格式複製到剪貼簿。macOS 本身就已經內建這個工具所需的一切：瀏覽器、剪貼簿，以及藏在「工具程式」資料夾中的「數位測色計」，方便偶爾進行像素層級的取樣。這個網頁工具本身完全在瀏覽器分頁內運作，使用 JavaScript 內建的亂數功能，因此不會上傳任何資料、不會記錄任何日誌，也完全不需要帳號。這樣的組合，讓它成為在 Mac 上取得全新色票的最快途徑，既不需要授予安全權限，也不需要從 App Store 下載任何東西，更不必花錢購買專用的色彩工具。

random color generator on mac
在 Mac 上使用 Random Color Generator：直接用瀏覽器搞定

為什麼瀏覽器工具在 Mac 上勝過原生 App

macOS 使用者取得隨機顏色的方式不只一種。「應用程式」中的「數位測色計」可以取樣螢幕上某個像素並顯示其 RGB 值，但它本身不會產生任何隨機結果——你仍然必須把指標指向某個東西。App Store 上確實有第三方 Mac 應用程式，從簡單的單鍵產生器，到具備調色盤資料庫、色彩歷史紀錄和無障礙報告的完整設計套件都有。它們有各自的用途，特別是在需要儲存調色盤、命名色票，或全系統快速選取快捷鍵的日常設計工作上。

不過，若只是想快速取得一批隨機色彩，瀏覽器工具在 Mac 上就很難被超越。它可以從 Safari 分頁、Spotlight 捷徑或書籤頁面在幾秒鐘內開啟。它不會要求無障礙或輸入監控權限。它不需要啟動代理程式、選單列圖示，也不會佔用持續運作的系統資源。而且由於這個工具完全在 JavaScript 中以用戶端方式執行，即使在網頁首次載入後，你依然可以在沒有網路連線的 MacBook 上繼續使用。

最後這一點的重要性其實超乎想像。如果你在火車上、咖啡廳裡，或在 Wi-Fi 不穩的飛機上構思色彩點子，一個已經載入好的瀏覽器分頁可以持續運作。沒有同步、沒有授權檢查，也不會有自動更新在專案進行中悄悄改變介面。對於只需要顏色、不需要整套設計工具的 Mac 使用者來說，瀏覽器分頁是系統上最輕量的選擇。

如何在 Mac 上三步驟產生隨機色彩

在你的 Mac 上用 Safari、Chrome 或任何其他瀏覽器開啟 Random Color Generator，然後依照下列步驟操作。

  1. 設定數量。在頁面頂端的數量欄位中輸入 1 到 100 之間的數字。若只要一個快速參考的色票，1 個就夠；若要做起始調色盤，10 個很合適；而完整的 100 個對於 Mac 上的圖表資料序列、儀表板 mockup 或大型資料視覺化草稿來說非常實用。
  2. 點選「Generate」。按下按鈕來擲出一批全新的隨機色彩。每一個色票都來自你螢幕原本就支援的同一個 16,777,216 色範圍，而且每一批都與上一批獨立，因此除非你手動複製某個值，否則重新產生永遠不會重複先前的結果。
  3. 點擊複製。點選任何一個色票，即可複製其 HEX 值（例如 #3a9d7f），或者點選色票下方的 RGB 或 HSL 標籤來改複製該格式。這個值現在已經存到你的 macOS 剪貼簿中，可以直接貼到 VS Code 的 CSS 檔、Figma 畫板、Keynote 投影片，或任何其他接受貼上文字的 Mac 應用程式。

如果你只想要一種顏色，把數量設為 1，就能得到一個全新的單一色票，並在下方列出全部三種格式。如果你想得到一個能用視覺快速掃視的調色盤，數量設在 5 到 20 之間通常是最佳甜蜜點——既有足夠的多樣性可比較，又不會需要捲動畫面。

每種色彩格式告訴你什麼

頁面上的每一個色票都是同一個顏色以三種不同方式呈現。這三種格式在紙面上看起來不一樣，但它們描述的是完全相同的像素值——差別在於你或你的工具需要讀取哪一個通道。

格式 範例 通道 在 Mac 上最適合用於
HEX #3a9d7f 六個十六進位數字 CSS、Figma、Sketch、設計 token
RGB rgb(58, 157, 127) 紅、綠、藍，範圍 0–255 影像編輯器、螢幕輸出、腳本撰寫
HSL hsl(158, 46%, 42%) 色相 (0–360)、飽和度與亮度 (0–100%) 微調色票、憑感覺挑選變化

HEX 是大多數現代設計和程式工具預設接受的格式。RGB 則是螢幕實際混光的方式，也是影像編輯器在開啟選色器時所呈現的內容。HSL 以人們傾向思考色彩的方式來描述顏色——先選定一個色相，再上下調整飽和度和亮度——這使它成為把隨機結果微調成符合品牌調色盤時最簡單的格式。在色票上點選這三種格式中的任何一個，對應的字串就會進入你的剪貼簿。

Mac 設計師與開發者的實際工作流程

隨機色彩產生器聽起來像是個玩具，但在實際工作的 Mac 上，它能填補反覆出現的幾個實用缺口。

  • 突破創意瓶頸。設計師與插畫家常因習慣而一直使用同樣五種顏色。在「Generate」上點一下，就會浮現你從不會刻意選出的配色，而其中最有用的那些可以丟進 Figma 或 Affinity Designer 作為起點。
  • 佔位 UI。在 VS Code 或 WebStorm 中建立元件的前端開發者，在真正的設計系統尚未定案前，需要為標籤、 avatar、圖表資料序列和 skeleton 狀態準備暫時性的顏色。隨機的 HEX 值能填補這些位置，又不會鎖定任何永久的決定。
  • 資料視覺化。當 Mac 儀表板需要二十種不同的分類顏色，而設計團隊尚未核准任何調色盤時，一批隨機的 HEX 值比起在 Figma 中手動循環切換色票，是更快的初稿。
  • QA 與 fixture。正在準備 fixture、模擬 JSON 或範例 avatar 的測試工程師，可以直接拉一批顏色並貼進 fixture 檔。隨機性正是重點——比起人工挑選的調色盤，它對 UI 的壓力測試更為真實。
  • 教學。教授 CSS 或基礎設計的 Mac 課堂，可以藉由並列展示同一顏色的 HEX、RGB 與 HSL 而受益。學生會看到通道在變化，但色票保持不變。

由於這個工具在本地端執行，你也能讓產生的色彩組合保持私密——沒有畫廊、沒有共用歷史，也不會同步到任何帳號。

出貨前檢查對比度

有一點在 Mac 上值得特別注意：Retina 螢幕可能讓一個勉強及邊的色彩在你辦公室裡看起來 OK，到了同事的外接螢幕上卻變得難以辨識。換言之，隨機產生的色彩並不保證具備無障礙可用性。如果產生的色票會承載內文文字、狀態圖示或任何具意義的訊號，請在上線前檢查它與背景的對比度。根據 WCAG 2.2，大多數團隊目標達到的閾值為：正常文字 4.5:1、大字與圖形物件 3:1。

如果你需要的是保證能在特定背景上清楚閱讀的隨機色彩，這篇關於 using a random color generator for accessible contrast pairs 的專文，會逐步說明在同一個工作階段中產生候選色彩並經由對比檢查篩選的工作流程。把隨機產生器與專門的 color contrast checker 搭配使用，就能把一個本質上是趣味的工具，轉化為不離開瀏覽器就能完成的實用無障礙工作流程。

若是裝飾性用途——漸層填色、插畫背景、頁首區塊的點綴——無障礙性就不是那麼重要，隨機產出的結果通常就能直接使用。

想看更深入的介紹，請參閱 Random Color Generator on Windows: Browser Quick Start。