Show inline previews for rgb hex color strings

[probablykasper]

Check for existing issues

• Completed

Describe the feature

Show a color preview for languages like CSS and Tailwind.

If applicable, add mockups / screenshots to help present your vision of the feature

VSCode has this, which it calls "color decorators":

I use a color highlight extension which enables different styles:

[rafatrace]

This would be amazing. Is it in the roadmap?

[gbrrrl-no]

That'd be amazing to have. I really use this feature when working with Tailwind

[SergoGansta777]

Really important feature for me

[OgDev-01]

This is a very important feature for FE devs as we tend to work with colors. Would appreciate if this is added 👌

[christ-offer]

Was just looking for this myself! +1 on this!

[iamnbutler]

Going to unify any "color preview" issues and point them at this issue.

There is precedent with inlay hints, but I think this is non-trivial to add due to needing to dive into the editor paint/render code.

Happy to support the final design of what previews look like if someone builds the feature and opens a PR.

[kaumac]

Looking forward to this one. It's one of the very useful features I had in VSCode that I'm missing on Zed.

[Angelk90]

It would be useful if next to the line indicating the color you could see a preview of it, and if necessary also be able to modify it using a picker that is activated when you click on the color.

[7unn3l]

would also be very nice for it to be a per-language togglable feature.

[PlanB007]

Any update on this feature? Would be very nice to have this feature during FE development.

[NGSpace]

Would be a very nice feature!

[cv4x]

There are quite a few people watching this topic. Please don't sent out emails/notifications to everyone just to say "me too!" when a simple thumbs-up on the top post would be sufficient.

[TheRedXD]

Suggestion: I think these colors should show up in CSS and CSS-like languages, but not only that, things like hex colors or 0x notations of colors should show up in basically any language as well. You might want to have it be a setting as well! Someone mentioned something similar here already.

Also, a thin underline might work better with the style of zed, but that means it's harder to figure out what that color actually is at times.

[Kucito]

I would absolutely love this feature!

[TheRedXD]

I would absolutely love this feature!

Please just like the issue, instead of commenting on it. Comment ONLY if you have something to add to it. A few people not following basic common sense like this makes it worse for literally everyone else who wants to add to it.

[uncenter]

Fwiw here is a PR open for the Helix editor that adds color swatches (helix-editor/helix#12308) by supporting the textDocument/documentColor language server protocol method. This solution is language agnostic and puts the responsibility of color detection on the LSP instead of Zed. Might be a helpful reference.