[quote=“farfromrefuge”]Ok thanks it works great!
You mention commands in the command palette. Does it mean i can for example “shift+click” to the popup?
Thanks[/quote]

Theoretically you can bind the commands to whatever you want, the available commands are here: github.com/facelessuser/ColorHe … e-commands.

[quote=“facelessuser”]

[quote=“farfromrefuge”]Ok thanks it works great!
You mention commands in the command palette. Does it mean i can for example “shift+click” to the popup?
Thanks[/quote]

Theoretically you can bind the commands to whatever you want, the available commands are here: github.com/facelessuser/ColorHe … e-commands.[/quote]

Yes got it to work using this:

{ "button": "button1", "count": 1, "modifiers": "alt"], // "command": "navigate_to_definition", "press_command": "drag_select", "command": "color_helper", "args": { "mode": "info" } }
So what i do is to disable all “supported_syntax” and just use this. Works perfect for me!

Now that i start using it i see that it does not support alpha in hex, right?
For example this “#00000000” does not trigger anything.
That would be great to have alpha support.
Even better would be to have support for “#aarrggbb” and “#rrggbbaa” (through a setting i suppose as you can’t make a difference with a regexp).

Thanks for that great plugin!

[quote=“farfromrefuge”]So what i do is to disable all “supported_syntax” and just use this. Works perfect for me!

Now that i start using it i see that it does not support alpha in hex, right?
For example this “#00000000” does not trigger anything.
That would be great to have alpha support.
Even better would be to have support for “#aarrggbb” and “#rrggbbaa” (through a setting i suppose as you can’t make a difference with a regexp).

Thanks for that great plugin![/quote]

Disabling all supported_syntax will keep it from indexing all the colors in your current file. So you won’t have the current colors palette. If that isn’t a problem that is cool. If you prefer an option to turn off the auto popup, that can be done as well which will keep the benefit of scanning current colors in a file, and giving you only on demand popups.

Hex alpha support is currently in, just not enabled. I was trying to figure out how I wanted to deal with it. Its not valid CSS and least not in CSS3. I think it is proposed in CSS4. It might be harmless to enable it. As for “#aarrggbb” I would have to implement a way to selectively turn that on or off for certain file types. I don’t know, I just need to think about it more. But I am moving in the direction of supporting hex alpha; I just need to get my thoughts straight on it first.

Maybe what I need to do is add an extra step that when someone selects a palette color to insert. In this case, they will be prompted the format to insert. It adds an extra step, but it will make it more suitable for files with different supported formats. Currently, you set a default insert preferences, but that won’t work for different non HTML/CSS type files.

As for scanning, I probably need to create a mapping of source scope/extension to supported color formats to scan. That way if you are in a file with “#aarrggbb” we won’t accidentally scan it as “#rrggbbaa”. Also we won’t scan unsupported types either.

Thanks for explaining about the current palette. I did not even know about it But would really use it anyway.
What i could use though is a “project palette”.
I am an app developer, so for me a palette is actually an app palette.
But even this would not work without the indexing. What i will do i think is create a palette per app and add colors as i go through them.
I prefer that from the “heavy” indexing.

Thanks for considering the alpha. That would really be an amazing addition. I know aarrggbb is quite a pain to handle but as a mobile app dev that’s what i use :s
developer.android.com/reference/ … roid:color

I actually never use css

Thanks again

Yes, technically you can already add colors to project palettes. Those are stored in your sublime project file. Though it doesn’t really store alpha layers, just the color portion: maybe that will change. I just found it difficult to tell some of the transparent colors apart in a palette. Maybe I just need to store the color with the values beside it if I add in alpha colors. Project indexing is on my list. I originally had it done on a thread, but performance in large projects sucked. What I need is to process the files on a separate process. Just haven’t gotten around to it.

This whole plugin started geared towards web development which was the main way I was using it. But truth is, I am not really a web developer, it was more for hobby stuff. I really didn’t consider how people would want to use it outside of my narrow use cases.

I will rework some stuff to get away from the heavy web bias. And I will get the hex alpha support in as well, but the “aarrggbb” may take a little bit longer. I feel like I am going to have rework the simple “supported_syntax” value for something more complex, but more versatile.

[quote=“facelessuser”]Yes, technically you can already add colors to project palettes. Those are stored in your sublime project file. Though it doesn’t really store alpha layers, just the color portion: maybe that will change. I just found it difficult to tell some of the transparent colors apart in a palette. Maybe I just need to store the color with the values beside it if I add in alpha colors. Project indexing is on my list. I originally had it done on a thread, but performance in large projects sucked. What I need is to process the files on a separate process. Just haven’t gotten around to it.

This whole plugin started geared towards web development which was the main way I was using it. But truth is, I am not really a web developer, it was more for hobby stuff. I really didn’t consider how people would want to use it outside of my narrow use cases.

I will rework some stuff to get away from the heavy web bias. And I will get the hex alpha support in as well, but the “aarrggbb” may take a little bit longer. I feel like I am going to have rework the simple “supported_syntax” value for something more complex, but more versatile.[/quote]

Thanks for taking all i say into consideration And your plugin is already in a very very usable state, even for non web uses!
Take the time needed, i know you are doing this on your free time!

Thanks

Getting there …

[quote=“facelessuser”]Getting there …

https://cloud.githubusercontent.com/assets/1055125/11462691/c96d8726-96d4-11e5-8b6d-07d742f7dfe4.png[/quote]

yes looking nice!
Do you have an idea on how you will parse #fff6f6f6?
How will you determine if alpha is ff or f6?
Great job

It is currently a little in flux, but currently you will have to define it for a either a given file’s base syntax scope and/or sytntax file name and/or file extension (file must exist on disk for this).

This next update is going to be bigger than I planned as quite a bit is getting overhauled:

• ColorHelper won’t try to guess to insert format from palettes anymore.
• Color in the convert, insert, and color picker panel will now dynamically only show valid colors for a given file.
• Support for hex RRGGBBAA, hex AARRGGBB, CSS4 hwb(), CSS4 gray() are coming.
• Better color detection: allow all the funky valid CSS stuff like rgba(+30, -1, 0, -0.1)
• Colors channels that exceed acceptable ranges will be clamped or adjusted reasonably.
• Configurable option to compress hex output (in supported files and only if desired) #AABBCCDD -> #ABCD.
• Should be able to turn off current file scanning or auto popup if not wanted.
• File context menu access to palettes, color picker, and color info (where applicable) popups.

AARRGGBB and RRGGBBAA will denote their difference by underlining the alpha channel instead of the verbose comment in the screen shot posted earlier.

If you don’t have a file configured, things like the palette, color picker, etc. will just show all color insert options, but it will interpret all hexa values as RRGGBBAA. You will have to configure settings for your target file(s) to get proper AARRGGBB support.

Current example configuration:

[pre=#FCFCFC] {
“syntax_files”: ],
“base_scope”:
“source.scss”
],
“scan_scopes”:
// SCSS (based on packagecontrol.io/packages/SCSS)
“constant.other.color.rgb-value.scss”,
“support.constant.color.w3c-standard-color-name.scss”,
“meta.property-value.scss”,
// Sass and SCSS script maps (based on: packagecontrol.io/packages/Synt … 0Sass)
“sass-script-maps -variable.other -comment -string”
],
“scan_completion_scopes”:
// SCSS (based on packagecontrol.io/packages/SCSS)
// Sass (based on packagecontrol.io/packages/Synt … stCSS)
// Sass and SCSS script maps (based on: packagecontrol.io/packages/Synt … 0Sass)
“source.scss -comment -string”,
// Sass and SCSS script maps (based on: packagecontrol.io/packages/Synt … 0Sass)
“source.sass -comment -string”
],
“extensions”: ],
“allowed_colors”: “css3”],
“use_hex_argb”: false,
“compress_hex_output”: true
},
{
“syntax_files”: ],
“base_scope”: “text.xml”],
“scan_scopes”: “text.xml -meta.tag.xml -comment -string”],
“allowed_colors”: “hex”, “hexa”],
“extensions”: “.tmTheme”],
“use_hex_argb”: false,
“compress_hex_output”: false
}[/pre]

Some of the CSS4 stuff may not support every syntax nuance yet; the spec seems a little vague on certain details and it also seems to relax things a bit which makes detection more complicated. But whenever CSS4 actually comes out or people with CSS4 transpilers start using these features I will get some real world feedback.

Anyways, I am getting closer, but I still have a bit of work left and even more testing.

New release with big changes and stuff:

[code]# ColorHelper 1.2.0

New

• Color preview will now show transparent colors with and without transparency.
• Transparent colors can now be stored and showed in palettes.
• Specifying files for scanning has been reworked and is now more flexible. Read docs for more info.
• Color Helper no longer has preferred formats when inserting. It will always prompt the user for their desired input format.
• Added CSS4’s rebeccapurple to the webcolor names.
• Added better rgb and rgba support: percentage format, decimal format (CSS4), percentage alpha (CSS4).
• Added support for alpha channel as percentage for hsla (CSS4).
• Clamp color channel values out of range.
• Support CSS4 gray, hwb, and hex values with alpha channels.
• Option to read hex with alpha channel as #AARRGGBB instead of #RRGGBBAA.
• Option to compress hex values if possible on output: #334455 --> #345.
• Can disable auto-popups if desired.
• Insert options now are now more dynamic and only show valid options for the current view.
• Anything else I might have missed.
  [/code]

Read the docs for more info about new changes.

Hopefully I didn’t break anything…

I tried you new version but i have difficulties with the new configuration file. And i don’t understand some fields values like “whitelist”
Here is mine. What i want is :

• no auto show
• only show on mouse+alt
• work in all kind of files
• hex/ahex/rgb/rgba/webname formats.

[code]{
// Show debug logging
“debug”: true,

// Show popups automatically in configured files.
"auto_popup": false,

// Upper case hex when inserting
"upper_case_hex": false,

// Use webcolor names when value color matches a webcolor name.
"use_webcolor_names": true,

// Color picker and palette picker by default
// are accessed by clicking an icon on the color info panel.
// Click access for one of thesecan be moved to the color box
// (visual representation of the color).
// (none|color_picker|palette_picker)
"click_color_box_to_pick": "none",

// Enable color picker option.  Will use native color picker
// unless "use_color_picker_package" is enabled and external
// package is installed.
"enable_color_picker": true,

// If the color picker is too big, try playing with this.
// Graphics in tooltips usually look better bigger (especially in Hidpi),
// but that can make the tooltips really big. If they are too big,
// you can play with this setting.  We compromise with medium.
// (small | medium | large)
"graphic_size": "medium",

// Use https://github.com/weslly/ColorPicker for the color picker if installed.
"use_color_picker_package": false,

// This can be turned off to get a rectangular color picker
// That displays possible options by hue and brightness/luminance.
"use_hex_color_picker": true,

// Show global palettes in palette panel
"enable_global_user_palettes": true,

// Enable storing favorite colors to the favorite palette
"enable_favorite_palette": true,

// Enable showing current file color palette
"enable_current_file_palette": false,

// Enable color conversion options on color info panel
"enable_color_conversions": false,

// Scanning rules
"color_scanning": 
    {

        "syntax_files": ],
        "syntax_filter": "whitelist",
        "base_scopes": ],
        "scan_scopes": ],
        "allowed_colors": "hex", "hexa"],
        "extensions": ],
        "use_hex_argb": true,
        "compress_hex_output": true
    }
],

// Enable project palettes in palette panel (Palettes stored in project file).
"enable_project_user_palettes": true

}[/code]

Thanks a lot!

Crap, I forgot to push the new docs. I just updated them. I also found a couple of missed bugs that are fixed in 1.3.3, so you need to update again.

facelessuser.github.io/ColorHelp … tax_filter

facelessuser.github.io/ColorHelp … auto_popup

I don’t provide such bindings, so you will have to bind them yourself. See github.com/facelessuser/ColorHe … e-commands for commands that can be bound.

[quote=“farfromrefuge”]- work in all kind of files

• hex/ahex/rgb/rgba/webname formats.[/quote]

It already works in all kinds of file if you call the commands manually, but you only get custom settings if you configure the file type in the color_scanning rules. Without the rules, it will show all color insert options, but you you can’t exclude color types or force argb etc. So to get what you want by configuring, you need to have some scan_scopes. But then to prevent full file scanning you can turn off current file scanning: facelessuser.github.io/ColorHelp … le_palette.

See facelessuser.github.io/ColorHelp … wed_colors for available color scan formats.

    // Show popups automatically in configured files.
    "auto_popup": false,

    // Enable showing current file color palette
    "enable_current_file_palette": false,

    // Scanning rules
    "color_scanning": 
        {

            "syntax_files": ],
            "syntax_filter": "whitelist",
            "base_scopes": ],
            "scan_scopes": "source", "text"],
            "allowed_colors": "hex", "hexa", "rgb", "rgba", "webcolors"],
            "extensions": ],
            "use_hex_argb": true,
            "compress_hex_output": true
        }
    ],

Hopefully that covers everything. And make sure you are using 1.3.3 which I just released.

Ok great got almost everything working!
Now the only thing is that “use_hex_argb” does not seem to be working (1.3.3). It clearly sees the 00 as the alpha when i want 77 to be the alpha

zuyL1DS.png1074×486 93.8 KB

1. It looks like your rules are not working in your file type for some reason as “hsl” should not show up if it isn’t defined in your rules. This is how it looks for me.

2. Maybe try restarting? Maybe your file doesn’t use ‘source’ or ‘text’ as its base scope? Does this do the same in other files (try plain text)?

Nevermind, I see the issue. I was testing on a view that already got scanned, but never on a new view created after scanning got disabled . I will try and take a look later today.

I found the issue. By logic for updating a view’s color_helper settings was stopped updates if scanning was disabled. This will be resolved later today.

1.3.4 has been released. This should fix your problems @farfromrefuge. Let me know if you stumble on any more issues.

everything is perfect now!

Will play with a bit more and let you know

Thank you so much !

[quote=“farfromrefuge”]everything is perfect now!
[/quote]

I’m glad, 'cause I need a break .

Yeah, let me know about any issues you find: preferably on the repo’s issue tracker.