Redesigning the color picker

[dwelle]

Playground: https://codesandbox.io/s/cocky-cohen-f8lris?file=/src/App.js

The basic principle:

The idea

1. To address the issue of having too small choice of colors (to cover most use cases), we'll introduce a shade color picker. A row of ~5 shades for each base color.

2. Revamp the default colors. Either we just change shades, or we use a different color swatch altogether (we are currently using https://yeun.github.io/open-color/).

3. Use the same base colors for both the stroke and background.

   First off, both should support white, black, and transparent colors. Also, you should be able to use the same color for both without copy/pasting the HEX value.

4. Probably still use a different shade for stroke and background.

   While we will use the same base colors, the default shade for background will be ~one shade lighter than the stroke. Stroke needs more contrast, while background needs to be less strong.

   Also, the common case is that you create a container with a background, and want to pick a matching stroke color which is still distinguishable from the background.

5. Show your most used colors even outside the color popup so you don't have to open it every time.

   Below, (1) is your "quick palette". Click to set color. (2) shows active color. If you want more options, you click on (2) to open the color popup.

   

FAQ

• question: Why a preset of shades instead of a full-blown color picker (wheel) allowing you to pick any color?

  • answer: Excalidraw's principle is simplicity and low friction. We want to give you a curated set of tools to create diagrams quickly without having to obsess about details.

    As such, we want to pick a set of colors that all look good by default, so you don't have to spend time on picking them yourselves.

    On top of that, a limited selection promotes consistency.

    That said, we still leave the option to add a custom color picker open.

• question: Why just 5 shades?

  • answer: While we could add more shades, such as 10 per color, it would again create too much choice (13 colors x 10 shades). If we pick our 5 shades well it should cover most use cases.

• question: What about keyboard shortcuts?

  • answer: Keyboard shortcuts will still be a thing! Sadly, we'll have to break them 🙁 (for those who have them in their muscle memory). Refer below:

    

Open questions

1. Will it be obvious (enough) how to open the color picker? The first five colors sets the active color, the 6th (active) color opens the color picker. How to make it more obvious?

2. Once you pick a shade, should the shade become the default for new colors as well (until you change it again)? I think it should.

3. What base colors to pick, and what shades? Especially the lightest and darkest shades.

4. Allow to customize "top picks"? Currently (on excalidraw.com), it uses the last 5 colors used on canvas that are not the default colors.

---

fix #4842 should take into account: #3643 #5872 #4086 WONTFIX for now: #5582 (full blown color pickers/wheel)

[tyfiero]

As a user, I would love this feature addition. The lack of colors bums me out. The shades idea is great, I wonder how dark mode would work with shades like that is my only concern.

[dwelle]

I wonder how dark mode would work with shades like that is my only concern.

Good point. I've added dark mode into the playground: https://codesandbox.io/s/cocky-cohen-f8lris?file=/src/App.js

[dwelle]

I'm getting worried the color picker is getting too complex. New users might not know what to click on. 3 different sections of rows of colors!

Perhaps we don't have to show the "Top picks" and keep them only in the left sidebar?

[ad1992]

I'm getting worried the color picker is getting too complex. New users might not know what to click on. 3 different sections of rows of colors!

Perhaps we don't have to show the "Top picks" and keep them only in the left sidebar?

Yeah I agree lets not show the top pics on the popup to keep its simple

[anatoliibakhtin]

Hello !

You have a discussion here, I am happy to offer my options. I'll start from the outside-in order 1-9, answering your ideas (!), questions (?), considering (#) wishes. I hope your time will not be wasted, I was interested to try to organize it all on a sheet, using your tool and the excalidraw-obsidian plugin. Plan:

1. #4086

(The keyboard shortcut prompts are not everywhere) Add the "s,g" designations there — good idea.

2. idea 3, 4

(using different colors for canvas background, fills, strokes):

If you change only brightness (not saturation or hue), you get 1, but if you also change saturation, you get 2 more contrasty, readable, less juicy. I would choose the 2nd option, but not knowing about 2 I would love to use 1. Picked up color saturation based on samples from google cursive

3. idea 5

( move the section "colors used on the canvas" to main menu) For me, this means the user's color is more important than the preset. It seems it might break the color style of the whole board. Drop by drop the mess will appear. If you do want to move the section "colors used on the canvas", to the main menu, I like options 2, 3 (2 is a little harder to hit with your fingers than 3)

I would leave the layout unchanged, changing the color selection concept:

The concept — pressing the S or G key pops up a color selection menu (as before or on the side), the cursor turns into a dropper, while pointing such a dropper at any button or tool, it is replaced by the cursor and back dropper if focus is lost.

4. question 1

(how to make the button on color selection even more obvious) Remove the frame around frequently used colors so that they do not look like a button (let the rule of your program will be everything in the frame — a button — can be pressed).

5. Should the colors used on the canvas be removed from the popup menu?

I think so, all information that is duplicated should disappear.

6. idea 2, question 3

(default color), (what are the base colors). Yes I would like other colors. In 6 months of using excalidraw I only used these colors (the ones with the green dot) as the others were too similar to each other, i.e. in fact the available to me were 6 groups— 10 colors.

I was using google keep before, and after observing myself I made a conclusion, I used gray-black colors most often, + a few colors, to highlight, denote objects: important, ready, grass, water, fire., so I would like to have in excalidraw such a scheme:

I took it from google cursive, reworked it a bit, black 3, 1 white, 1 transparent (#4842), colored 7x3 (almost like in a rainbow, so when drawing you can identify the object on the canvas with an object from real life, separate, set up a hierarchy), total of 25 + 1 transparent. Now I think — no more is needed (13x5 is too much, will take up space, I think so).

7. idea 1

(few colors to choose from, way to expand) Shadow option — cool idea! I would reduce them from 5 to 3, build them into new palette.

8. question 2

(would you save shade position when you change color for another color) If my palette is 7x3— no need save shade position, each hue is a separate felt-tip (press S, choose color); if your palette is 13x5— yes, you should save, because by choosing another hue you kind of choose another ink mode.

9. question 4

(whether to keep the ability to change the color) Yes, the user should be able to choose the color. Sometimes this is what the customer or my inner artist wants :). The palette itself will look like this:

at the very top is the name of the mode in which the palette works, more details below. The components of the palette are arranged in 16 cells:

• 1-J— can change, depending on the palette mode (there is an internal rule №1—

1 cells are always the darkest, most saturated, J the lightest, faded);

• Z-B— never change;

• N— dropper (#5582):

select objects, press N or on button, cursor changes to dropper, point it to pop up color palette, or object on canvas, or behind canvas (in other program), click (if you dragged cursor from dropper release mouse), objects will paint completely (stroke, fill) in 1 color, according to idea 3,4 (point 2 of current messag). There are only 2 droppers, 1 for color selection, the other for complete repainting of the object;

• M— color palette settings:

1. M1— its mode of operation (click to activate, inactive options become grayed out so as not to attract attention). Palette modes:

• Standard— you can change 1-7 cells, Q-J (see internal rule №1) — are auto-selectable tones for the hue above;
• Analogous—Initially the same colors as Standart, but only cell 1 can be changed, everything else will be picked up automatically according to internal Rule №1, except for line 1-7 changes to the right according to the next color tone, not the saturation (Hue)
• Monochromatic— only the center element "r" can be changed, the rest will be picked up according to rule №1;
• Complementary, Split Complementary, Double Split Complementary, Triad, Square: you can change any single cell, the rest will be selected on the base of their scheme and rule №1;
• Custom— all rules are disabled, cells are just containers for color. The frame is intentionally made bright black for demonstration only, in the working variant it will be as point 9 of current messag, barely visible (image above)

2. M2— dumps all colors to default settings, sets the palette to Standard;
3. M3— import palette;
4. M4— export the current palette (#3643).

To summarize, the palette looks like this:

The old mode of arrangement of elements in the main menu; added s/g hint; new concept of color selection; different modes of palette operation; new color scheme; dropper tool for full recoloring, considering the principle "background, fill, outline"; palette settings: mode, reset, import, export; used colors on the canvas.

Horizontal or vertical.

5872 🤷‍♂️

UPD: there is a plus to leave the field for entering a color value wide, that way I edit colors taken by pipette from PowerToys mode HSL. Although the font size itself could be reduced to make it all fit.

p.s. Take this message as options/a set of ideas, but not as a requirement. Thank you for your attention ! 🌼

[andyfleming]

The new color picker is looking great. I like the shades feature.

It would still be great to be able to select a color with a full color picker (or to be able to sample one from on screen/canvas). Clicking the swatch by the color text input seems like a reasonable place to add that option. I don't think it takes away from the simplicity of the defaults.

For me, the browser-based color input would be fine.

[dwelle]

@andyfleming we will definitely be adding an "eye dropper" to support sampling colors from the canvas.

But we want to avoid a full color picker for now to retain simplicity, reduce decision paralysis, and promote consistency!

[andyfleming]

@andyfleming we will definitely be adding an "eye dropper" to support sampling colors from the canvas.

Oh, perfect. That, combined with the color shade options would ease things a lot for me.

But we want to avoid a full color picker for now to retain simplicity, reduce decision paralysis, and promote consistency!

Understandable. I think the swatches and shade features do that. Why even let someone type in a hex color then? (PLEASE DON'T TAKE THAT AWAY 😄 )

I think at the point that they are setting a custom color, they are already going out of their way to do something custom. Having a flexible picker available doesn't compromise that. I'm not suggesting you make it the first thing that comes up; just that it's available somewhere. Plus it would give you the eye dropper feature for "free".

[karlhorky]

Any PR or ongoing work that we can follow here?

Just adding an <input type="color" /> color picker would already be a huge improvement for users without coming out with the polished final version.

Already "just works" in the browser if you add type="color" to the existing input:

[anatoliibakhtin]

https://github.com/excalidraw/excalidraw/issues/6600#issuecomment-1554550519

With the redesign we wanted you to have 5 quick-pick colors right at your fingertips without needing you to open the color picker itself.

We have a custom panel in obsidian-excalidraw with drawing pens up to 10 (straight ahead, without even opening the panel on the left) and soon there will be a function to repaint (change color properties, size.,) objects by selecting one or the other pen.

(sharing good news and idea)

[dwelle]

Closing as the redesign has been shipped, fulfilling its main purpose. We may make tweaks and incorporate some of the suggestions here in the future.