1. General
  2. Ideas
+7

Color preview / Color viewer

Florian Quiles 12 years ago • updated by Jacob Moen 12 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 :)


Jacob Moen 12 years ago

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

Florian Quiles 12 years ago

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 :)

Joel Thornton 12 years ago

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.

Florian Quiles 12 years ago

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

Jacob Moen 12 years ago

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

Jacob Moen 12 years ago

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. :)

Florian Quiles 12 years ago

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)

Jacob Moen 12 years ago

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?)

Florian Quiles 12 years ago

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 :(

Jacob Moen 12 years ago

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.

Customer support service by UserEcho