🌌 Color Picker Universal 🌌

🌐 Links

🔧 Core Dependency

🛜 Website

Visual Studio Marketplace

Open VSX Registry

GitHub Repository

✅ Features

Pick and translate between multiple color formats in any file.

Supported formats: RGB/A, A98, HEX/A, HSL/A, HWB/A, CMYK/A, HEX 0x, LAB, LCH, OKLAB, OKLCH, and named colors.

Some variations of these might be possible with the correct settings. For example, XAML a/Hex.

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

⚙ Settings

To view settings, press Ctrl + , (or ⌘ + , on macOS).

For advanced examples, see here.

✍ Commands

To view commands, press F1 and type Color Picker Universal.

🗨 Editor's context menu options

To view the editor's context menu options, right-click inside a file content editor.

🖌️ Custom Outputs

This setting allows users to create custom output presentations for given formats.

This takes an object with the following schema:

{
  "FORMAT_1": [
    {
      // "files" field works like the "languages" setting
      "files"?: ["*", "!css"],
      "values"?: {
        // the properties are the letters of the color format (e.g., "r", "g" and "b")
        // except in hex and a98 where the properties are still "r", "g" and "b"
        // alpha property is always "alpha" in every color format
        "PROPERTY_1": {
          "from"?: number, // default 0
          "to"?: number, // default 1 OR 100 if suffix === '%'
          "suffix"?: string, // default ""
          "maxDigits"?: number // default 2. In hex it's the amount of chars (1 OR 2)
        }
      },
      "template"?: string, // "rgb({{r}}, {{g}}, {{b}})" OR "#{{r}}{{g}}{{b}}"
      "templateAlpha"?: string, // "rgb({{a}}% / {{r}}, {{g}}, {{b}})" OR "#{{a}}{{r}}{{g}}{{b}}"
    }
  ]
}

Keep in mind that this could produce outputs that are not compatible as inputs for the extension itself. In these cases, a possible solution is adding a Custom Regex for the given format in the given file languages.

🔧 Custom Regexes

This setting allows users to create custom input regexes for given formats.

This takes an object with the following schema:

{
  "FORMAT_1": [
    "REGEX_1",
    // Language conditional regex:
    {
      "regex": "REGEX_2",
      // "languages" field works like the "languages" setting
      "languages": ["LANGUAGE_1", "LANGUAGE_2"],
      // "remap" is used for when the order of the properties is shuffled in the regex (e.g., "alpha" is the first captured value)
      "remap": [3,0,1,2]
    }
  ],
  "FORMAT_2": ["REGEX_3"]
}

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 (you 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):

Here is an 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 VS Code 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.