+7

Color preview / Color viewer

Florian Quiles 5 years ago • updated by Jacob Moen 5 years ago 10

I am an apprentice web master/designer, and when i'm coding or editing my or someone else's CSS code, it would be really easier to me to directly see what color has been chosen.

So when i hover this kind of code " color : #0099cc " (or rgb, or rgba or shortened hexadecimal color (#09c)...), an information bubble/square appears with the color in it (as Google Chrome et Firefox "inspect element", in css code).


I don't think it's a really big deal, but it would really facilitate someone's life.


Thank you for your consideration :)


I use the ColorHighlighter package - it handles hex fairly well. I wish it could handle rgb/rgba too. But it's a start.

Oh, i installed it and it's approximatly what i was looking for. But yeah rgba is missing, but it's a good start. Thanks for this tip :)

This would be nice to have coupled with a color picker widget. A nice example of this is seen in Google Chrome when clicking on a color square in the inspector.

Oh ! i just noticed ! This would be great too !

I am using this with the ColorPicker package - works great. :)

I switched to using the package LiveCSS - it works for hex and rgb/rgba - and it does it without the need to hover. Try that one too - you might like it. :)

For some reasons, it makes the software crash ! when i finish writting a color (#fff, for example), it crashes right before the color is made... (so at #ff)

What OS are you on?


I am not able to make it crash on Debian Sid. But maybe I'm lucky? Hope they are able to fix that problem, as I see others are experiencing the same. (Could be a package conflict?)

i'm on Windows 7 64bits. I install it via ctrl+alt+P command panel (install package), then LiveCSS. I had another package i tried for CSS too, but removed it.

Now i can't remove the package because it instant crashes since i put #fff directly ... i guess the package tries to make something with the color (highlighting or whatever) but it crashes :(

Perhaps if you move the workspace file out of your project directory (if you are using projects) so that Sublime doesn't start with anything.

Maybe it's Windows specific?

But that sucks.