{ "slug": "color-code-extractor", "name": "gizza-ai/color-code-extractor", "version": "0.1.0", "title": "Color Code Extractor — build a palette from CSS or text — gizza.ai", "description": "Extract hex, rgb(a), hsl(a), hwb and named CSS color values from pasted CSS or text, deduplicate them, and export the palette in useful formats.", "tags": [ "color extractor", "css colors", "palette extractor", "hex extractor", "rgb hsl", "design tokens" ], "category": "image", "urls": { "page": "https://gizza.ai/tools/color-code-extractor/", "markdown": "https://gizza.ai/tools/color-code-extractor/index.md", "descriptor": "https://gizza.ai/tools/color-code-extractor/tool.json", "deep_link_example": "https://gizza.ai/tools/color-code-extractor/?text=.btn%20%7B%20color%3A%20%23f00%3B%20background%3A%20rgb%28255%2C%200%2C%200%29%3B%20border-color%3A%20hsl%28210%2050%25%2040%25%29%3B%20%7D&output_format=list&color_format=hex&sort=first_seen&include_counts=true&include_named=true&exclude_grey=true&exclude_monochrome=true&uppercase=true&limit=0&var_prefix=color" }, "cli": "gizza tool color-code-extractor \".btn { color: #f00; background: rgb(255, 0, 0); border-color: hsl(210 50% 40%); }\"", "tool": { "description": "Scan any pasted text — a stylesheet, SCSS/LESS partial, HTML page, JS theme file, JSON token dump or prose — for every colour literal, and return ONE deduplicated palette. Recognises hex (#f00, #f00f, #ff0000, #ff0000ff), rgb()/rgba(), hsl()/hsla(), hwb(), the 148 CSS colour keywords and 'transparent', in both legacy comma syntax (rgb(255, 0, 0)) and modern space-and-slash syntax (rgb(255 0 0 / 50%), hsl(120deg 100% 50% / .5)); angles in deg, grad, rad or turn and the CSS-4 'none' keyword are handled. Deduplication is by COLOUR, not spelling: #f00, #FF0000, red and rgb(255,0,0) become a single entry with a usage count of four, while alpha stays part of the identity so #ff0000 and rgba(255,0,0,.5) remain separate. color_format rewrites each entry to hex (default), the original spelling, rgb, hsl, hwb or the exact CSS keyword. output_format renders the palette as a plain list (default), csv with hex/rgb/hsl/alpha/count columns, full json, a :root css_vars block, scss or less variables, a tailwind theme.extend.colors config, or an svg swatch sheet. sort orders by first_seen (default), frequency, hue, lightness or alphabetical, and limit keeps the top N after sorting — sort='frequency' with limit=8 is how you pull the real brand palette out of a big stylesheet. exclude_grey drops equal-channel greys but keeps pure black and white; exclude_monochrome drops all neutrals. include_named can be switched off when scanning prose, where words like orange, plum and snow are not colours. Class names, ids and preprocessor variables (.red, #brand {, $blue, @blue, --brand-red) are skipped, and colours built with calc() or var() cannot be resolved statically so they are skipped too. Max 5,000,000 bytes. Runs entirely in the sandbox; nothing is uploaded.", "parameters": { "additionalProperties": false, "properties": { "color_format": { "default": "hex", "description": "The notation each palette entry is REWRITTEN to. 'hex' (the default) normalises everything to #rrggbb, or #rrggbbaa when the colour is translucent — this is what makes #f00, red and rgb(255,0,0) collapse visibly into one entry. 'original' keeps the first spelling exactly as it appeared in the source, useful for an audit that must quote the file. 'rgb', 'hsl' and 'hwb' convert every entry to that function syntax. 'name' uses the CSS keyword when the colour matches one exactly and falls back to hex otherwise. Deduplication happens on the colour itself, so this setting never changes which entries you get.", "enum": [ "hex", "original", "rgb", "hsl", "hwb", "name" ], "type": "string" }, "exclude_grey": { "default": false, "description": "Drop greys — any colour whose red, green and blue channels are equal — while KEEPING pure black and pure white. Off by default. Turn it on to strip the border, shadow and divider greys out of a stylesheet audit while the text and background stay visible.", "type": "boolean" }, "exclude_monochrome": { "default": false, "description": "Drop every neutral, including pure black and pure white, leaving only colours that carry a hue. Off by default. This is the stricter version of exclude_grey and takes precedence when both are on — use it to isolate the actual brand colours.", "type": "boolean" }, "include_counts": { "default": true, "description": "Show how many times each colour appears. On by default: 'list' appends '×N', 'csv' adds a count column, 'css_vars'/'scss'/'less' add a '2 uses' comment and 'svg' labels each swatch. Turn it off for output you are pasting straight into a stylesheet. 'json' always reports counts.", "type": "boolean" }, "include_named": { "default": true, "description": "Treat bare CSS colour keywords such as red, gold, tan or mediumseagreen as colours. On by default, which is right for stylesheets. Turn it OFF when scanning prose or content-heavy HTML, where ordinary English words like 'orange', 'plum' and 'snow' would otherwise be collected as colours. Class names, ids and preprocessor variables (.red, #brand, $blue, @blue, --brand-red) are never matched either way.", "type": "boolean" }, "limit": { "default": 0, "description": "Keep at most this many palette entries, applied AFTER sorting — so limit=8 with sort='frequency' gives the eight most-used colours, which is the usual way to pull a brand palette out of a large stylesheet. 0 (the default) keeps every unique colour.", "maximum": 1000, "minimum": 0, "type": "integer" }, "output_format": { "default": "list", "description": "How to render the deduplicated palette. 'list' (the default) is one colour per line, ready to paste anywhere. 'csv' adds hex, rgb, hsl, alpha and count columns for a spreadsheet. 'json' is the full machine-readable record per colour, including hue/saturation/lightness, the exact keyword name when there is one, and every spelling that mapped to it. 'css_vars' emits a :root block of custom properties, 'scss' and 'less' emit variable declarations, and 'tailwind' emits a theme.extend.colors config. 'svg' draws a labelled swatch sheet you can save as an image.", "enum": [ "list", "csv", "json", "css_vars", "scss", "less", "tailwind", "svg" ], "type": "string" }, "sort": { "default": "first_seen", "description": "Palette order. 'first_seen' (the default) is source order, which keeps a stylesheet's own structure. 'frequency' puts the most-used colours first, which is how you find the real brand palette hiding among one-off values. 'hue' walks the colour wheel red → green → blue and is the order you want for a swatch sheet. 'lightness' runs darkest to lightest, good for building a tint ramp. 'alphabetical' sorts on the rendered value.", "enum": [ "first_seen", "frequency", "hue", "lightness", "alphabetical" ], "type": "string" }, "text": { "description": "The text to scan — a whole stylesheet, an SCSS/LESS partial, an HTML page, a JS theme file, a JSON design-token dump or plain prose. Every colour literal anywhere in it is collected, including inside comments and strings; everything else is ignored, so pasting a full file is normal. Recognised notations are hex (#f00, #f00f, #ff0000, #ff0000ff), rgb()/rgba(), hsl()/hsla(), hwb(), the 148 CSS colour keywords and 'transparent', in both legacy comma syntax and modern space-and-slash syntax. Max 5,000,000 bytes.", "type": "string" }, "uppercase": { "default": false, "description": "Write hex digits in upper case, so #aabbcc becomes #AABBCC. Off by default because lower case is the CSS convention. The leading # and every non-hex notation are unaffected.", "type": "boolean" }, "var_prefix": { "default": "color", "description": "Name stem for the generated variables in the css_vars, scss, less and tailwind formats: 'color' (the default) gives --color-1, $color-1, @color-1 and 'color-1'. Set it to 'brand' or 'palette' to match your naming. Letters, digits, hyphens and underscores only. Ignored by the list, csv, json and svg formats.", "type": "string" } }, "required": [ "text" ], "type": "object" } } }