2021-05-12 14:32:11
Chrome控制台技巧秘籍：[5]拾取網頁顏色編碼
2019-12-19 07:32:35
我們知道在Chrome控制台可以修改網頁元素的顏色背景色，那麼如何快速拾取網頁任意區域的顏色呢？而且顏色有多種表示方法和格式，能快速轉換編碼嗎？本文即給大家分享如何通過Chrome控制台快速獲取網頁顏色，並進行快速轉換格式的方法。
1
首先，在Chrome瀏覽器開啟網頁。
拿百度首頁為例，要檢視百度logo中的顏色準確編碼。
2
我們右擊圖片，點選「審查元素」
當然也可以直接按下F12，進入Chrome開發者工具，定位到這個圖片元素。
3
進入開發者工具後，檢視右側的CSS樣式
在styles標籤中，可以看到：
element.style {
}
4
這時，點選這段程式碼，進入編輯CSS屬性模式。
5
輸入color:red
然後回車（Enter鍵）。
這時會看到有個紅色小方塊。
6
點選紅色方塊後，然後會彈出一個顏色選取器。
這時不要點選任何地方，將滑鼠移動網頁上希望拾取顏色的區域，
例如百度logo，可以看到一個圓框的放大鏡，從中拾取很小的一個畫素。
7
點選想要的畫素之後，即可得到顏色程式碼（格式是RGB形式）。
rgb(37, 36, 228);
這是從百度logo圖片中拾取的藍色程式碼。
8
我們把滑鼠點到其他地方，結束顏色選取的過程。
然後再把滑鼠移動顏色小方塊上。
這時會出現提示文字：
Click to open a colorpicker.
Shift-click to change color format.
意思就是說，單擊這個小顏色方塊，可以開啟顏色拾取器。
單擊時按下Shift，可以改變顏色格式
9
按下Shift單擊後，變成hsl格式的顏色程式碼：
hsl(240, 78%, 52%)
10
再來一次，變成十六進位制HEX格式的顏色程式碼
#2525E4
相關文章