Out-of-the-box color picker #28587

Activity

1. Michel Kaporin (michelkaporin)

   added this to the June 2017 milestone on Jun 13, 2017
2. Michel Kaporin (michelkaporin)

   self-assigned this

   on Jun 13, 2017
3. ajitid commented on Jun 20, 2017

   

   Ajit (ajitid)

   on Jun 20, 2017

   Last edited by ajitid

   Contributor

   More actions

   With custom color palette and color converter too (RGB(A) <-> HEX <-> HSL and others) please :)

   👍React with 👍13Reacted by prog110, Michel Kaporin, wUFr, Genna, Yukai Huang, zack, Igor Antun, Cesar Aaron, Jens Hausdorf, John Turner and 3 more
4. Michel Kaporin (michelkaporin)

   added

   feature-requestRequest for new features or functionalityRequest for new features or functionality

   on Jun 21, 2017
5. michelkaporin commented on Jun 21, 2017

   

   Michel Kaporin (michelkaporin)

   on Jun 21, 2017

   Last edited by michelkaporin

   ContributorAuthor

   More actions

   The initial plan is to have the following features (which could be extended going further):

   1. Ability to select color, shade and transparency
   2. Ability to switch between CSS Color Module Level 3 standard colours
      • RGB values
      • hexadecimal values
      • HSL values (CSS3)
   3. View and edit current selected color value inside colour picker
   4. View initially selected colour from the editor

   Going further we could extend the picker with:

   1. Colour palettes
   2. Showing all the colors of current file to easy pick an existing color
   3. Color eyedropper (not sure how feasible is it at the current stage)

   Let me know if you find something else very useful and that it is not on the list.

   👍React with 👍13Reacted by Ajit, wUFr, prog110, Gulshan, Yukai Huang, James Gatz, Wang Weixuan, Eric Hiller, Igor Antun, Zulfikar and 3 more

   🎉React with 🎉1Reacted by Damian
6. ajitid commented on Jun 21, 2017

   

   Ajit (ajitid)

   on Jun 21, 2017

   Last edited by ajitid

   Contributor

   More actions

   On "going further":

   4. Extending your point 2 by detecting all colors used in the current project and making a color palette out of it.
   5. Naming colors present in the color palette. So one can type something like btn-hover (which is then suggested by Intellisense) and press enter rather than typing #43aaaa to get the color.
   6. Dynamic coloring- A checkbox, when ticked and a color in the palette if changed, all of its occurrence in the project will be changed.

   👍React with 👍9Reacted by prog110, James Gatz, zack, Eric Hiller, Yukai Huang, Imre Nagy, Igor Antun, Tyler Sebastian and Damian
7. Erich Gamma (egamma)

   added

   plan-itemVS Code - planned item for upcomingVS Code - planned item for upcoming

   and removed

   feature-requestRequest for new features or functionalityRequest for new features or functionality

   on Jun 21, 2017
8. Michel Kaporin (michelkaporin)

   modified the milestones: July 2017, June 2017 on Jun 21, 2017
9. anseki commented on Jul 5, 2017

   

   anseki

   on Jul 5, 2017

   More actions

   Hi,
   I expect this great feature, and I will do maintenance my "Color Picker" extension until this feature is added to VS Code.

   And I hope that the feature supports customizing a format of an output, when picking a color or converting colors.
   E.g. it allow us to choose 70% or 0.7. Also, FED or ffeedd, etc.

   ❤️React with ❤️1Reacted by Ajit
10. dstorey commented on Jul 11, 2017

    

    David Storey (dstorey)

    on Jul 11, 2017

    Member

    More actions

    I like the plan.

    Some additional ideas:

    • It would be nice to default to hex shorthand where available (like Extension API: cursor position (determining current location and moving it) #111 rather than Error: Failed to move '*' to the recycle bin. #111111)
    • It would be really cool if VS Code understood your linter rules and defaulted to that format for colours if you have one specified. I could imagine this wouldn't be easy as there are more than one CSS linter.
    • CSS4 extends hex to be able to specify the alpha channel (4 and 8 digit hex). This may be nice to add but as it isn't well supported yet, maybe this would just encourage interop issues.
    • Where you specify both a colour and a background-colour in the same ruleset, it would be really brilliant if the colour picker warned (and maybe clamped the sliders) when the two colours don't meet the two recommended colour contrast ratios. You probably couldn't do it beyond the current ruleset as you don't know outside the browser what will get inherited like you can in F12, but at least it is something.

    👍React with 👍3Reacted by Andrii Dieiev, Jens Hausdorf and prog110
11. isidorn commented on Aug 2, 2017

    

    Isidor Nikolic (isidorn)

    on Aug 2, 2017

    Last edited by isidorn

    More actions

    Michel Kaporin (@michelkaporin) has delivered color picker to master, you can try it out in vscode insiders.
    Closing

    👍React with 👍1Reacted by Dale Harris
12. Isidor Nikolic (isidorn)

    closed this as completedon Aug 2, 2017
13. vscodebot

    locked and limited conversation to collaborators on Nov 17, 2017