在網頁上看到想要的顏色,如何知道這種顏色的顏色代碼和 RGB 顏色值?

具體用哪些方法?藉助哪些工具?


我的AHK腳本裡面加了這個小功能

#p::
MouseGetPos, mouseX, mouseY
PixelGetColor, color, %mouseX%, %mouseY%, RGB
StringRight color,color,6
clipboard = %color%
tooltip, Pixel color %color% sent to clipboard.
sleep 2000
tooltip,
return

Win+P取滑鼠下像素的顏色,取完色會自動拷貝入粘帖板。對於AHK用戶,這是最簡潔的解決方案。AHK很強大,可以極大的提高你的工作效率。關於AHK,請看善用佳軟的專題,http://xbeta.info/autohotkey-guide-2.htm。


Mac的話,自帶的DigitalColor Meter


ColorPix插件 非常方便


ChromeFirefox插件 ColorZilla


較為簡便的方法是按照瀏覽器插件,在想要或許的區域點擊,就會自動識別該區域的顏色 RGB 或 WEB代碼,一些還可以或許文本字體名稱(如 Chrome 的 WhatFont)。
或是可以截圖(最好保存為 .png 格式),任何使用一些小工具或 PhotoShop 獲取想要的詳細信息。


說一個簡便的方法
啟動QQ的情況下,按截圖快捷鍵(ctrl+alt+A),滑鼠移動到要取色的地方即可看到,如下圖:


QQ截圖或者Print Screen,貼到畫筆裡面,取色。


Firefox 的 Rainbow 擴展


網頁上的顏色,用chrome搞定啊,而且絕對無色差。。
右擊----》審查元素----》背景色就background-color,字的顏色就color,右邊屬性里挺明確的,如果是圖片,把圖片另存為XX,然後用其他工具搞定就可以了


Sip – 取色器 #Mac



這個工具,非常好,可以設置取色快捷鍵,取色不僅有RGB色,還有十六進位編碼,名字叫FSCapture


有很多吸色工具啊,我電腦上就安裝著三個,打開在那個顏色上一點就自動複製#fff了,然後粘貼到想要的地方就行


PS的話,單擊吸管工具,按住左鍵不放,然後滑鼠定位哪一點就會顯示哪一點的RGB.


http://www.qlike.com/app_en_MagicColor.html
推薦好友開發的綠色屏幕取色工具。

點擊左邊顏色塊滑鼠變成吸管後不鬆開滑鼠即可在屏幕上任意處取色。


我很奇怪為啥沒人說Firefox里已經自帶了取色工具.....難道是取的顏色不準?

如圖


選中想要查看顏色的區域,右鍵,審查元素(例如關注問題那個按鈕):

右邊黃色區域即為想查看按鈕的色值,單擊綠色框框處還可以切換色值的各種表達方式:

個人覺著挺好用的。審查元素是大殺器,還可以在當前頁面編輯頁面樣式和文字,以供查看。許多瀏覽器都有審查元素的功能,Chrome,firefox都可以。


用photoshop


任何瀏覽器:QQ截圖時的滑鼠直接指向色塊會顯示RGB色值,至於16進位的顏色代碼可以在PS等製圖軟體中轉化;
Chrome:Eye Dropper擴展;
Firefox:ColorZilla插件;
IE6-7:安裝IE Developer ToolBar,類似開發人員工具,裡面有取色器工具,在「工具」里「顯示取色器」;
IE8-10:開發人員工具(F12),同上。


推薦一個小軟體,可以在屏幕上取色:
SXColor,還可以把16進位的顏色代碼直接複製到剪切板里,很方便


推薦閱讀:

如何用手機測試自己寫的web頁面?
電腦上有哪些設計影響了幾代用戶的操作習慣?
你見過哪些令你瞠目結舌的前端設計?
為什麼前端工程師多不願意用 Bootstrap 框架?

TAG:前端開發 | 顏色 | 用戶體驗設計 |