[Feature]: Color picker and More colors

[tankmohit]

What's the feature?

Please add more colors to color palette and a color picker.

A screenshot from excalidraw.

Contact Details

[email protected]

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[whynesspower]

I am working on this feature-

Title

Feature: Adding color picker and More colors

Plan of Action:

• [ ] 1. See the code base of Excalidraw for the popover component
• [ ] 2. Whenever someone re-clicks the selected color, the shade and color picker will popup.
• [ ] 3. Create a new componenet in the tldraw codebase in a new branch which will have the color picker popover
• [ ] 4. Add the popover, test and merge to code to my fork. Create a PR from individual fork to tldraw repo.

To keep my master branch pointing to remote repository and make pull requests from branches from my fork, I will do the following-

git remote add upstream https://github.com/whynesspower/tldraw.git git fetch upstream git branch --set-upstream-to=upstream/master master

Changelog

To be updated after the code changes.

Testing

I will be writing my own unit tests and using extensive manual testing as the feature is fairly managable.

Kindly consider assigning this issue to me. Regards

[maheswarantp]

Questions regarding feature implementation

Hey @tankmohit @steveruizok , Could you explain which all of these features are needed by you?

• Color Input: Input color as HEX, RGB, HSL (Max vals for each channels to be imposed)

  • Can I use an equations of this form to create Pattern, Semi and Highlight colors for a user given color. For Pattern and Semi, ..... and for highlight default it to yellow. Selecting color is slightly different hue can be problematic as it can bleed into a completely different color.

• Eye Dropper:

  • Selecting colors from screen (obtained from already drawn shapes on the canvas) [I have a working implementation of the same already]
  • Selecting colors from images embedded into the canvas. Either way, a zooming tool showing which color is being chosen needs to be attached to the tool itself

• Color Picker: Pick a color from colorspace and show different saturation and lightness with sliders along with the hue.

I would also like to know if usage of any third party js libraries which do the same would align with the code philosophy of TLDraw

Attached is a design document for the proposed UI element, it would help greatly if you could suggest changes, if any

[irg1008]

I am using the editor api to contruct my own UI and I am encountering this issue:

props.color: Expected "black" or "grey" or "light-violet" or "violet" or "blue" or "light-blue" or "yellow" or "orange" or "green" or "light-green" or "light-red" or "red", got #bc5757

Is this that difficult? Is the editor doing something more than just changing the "color" or "fill" value of svg and text in css?

I am guessing it is difficult because this tool it's amazing!

Thank you!

[gabrielchl]

Is the editor doing something more than just changing the "color" or "fill" value of svg and text in css?

they use that list of color names to lookup color values in this object: https://github.com/tldraw/tldraw/blob/260a31db81cb2baceb05dc5218b330dfbfd38b3b/packages/tlschema/src/styles/TLColorStyle.ts#L42

essentially for light / dark mode, for each of those default supported colors, they define colors for "solid" / "semi" / "highlight", which is then used as fill / outline of shapes

my understanding is that there's currently no way to specify a new / add to that default palette to specify the set of color values for the new "color" one might wanna add

[mochizuki-pg]

Has there been any progress on this Issue?

There was also this Issue, but this way, after all, only the color defined in DefaultColorStyle can be selected

I want to use a brush with a color specified by a color code

[maheswarantp]

@mochizuki-pg had implemented a really rudimentary version of color picker for a use case I had here, don't think it's push worthy, but feel free to check it out here

https://github.com/maheswarantp/tldraw

[gabrielchl]

for additional context, there's this comment here from a proof of concept PR I made: https://github.com/tldraw/tldraw/pull/1690#issuecomment-1875402665 so it's likely on their roadmap