[macOS免費軟體] ColorSlurp:右鍵一秒吸色,色碼直接貼上!寫網頁的救星,超方便~

[macOS免費軟體] ColorSlurp:右鍵一秒吸色,色碼直接貼上!寫網頁的救星,超方便~

安安我是安迪連。

今天要來介紹一個 macOS 上我很愛用的小工具。 身為一個網頁設計師(或任何需要寫 CSS 的人),你一定有過這種崩潰時刻: 看到一個不錯的顏色,想把它用到自己的設計裡,結果還要打開 Photoshop?或是打開 Chrome 開發者工具慢慢找?太慢了!

這時候你需要的就是它——ColorSlurp


為什麼是 ColorSlurp?

市面上吸色軟體這麼多,為什麼獨推這款? 理由很簡單:它真的很順手,沒有多餘的步驟,而且免費版就強大到不行。

很多吸色工具介面還停留 Windows 98 的年代,但 ColorSlurp 完全是為了 macOS 原生設計的,精緻、滑順,支援深色模式。重點是它的放大鏡功能非常精準,連 1px 的線條都能輕鬆吸到。

但這些都不是重點,重點是它可以被設定成「極致懶人模式」。


安迪連的「一秒吸色」工作流

我的用法非常無腦,完全不用打開主視窗:

  1. 滑鼠移到上方選單列 (Menu Bar) 的圖示對 ColorSlurp 按一下右鍵

  2. 游標變身放大鏡,點一下螢幕上你要的顏色。

  3. 結束! 顏色的 HEX 代碼(例如 #FFD21D)已經自動複製到剪貼本了,直接就可以貼上!






真的就是這麼快,上一秒看到顏色,下一秒已經變成 CSS 代碼了。


⚠️ 關鍵設定:跟著安迪連這樣改

剛下載下來的 ColorSlurp 雖然好用,但還沒到達「神器」的境界。 請務必照著我的設定調一次,保證你的切版速度提升 200%。

打開 ColorSlurp 的 Preferences (偏好設定): 

1. 設定常駐選單列與吸色習慣

General 分頁:

  • Open ColorSlurp at login:打勾 開機自動啟動這個 APP

  • Show app icon in:選「Menu Bar Only」(讓它住在最上面的選單列)。



2. 設定輸出的格式 (CSS 專用)

Formats 分頁:

  • Default format 找到 Hex (或是你常用的 RGB/HSL)。

  • Use # prefix for hex codes 自動在色碼前加上井字號:看你習慣,我是不勾。


3. 設定極速吸色功能

Magnifier 分頁:

  • Hide ColorSlurp when showing the magnifier:打勾 吸色的時候隱藏ColorSlurp主界面 
  • Copy color when picked to the clipboard:打勾 吸完色複製到剪貼本


結論:免費的就很好用了

ColorSlurp 雖然有付費的 Pro 版(多了配色方案、對比度檢查等功能),但老實說,對於我們這種只需要「快狠準」拿到 HEX 代碼的工程師來說,免費版已經是天花板級別的好用。

如果你跟我一樣是 macOS 用戶,又剛好是網頁設計師或前端工程師,請務必去下載。 用過一次,你就回不去內建的「數位測色計」了。

📥 下載傳送門



◆祝大家的 CSS 色碼永遠不用自己打!

★安迪連碎碎念
專注於3C科技生活、美食旅遊與攝影的部落格,誠實心得,歡迎常來!

部落格: https://blog.andylain.com/
臉書粉絲團: https://www.facebook.com/Andyblogtw/


若有任何疑問或建議,歡迎在文章下面留言! 

不想錯過任何新文章/攝影教學/實用軟體推薦/超誠實食記
 →現在就立刻按讚「安迪連碎碎念粉絲團」吧~