ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

Color Highlighter

by Monnoroch ST2/ST3 Top 25

ColorHighlighter - is a plugin for the Sublime text 2 and 3, which underlays selected hexadecimal colorcodes (like "#FFFFFF", "rgb(255,255,255)", "white", etc.) with their real color. Also, plugin adds color picker to easily modify colors.

Details

Installs

  • Total 461K
  • Win 267K
  • OS X 123K
  • Linux 71K
Feb 24 Feb 23 Feb 22 Feb 21 Feb 20 Feb 19 Feb 18 Feb 17 Feb 16 Feb 15 Feb 14 Feb 13 Feb 12 Feb 11 Feb 10 Feb 9 Feb 8 Feb 7 Feb 6 Feb 5 Feb 4 Feb 3 Feb 2 Feb 1 Jan 31 Jan 30 Jan 29 Jan 28 Jan 27 Jan 26 Jan 25 Jan 24 Jan 23 Jan 22 Jan 21 Jan 20 Jan 19 Jan 18 Jan 17 Jan 16 Jan 15 Jan 14 Jan 13 Jan 12 Jan 11 Jan 10
Windows 95 610 581 663 597 416 459 528 659 635 565 615 409 440 552 642 620 720 627 368 405 555 555 514 523 540 351 362 416 448 543 542 548 393 400 498 500 519 536 612 368 398 489 559 525 482
OS X 18 196 222 186 172 113 127 175 206 193 205 194 122 115 209 220 229 209 219 136 103 204 198 234 175 208 108 110 160 166 210 163 199 126 115 172 217 220 207 190 127 131 176 197 216 212
Linux 12 109 147 160 136 102 95 139 145 151 119 130 107 98 102 147 128 154 123 101 99 108 138 157 113 109 98 92 113 110 122 103 123 104 88 117 118 115 126 125 109 99 118 119 129 114

Readme

Source
raw.​githubusercontent.​com

ColorHighlighter

ColorHighlighter is a plugin for the Sublime Text 2 and 3, which unobtrusively previews color values by underlaying the selected hex codes in different styles, coloring text or gutter icons. Also, plugin adds color picker, color format converter and less/sass/styl variables navigation to easily modify colors.

Description

Description

Description

Description

Installation :

  • Recommended - Using Sublime Package Control
    • Ctrl+Shift+P then select Package Control: Install Package
    • install Color Highlighter
  • Alternatively, download the package from GitHub into your Packages folder and then rename plugins directory from “ColorHighlighter” to “Color Highlighter”
  • For gutter icons install ImageMagick
  • For color picker on linux install Qt5 framework.

Usage :

Just click or move the cursor (or multiple cursors) on the color code e.g. “#FFFFFF” or “rgba(255, 0, 0, 0.7)” or variable with color code value and it'll be highlighted with its real color. These color formats are currently supported: - All CSS color formats. - Hexadecimal RGBA (“0xFFFFFFFF”) or (“0xFFFF”) and RGB (“0xFFFFFF”) or (“0xFFF”). - Named colors like “green”, “black” and many others. - Less/sass/scss/stylus variables (supports @importing from another files recursively). - [VAL, VAL, VAL] and [VAL, VAL, VAL, VAL] when editing e files. Where VAL can be one of the following: - An integer: from 0 to 255. - A float value from 0.0 to 1.0, you can also skip leading zero (like that: .25) - A percentage from 0% to 100%.

Variables file : You can define a list or string field color_variables_files in your .sublime-project file to automatically include all less/sass/scss/stylus color variables from these files for every file you edit (for now, only absolute path is supported). There is a deprecated but left for compatibility setting color_variables_file, which can only contain a string for a single file, not a list.

Settings :

You can choose the highliting style from: - “Filled”, “outlined”, “none”, “colored text” in ST2. - “Filled”, “outlined”, “none”, “underlined” (solid, strippled, squiggly), “colored text” in ST3.

You can also turn on highlighting all colors at once. This mode has own highlighting style, so you can highlight all colors with underline and selected colors with filled rect.

You can also enable icons, which will be shown in the gutter of a file (might not work in ST2).

You can always turn off default keybindings via main menu or settings.

Color picker usage:

Just put the cursor (or multiple cursors) on the color code and select “Choose color” in context menu (or press Ctrl+Shift+C). Select the color in a popup color picker and all color codes under your cursors will change. The change will preserve exact code format, so if you select codes “#FFF” and “rgb(255,255,255)” and “white” and choose color “#FF0000”, you get codes: “#F00” and “rgb(255,0,0)” and “red”. Also, works with variables.

Color converter usage:

Just put the cursor (or multiple cursors) on the color code and select “Convert color” in context menu (or press Ctrl+Shift+A). Input a color format to use and press enter. The full list of all color formats is in the plugins settings file. Format can be any format supported by this plugin, for example if you convert “rgb(255,255,255)” into format “hsv”, you'll get “hsv(0, 0%, 100%)”. Also works with named colors and variables.

Also, there is a Prev/Next color commands, triggered by Ctrl+Shift+, and Ctrl+Shift+. respectively to choose previous or next color format.

Less/sass/scss/stylus variables navigation:

Just put cursor on a variable, right click on it and press “Go to variable definition” and the plugin will open it. There is also a shortcut Ctrl+Alt+D.