{"id":15513661,"url":"https://github.com/KamiKillertO/vscode-colorize","last_synced_at":"2025-10-12T10:30:41.053Z","repository":{"id":15098116,"uuid":"77557986","full_name":"KamiKillertO/vscode-colorize","owner":"KamiKillertO","description":"A vscode extension to help visualize css colors in files","archived":false,"fork":false,"pushed_at":"2025-01-27T04:20:40.000Z","size":13370,"stargazers_count":278,"open_issues_count":42,"forks_count":37,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-27T04:43:32.943Z","etag":null,"topics":["color-highlighter","typescript","vscode-extension"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KamiKillertO.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-28T20:00:47.000Z","updated_at":"2025-01-24T07:56:04.000Z","dependencies_parsed_at":"2024-11-07T10:17:41.317Z","dependency_job_id":"3187e322-06d5-4392-bc30-948e4e78ba8b","html_url":"https://github.com/KamiKillertO/vscode-colorize","commit_stats":{"total_commits":623,"total_committers":9,"mean_commits":69.22222222222223,"dds":0.1268057784911717,"last_synced_commit":"be40781837f14a5a0f6ea7f643646b3abcd1dd9f"},"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KamiKillertO%2Fvscode-colorize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KamiKillertO%2Fvscode-colorize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KamiKillertO%2Fvscode-colorize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KamiKillertO%2Fvscode-colorize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KamiKillertO","download_url":"https://codeload.github.com/KamiKillertO/vscode-colorize/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":236197037,"owners_count":19110819,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["color-highlighter","typescript","vscode-extension"],"created_at":"2024-10-02T09:54:31.190Z","updated_at":"2025-10-12T10:30:35.781Z","avatar_url":"https://github.com/KamiKillertO.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# **Colorize** [Looking for maintainers]\n\n[![codebeat badge](https://codebeat.co/badges/aec222e1-64ae-4360-a849-d077040694ca)](https://codebeat.co/projects/github-com-kamikillerto-vscode-colorize)\n[![Build Status](https://travis-ci.org/KamiKillertO/vscode-colorize.svg?branch=master)](https://travis-ci.org/KamiKillertO/vscode-colorize)\n[![Build status](https://ci.appveyor.com/api/projects/status/db69dsx996bdnj4p/branch/develop?svg=true)](https://ci.appveyor.com/project/KamiKillertO/vscode-colorize/branch/develop)\n[![Licence](https://img.shields.io/github/license/KamiKillertO/vscode_colorize.svg)](https://github.com/KamiKillertO/vscode_colorize)\n[![License](https://img.shields.io/badge/license-MIT-green.svg?style=flat)](https://raw.githubusercontent.com/kamikillerto/vscode-colorize/master/LICENSE)\n\n\u003c!-- [![Version](https://vsmarketplacebadges.dev/version-short/kamikillerto.vscode-colorize.svg)]\n[![Installs](https://vsmarketplacebadge.apphb.com/installs/KamiKillertO.vscode-colorize.svg)](https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize)\n[![Ratings](https://vsmarketplacebadge.apphb.com/rating/kamikillerto.vscode-colorize.svg)](https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize) --\u003e\n\nInstantly visualize css colors in your css/sass/less/postcss/stylus/XML... files.\n\nThis extension your styles files looking for colors and generate a colored background (using the color) for each of them.\n\n![](https://raw.githubusercontent.com/kamikillerto/vscode-colorize/master/assets/demo.gif)\n\n![](https://raw.githubusercontent.com/kamikillerto/vscode-colorize/master/assets/demo_variables.gif)\n\n💡 [How to enable variables support](#colorizecolorized_variables)\n\n## Features\n\n- Generate colored background for\n  - css variables\n  - preprocessor variables\n  - hsl/hsla colors\n  - cross browsers colors (_red, blue, green..._)\n  - css hexa color\n  - rgb/rgba color\n  - argb color\n- Color background live update\n\n## Options (settings)\n\nThe following Visual Studio Code settings are available for the Colorize extension.\nThese can be set in user preferences `(cmd+,)` or workspace settings `(.vscode/settings.json)`.\n\n### colorize.languages _ARRAY_\n\nConfigure a list of languages that should be colorized. You can learn about languages at \u003chttps://code.visualstudio.com/docs/languages/overview\u003e.\n\nFor example, if you want to colorize colors in `javascript` files, you just need to include it:\n\n```json\n  \"colorize.languages\": [\n    \"javascript\",\n    // ...\n  ]\n```\n\n### colorize.enable_search_variables _BOOLEAN default: true_\n\nBy default colorize read and parse all files, in your workspace, that are targeted by the settings [colorize.languages](#colorizelanguages), [colorize.include](#colorizeinclude), and [colorize.exlude](#colorizeexclude) to extract extract all variables. Thanks to this behavior all variables will have colored background even if you never open the file containing the declaration. _⚠️ This setting can slown down vscode at opening_\n\n### colorize.include\n\nConfigure glob patterns for including files and folders. By default Colorize is enable for files matching one the languages defined in the `colorize.languages` config, with this config you can enable colorize for other files or folders. Read more about glob patterns [here](https://code.visualstudio.com/docs/editor/codebasics#_advanced-search-options).\n\n### colorize.exclude\n\nConfigure glob patterns for excluding files and folders. Colorize will not colorized colors in these files and folders and it'll also not search for variables inside. Read more about glob patterns [here](https://code.visualstudio.com/docs/editor/codebasics#_advanced-search-options).\n\n### colorize.hide_current_line_decorations _BOOLEAN default: true_\n\nBy default, decorations for the current line are hidden. Set this setting to `false` if you want to deactivate this behavior.\n\n### colorize.decoration_type _STRING default: \"background\"_\n\nDefines the type of decoration to use. The possible values are:\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003ebackground\u003c/th\u003e\n    \u003cth\u003eunderline\u003c/th\u003e\n    \u003cth\u003eoutline\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cimg src='https://raw.githubusercontent.com/kamikillerto/vscode-colorize/master/assets/decoration_background.png'/\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cimg src='https://raw.githubusercontent.com/kamikillerto/vscode-colorize/master/assets/decoration_underline.png'/\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cimg src='https://raw.githubusercontent.com/kamikillerto/vscode-colorize/master/assets/decoration_outline.png'/\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003edot\u003c/th\u003e\n    \u003cth\u003esquare-dot\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cimg src='https://raw.githubusercontent.com/kamikillerto/vscode-colorize/master/assets/decoration_dot.png'/\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cimg src='https://raw.githubusercontent.com/kamikillerto/vscode-colorize/master/assets/decoration_square-dot.png'/\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n### colorize.colorized_colors _ARRAY_\n\nThis options allow you to enable/disable colorization for a type of colors.\n\nAvailable colors are :\n\n- `HEXA`: for hexadecimal colors: `#RGB`, `#RGBA`, `#RRGGBB`, `#RRGGBBAA`, `0xRGB`, `0xRGBA`, `0xRRGGBB` or `0xRRGGBBAA`\n- `ARGB`: for argb colors: `#RGB`, `#ARGB`, `#RRGGBB` or `#AARRGGBB`\n- `RGB`: for rgb colors: `rgb(r,g,b)` or `rgba(r,g,b,a)`\n- `HSL`: for [HSL colors](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl)\n- `BROWSERS_COLORS`: for native browser's colors like `white`, `red`, `blue`...\n- `OKLAB`: for [oklab colors](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklab)\n- `OKLCH`: for [oklch colors](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch)\n\nFor example, if you want to only colorize hexa colors (`#fff, #ffffff, 0xFFF`) in your files you can update the option like this :\n\n```json\n  \"colorize.colorized_colors\": [\n    \"HEXA\"\n  ]\n```\n\n### colorize.colorized_variables\n\nThis options allow you to enable/disable colorization for a type of variables.\n\nFor example if you use less in your project you setup the option like this\n\n```json\n  \"colorize.colorized_variables\": [\n    \"LESS\"\n  ]\n```\n\n_This way all @variables will be colorized_\n\n## Roadmap\n\n- [x] Generate background for hexa colors\n- [x] Update background on color updates\n- [x] Generate background for rgb colors\n- [x] Generate background for rgba colors\n- [x] Generate background for hsl colors\n- [x] Generate background for hsla colors\n- [x] Generate background for Predefined/Cross-browser colors\n- [x] Generate background for preprocessor variables\n- [x] Generate background for css variables\n- [x] Config livereload\n\n## Release\n\nSee [CHANGELOG](CHANGELOG.md) for more information.\n\n## Contributing\n\nBugs, feature requests and more are welcome here [GitHub Issues](https://github.com/KamiKillertO/vscode-colorize/issues).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKamiKillertO%2Fvscode-colorize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FKamiKillertO%2Fvscode-colorize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKamiKillertO%2Fvscode-colorize/lists"}