🌌 Color Picker Universal 🌌

🌐 Links

Website

Visual Studio Marketplace

Open VSX Registry

Github Repository

✅ Features

Pick and translate between multiple color formats, in any file.

Formats supported: rgb/a, a98, hex/a, hsl/a, hwb/a, cmyk/a, hex 0x, lab, lch, oklab, oklch and named colors.

This extension can be used through its color pickers, commands, or context menu options.

⚙ Settings

To see settings press CTRL + , OR ⌘ + ,

Id	Description	Default	Available values	Example
color-picker-universal.disable	Disables the extension	false	true false	true
color-picker-universal.ignoreVariableName	If enabled, ignores colors in variables names	true	true false	false
color-picker-universal.preferLegacy	If enabled, colors are displayed in legacy mode when possible	false	true false	true
color-picker-universal.languages	Enabled language identifiers. Use "!" to exclude languages	["*"]	Default identifiers	["*", "!css", "!less", "!sass", "!scss"]
color-picker-universal.formatsFrom	Enabled formats to translate from. Use "!" to exclude formats	["*"]	"*" "device-cmyk" "hex" "hsl" "hwb" "named" "rgb" "hex0x" "lab" "lch" "oklab" "oklch" "a98"	["*", "!hex_0x", "!named"]
color-picker-universal.formatsTo	Enabled formats to translate into. Use "!" to exclude formats	["*"]	"*" "cmyk" "hex" "hsl" "hwb" "named" "rgb" "hex0x" "lab" "lch" "oklab" "oklch" "a98"	["*", "!hex_0x", "!cmyk", "!hwb"]
color-picker-universal.maxDigits	Max number of decimal digits	2		5
color-picker-universal.customRegexes	Set custom regexes for given formats	{}	See Custom Regexes	{ "a98": ["my-a98\((\d+(?:\.\d+)?) \$ (\d+(?:\.\d+)?) \$ (\d+(?:\.\d+)?)(?: \$ (\d+(?:\.\d+)?))?\)",]}
color-picker-universal.avoidDuplicate	If enabled, duplicate color pickers will be avoided. Note: On these built-in color pickers, the extension's formats and configurations won't apply	false	true false	true

✍ Commands

To see commands press F1 and type Color Picker Universal

Name	Command
Translate colors to another format	color-picker-universal.translateColors

🗨 Editor's context menu options

To see the editor's context menu options press right click inside a file content's editor

Name	Command
Translate colors to another format	color-picker-universal.translateColors

🔧 Custom Regexes

This setting allows the user to create custom presentations for the given formats.

This takes an object with the following schema:

{
    <format>: [
        <regex>,
        <regex2>
    ],
    <format2>: [
        <regex3>
    ]
}

Values

<format>

Is one of "formatsTo" ("cmyk", "hex", "hsl", "hwb", "named", "rgb", "hex0x", "lab", "lch", "oklab", "oklch", "a98")

<regex>

Is an escaped regex expression that matches the values of the color, and an optional alpha value (3 to 5 values, depending on the format). The values MUST be in the same format as in the standard presentation (can't pass a percentage value into a property that would typically only accept decimals, otherwise there could be unexpected outcomes).

• Recommendation: test the standard presentations to check the allowed color properties of presentations

Here is a table with the standard presentations of each color format property (this follows closely the W3C standards)

Color Format/s	Property/ies	Presentations	Examples
ALL FORMATS	alpha (default = 1)	0-1, Percentage	'0.5', '50%'
RGB	r, g, b	0-255, Percentage	'123', '50%'
A98	r, g, b	0-1	'0.5'
HSL, HWB, LCH, OKLCH	h	0-360, Percentage, Grad, Rad, Turn	'180', '50%', '200grad', '3.14rad', '0.5turn'
HSL	s, l	0-1, Percentage	'0.5', '50%'
HWB	w, b	0-1, Percentage	'0.5', '50%'
LAB, LCH	l	0-100, Percentage	'50', '50%'
LAB	a, b	-125 - 125, Percentage -100% - 100%	'-62.5', '-50%'
LCH	c	0-150, Percentage	'75', '50%'
OKLAB, OKLCH	l	0-1, Percentage	'0.5', '50%'
OKLAB	a, b	-0.4 - 0.4, Percentage -100% - 100%	'-0.2', '-50%'
OKLCH	c	0-0.4, Percentage	'0.2', '50%'
CMYK	c, m, y, k	0-1, Percentage	'0.5', '50%'

Here is a rgb regex example where we match r, g, and b values, and an optional alpha. Note that it's missing percentage support.

"my-rgb\\((\\d+(?:\\.\\d+)?) \\$ (\\d+(?:\\.\\d+)?) \\$ (\\d+(?:\\.\\d+)?)(?: \\$ (\\d+(?:\\.\\d+)?))?\\)"

Regex Tips:

• Double quotes (") and backslashes (\) are escaped with a backslash (\).
• The regex capture groups must only capture the required values, and the optional one (alpha) if desired
• https://regexper.com/ This website is a great way to visualize and tweak regexes. Here is the regex above visualized there. Note that escape backslashes (\) MUST be removed when entering the regex there

Duplication Issue

#68 When working with css, less, sass, and scss files, the color picker is duplicated due to the default built-in Vscode color picker. To avoid this, you can set the color-picker-universal.avoidDuplicate setting to true (see Settings). Note that by doing this, on these default built-in color pickers, the extension's formats and configurations won't apply