🌌 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.

Formats supported: 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 see settings press CTRL + , OR ⌘ + ,

To see some advanced examples see here

✍ Commands

To see commands press F1 and type Color Picker Universal

🗨 Editor's context menu options

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

🖌️ Custom Outputs

This setting allows the user to create custom output presentations for the 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 give 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 the user to create custom input regexes for the 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 (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 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