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 517K
  • Win 304K
  • OS X 134K
  • Linux 79K
May 26 May 25 May 24 May 23 May 22 May 21 May 20 May 19 May 18 May 17 May 16 May 15 May 14 May 13 May 12 May 11 May 10 May 9 May 8 May 7 May 6 May 5 May 4 May 3 May 2 May 1 Apr 30 Apr 29 Apr 28 Apr 27 Apr 26 Apr 25 Apr 24 Apr 23 Apr 22 Apr 21 Apr 20 Apr 19 Apr 18 Apr 17 Apr 16 Apr 15 Apr 14 Apr 13 Apr 12 Apr 11
Windows 488 594 510 522 539 360 408 546 554 582 521 531 335 317 510 556 541 597 533 368 384 557 585 625 541 408 308 346 534 535 549 536 584 366 415 501 561 556 596 495 383 415 435 520 589 586
OS X 121 166 150 184 153 86 111 150 161 147 191 194 115 81 143 200 221 189 175 91 121 170 181 202 205 133 96 114 167 175 187 213 182 106 131 146 169 160 196 205 89 105 143 188 211 196
Linux 99 117 125 126 145 78 101 121 130 123 141 129 80 70 97 121 103 118 117 64 105 113 116 133 147 96 97 104 128 128 133 129 123 108 105 128 131 126 149 125 98 102 130 130 138 136

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.