Slop Colors 指南

Slop Colors 入門

Slop Colors 在同一個頁面中提供顏色選取器、調色盤製作工具與對比檢查工具。圖片與調色盤都在您的瀏覽器中讀取，從不上傳。

開啟 Slop Colors

頁面介紹

頁面頂部是目前的顏色，會以 HEX、RGB、HSL、OKLCH 與 CMYK 顯示其數值，每種格式都有「複製」按鈕。下方有四張卡片：從圖片取色、調色盤、由此顏色製作，以及對比檢查。

右側面板包含顏色的欄位、要由此製作什麼、從圖片中找出幾種顏色，以及匯出設定。在手機上，它是底部的面板：點選「設定」即可開啟。

從圖片取色

1. 將圖片拖到頁面上，或點選「開啟圖片…」。
2. 將指標移到圖片上並點選即可取色；放大鏡會顯示指標下方的像素。
3. 使用方向鍵每次移動一個像素，按 Enter 即可將顏色加入調色盤。
4. 點選「全部加入色盤」，即可保留圖片的主要顏色。

提示： 在 Chrome 與 Edge 中，「從螢幕挑選」可取得螢幕任何位置的顏色。

建立調色盤

1. 點選「加入此色彩」，即可加入目前的顏色。
2. 在面板中選擇「和諧色」與「色階」，然後在某一列下方選擇「用作色盤」。
3. 在調色盤的每個顏色下方，‹ 與 › 可移動該顏色，✎ 可為其命名，× 則會移除它。

檢查對比

輸入文字顏色與背景顏色，或在面板中使用「用作文字色彩」與「用作背景」。比率與 WCAG 等級會立即顯示；「修正文字色彩」會找出最接近且通過 AA 標準的顏色。

匯出與保存

1. 為調色盤命名，並在「匯出」下選擇「格式」。
2. 點選「下載調色盤」、「複製程式碼」或「儲存到 Slop Drive…」；「開啟於…」可將檔案傳送到其他應用程式。
3. 若要再次開啟調色盤，請將其 .gpl、.ase、.json 或 .css 檔拖到頁面上。