# 🎨 Color Highlight [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/Kronuz/25) [![Package Control](https://img.shields.io/packagecontrol/dt/Color%20Highlight.svg)](https://packagecontrol.io/packages/Color%20Highlight) Show color codes (like "#ffffff", 0xffffff "rgb(255, 255, 255)", "white", hsl(0, 0%, 100%), etc.) with their real color as the background and/or gutter icons. ![Description](screenshots/screenshot.gif?raw=true) ## Installation - **_Recommended_** - Using [Sublime Package Control](https://packagecontrol.io "Sublime Package Control") - Ctrl+Shift+P then select `Package Control: Install Package` - install `Color Highlight` - Alternatively, download the package from [GitHub](https://github.com/Kronuz/ColorHighlight "Color Highlight") into your `Packages` folder and make sure to rename the directory to "Color Highlight". ## Usage Supported color representations are: - Named colors in the form of CSS3 color names e.g. `green`, `black` and many others are also supported. - Hexademical in the form of `#RGB`, `#RGBA`, `#RRGGBB` or `#RRGGBBAA` (you can use both upper and lower case letters) - Hexadecimal numbers with prefix 0x in the form of `0xRRGGBB` or `0xRRGGBBAA` - RBG or RGBA value in the form of `rgb(red, green, blue)` or `rgba(red, green, blue, alpha)` with decimal channel values - HSL or HSLA value in the form of `hsl(hue, sat%, lum%)` or `hsla(hue, sat%, lum%, alpha)` - HSV or HSVA value in the form of `hsv(hue, sat%, val%)` or `hsva(hue, sat%, val%, alpha)` - HWB value in the form of `hwb(hue, white%, black%)` or `hwb(hue, white%, black%, alpha)` - CIELAB (Lab) value in the form of `lab(lum, a, b)` or `lab(lum, a, b, alpha)` - Cylindrical CIELAB (LCH) in the form of `lch(hue, chroma, lum)` or `lch(hue, chroma, lum, alpha)` - ANSI escape sequences: 3/4 bit (8-color), 8-bit (256-color), 24-bit (true color) in the form of `\033[3Xm`, `\033[4Xm`, `\033[38;5;IIIm` or `\033[38;2;RRR,GGG,BBBm`. Escape part accepting "`^[`[", "\033", "\x1b[", "\u001b[" and "\e[" Those will be shown with colored background and gutter icons when they're found in your documents. ## Configuration - You can disable live highlight directly from the command palette: `Color Highlight: Disable Color Highlight` - Open settings using the command palette: `Preferences: Color Highlight Settings - User` - Gutter icons can be switched among three flavors (or disabled) by using the `gutter_icon` setting: + "circle" - Gutter icon with the color in a circle + "square" - Gutter icon with the color in a square + "fill" - Fill whole gutter with color ``` "user": { "gutter_icon": "fill" } ``` ![Gutter Icon](screenshots/gutter_icon.png?raw=true) - Highlighting the value region in the color can be enabled or disabled by using the `highlight_values` setting. - Enabling/disabling coloring of different types of values can be configured. ## License Copyright (C) 2018 German Mendez Bravo (Kronuz). All rights reserved. MIT license This plugin was initially a fork of https://github.com/Monnoroch/ColorHighlighter