What CSS Colors

Shows the colors of a site by parsing its CSS resources (dedicated sidebar pane in DevTools).

什麼是What CSS Colors?

What CSS Colors是由Rodolfo Graça開發的Chrome擴展程式,該擴展的主要功能是“Shows the colors of a site by parsing its CSS resources (dedicated sidebar pane in DevTools).”。

擴展截圖

screenshot

下載What CSS Colors擴展crx文件

下載What CSS Colors擴展crx格式的文件,手動將Chrome擴充功能安裝到瀏覽器中,也可以將crx文件分享給朋友,輕鬆安裝Chrome擴充功能。

擴展使用說明

                        As someone with the responsibility to keep tidy the UX of your site(s), have you ever wondered what exact colors are declared its CSS resources? After an initial set of colors being defined in the beginning, changes in specifications, team members rotation and customer feedback make way for new colors to appear in CSS files.

Thus, over time it becomes more difficult to know exactly which colors are declared in CSS code or why there are so many similar colors. Keeping your style guide updated is harder and it begins to loose value, because it doesn't reflect the effective use of colors.  

What CSS Colors helps prevent that. By parsing the CSS code of your site, it builds an index of colors based on RGB values found. By clicking on a colour thumbnail, it's possible to browse the CSS code to see where it's used.

This extension appears in DevTools, as new sidebar pane called "CSS Color" under the "Elements" tab.

Note 1: color indexation is performed on different values of Red, Green and Blue components; the Alpha component doesn't count as a distinct color.

Note 2: only colors in CSS files referred by the page are indexed.                    

擴展基本資訊

名稱 What CSS Colors What CSS Colors
ID hncjfoemlkdanjhjhjpigplmkakgggae
官方網址 https://chromewebstore.google.com/detail/what-css-colors/hncjfoemlkdanjhjhjpigplmkakgggae
簡介 Shows the colors of a site by parsing its CSS resources (dedicated sidebar pane in DevTools).
檔案大小 39.3 KB
安裝次數 114
目前版本 1.1
更新時間 2021-03-17
上架時間 2020-02-01
開發者 Rodolfo Graça
電子郵箱 [email protected]
付費類型 free
支援的語言 en-US
manifest.json
{
    "update_url": "https:\/\/clients2.google.com\/service\/update2\/crx",
    "name": "What CSS Colors",
    "short_name": "What CSS Colors",
    "description": "Shows the colors of a site by parsing its CSS resources (dedicated sidebar pane in DevTools).",
    "icons": {
        "16": "icons\/whatCSSColors16.png",
        "48": "icons\/whatCSSColors48.png",
        "128": "icons\/whatCSSColors128.png"
    },
    "version": "1.1",
    "minimum_chrome_version": "48.0",
    "devtools_page": "devtools-entry-page.html",
    "manifest_version": 2,
    "background": {
        "scripts": [
            "background.js"
        ]
    },
    "permissions": [
        "http:\/\/*\/*",
        "https:\/\/*\/*"
    ]
}