Pick and translate between multiple color formats, in any file.
Formats supported: rgb/a, 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.
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" | ["*", "!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" | ["*", "!hex_0x", "!cmyk", "!hwb"] |
To see commands press F1 and type Color Picker Universal
| Name | Command |
|---|---|
| Translate colors to another format | color-picker-universal.translateColors |
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 |
#68 When working with css, less, sass and scss files, the color picker is duplicated due to the default Vscode color picker. Currently the only workaround is excluding these file extensions in the color-picker-universal.languages setting (see example value above)
