Skip to content

EugeneDae/vscode-mac-color-picker

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
res
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

macOS Color Picker (VS Code extension)

Native macOS color picker in Visual Studio Code for web-development and other uses. Supports various CSS3 color notations. Works like the “Insert Color” action in TextMate.

Sorry, the extension does not work on Windows or Linux.

Why native color picker?

  1. Works very fast because it’s built-in into macOS.
  2. The eyedropper can also be used outside VS Code.
  3. Keeps favorite colors, which can be reused in other applications.
  4. Lots of modes (HSB, web-safe colors etc) and other useful stuff.

Installation

Click Install on the Marketplace, or run from the command palette (Cmd-Shift-P):

ext install dae.mac-color-picker

Usage

Run Open macOS Color Picker from the command palette (Cmd-Shift-P) to launch the color picker. It is highly recommended to configure a keybinding, such as Cmd-Shift-C (see how to do this).

If a color is selected, the extension will pass it into the color picker. The following notations are supported:

  • CSS keywords, for example: transparent, black, red (but not currentcolor).
  • 6 digit hex codes, for example: #FFF, #563D7C.
  • 8 digit hex codes, for example: #563D7CAB (see note below).
  • rgb() / rgba() notations, for example:
    • rgb(255, 255, 255)
    • rgba(255, 255, 255, 0.5) (see note below)
  • hsl() / hsla() notations, for example:
    • hsl(360, 100%, 50%)
    • hsla(360, 100%, 50%, 0.5) (see note below)
  • hwb() notation, for example: hwb(60, 3%, 60%)

Note: the color picker currently cannot change the alpha channel value (opacity). This may change in the future releases.

Settings

{
    "macColorPicker.defaultColorNotation": "hex", // Which notation to use when inserting (rather than updating) a color
    "macColorPicker.lowercaseHexColors": true, // Output hex colors in lowercase, e.g.: `#fff` instead of `#FFF`
    "macColorPicker.shortHexColors": true // Shorten hex colors when possible, e.g.: `#777` instead of `#777777`
}

Feedback

If you have a problem or a suggestion, please open an issue on GitHub.

Special thanks

License

MIT License © Eugene ‘Dae’ Zuyev (dae@dae.me).

About

(VS Code extension) Native macOS color picker for web-development and other uses.

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

Packages

No packages published