How to see LCH colour previews in VSC?
Is there any way to get colour previews for the new(ish) LCH colours?
Ideally I could also click-convert them to the other respective colourspaces, as VSC handily allows (for the colour spaces it supports!)
Even an online webapp to do this would help, which I can't seem to find.
Many thanks in advance.
16 Replies
Okay sometimes just changing one search term does the trick:
https://lch.oklch.com/
https://css.land/lch/
https://luncheon.github.io/lch-color-wheel/
But how to get a preview into VSC? I suppose it might not be possible yet.
yea I don't see support for it from the default color picker, you can find few different extensions that do though.
GitHub
[css] Add new CSS color functions · Issue #165207 · microsoft/vscode
CSS Color Modules 4 added many new color functions. This spec already Candidate Recommendation Draft and was implemented in Safari 15 without any flags. We already have a few articles about the mos...
Also for future reference this post is probably better for #os-and-tools 👍
Thanks a lot 🙏
That extension is not yet available, right?
This is a great read on the topic btw 🙂 https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl
evilmartians.com
OKLCH in CSS: why we moved from RGB and HSL—Martian Chronicles, Evi...
CSS Color Module 4 adds oklch(), and we gain P3 wide-gamut support, boost code readability, and improve developer-designer communication.
that is the issue/pr someone was making not an extension
as you see its kinda stale, so post and help bump it maybe. (oh someone did recently reply)
Seems like most the color picker extensions I pulled up all support it, so its just up to you to find one you like.
I just did 😎
How do you find them? I'm so hopeless at searching for things on Github
or search right in vscode is what I do
ctrl+shift+x
Has nothing I'm afraid
That extension seems to be for something else. But that's okay.
no
search for Color picker
that is what you are looking at in vscode
or color highlighter depending on what functionality you want
There are tons. You're saying I need to just look through them all to make sure they support LCH?
I'm not super optimistic if a search for "LCH" yields nothing.
Color Info - Visual Studio Marketplace
Extension for Visual Studio Code - Provides quick information about css colors
I mean LCH could mean so many things mate not a great search term
gotta learn how to narrow things down, on what they are called 😄