https://wiki.mutigeraffe.com/index.php?action=history&feed=atom&title=LightweightWhiteboard%3AColorsLightweightWhiteboard:Colors - Revision history2026-10-21T05:54:09ZRevision history for this page on the wikiMediaWiki 1.43.11https://wiki.mutigeraffe.com/index.php?title=LightweightWhiteboard:Colors&diff=2547&oldid=prevMaintenance script: LightweightWhiteboard wiki2026-10-20T21:29:58Z<p>LightweightWhiteboard wiki</p>
<p><b>New page</b></p><div>The color bar below the toolbar sets the color for the pen, the shapes and the fill bucket. The eraser always paints white.<br />
<br />
== Color bar ==<br />
From left to right the color bar shows:<br />
* the '''current color'''. Click it to open the [[#Color dialog|color dialog]].<br />
* the '''palette''' with 16 fixed colors<br />
* '''My colors''': your own saved colors, followed by a '''+''' button (''New color...'') that also opens the color dialog<br />
<br />
Click a swatch to make it the current color. The swatch that matches the current color is highlighted. Hover over a swatch to see its hex value.<br />
<br />
== Palette ==<br />
{| class="wikitable"<br />
! Row !! Colors<br />
|-<br />
| Grays || <code>#000000</code> (black), <code>#595959</code>, <code>#a6a6a6</code>, <code>#ffffff</code> (white)<br />
|-<br />
| Colors || <code>#e53935</code> (red), <code>#fb8c00</code> (orange), <code>#fdd835</code> (yellow), <code>#43a047</code> (green), <code>#00acc1</code> (cyan), <code>#1e88e5</code> (blue), <code>#283593</code> (dark blue), <code>#8e24aa</code> (purple), <code>#d81b60</code> (pink), <code>#6d4c41</code> (brown)<br />
|-<br />
| Light || <code>#fff59d</code> (light yellow), <code>#90caf9</code> (light blue)<br />
|}<br />
<br />
The palette cannot be changed. Use ''My colors'' for your own colors.<br />
<br />
== Color dialog ==<br />
The dialog ''Choose color'' opens below the swatch or button you clicked. It contains:<br />
* a preview of the color and a color field that opens the standard color picker of the webview<br />
* sliders and number fields for '''R''', '''G''' and '''B''', each from 0 to 255<br />
* a '''Hex''' field<br />
<br />
All fields stay in sync. The hex field accepts <code>#rrggbb</code> and the short form <code>#rgb</code>. The <code>#</code> is optional and upper and lower case don't matter. If the value is not valid, the dialog shows ''Enter a hex value like #1e90ff or #19f.'' and the buttons ''Save to my colors'' and ''Use'' are disabled.<br />
<br />
{| class="wikitable"<br />
! Button !! What it does<br />
|-<br />
| ''Save to my colors'' || Adds the color to ''My colors'' and makes it the current color<br />
|-<br />
| ''Use'' || Makes it the current color without saving it<br />
|-<br />
| ''Cancel'' || Closes the dialog without changes<br />
|}<br />
<br />
<code>Enter</code> works like ''Use''. <code>Esc</code> closes the dialog. Clicking anywhere outside the dialog closes it as well. Keys typed in the dialog don't switch tools on the board.<br />
<br />
== My colors ==<br />
Saved colors are stored in the user setting <code>vscWhiteboard.customColors</code>, not in the board file. They are shared by all boards in all workspaces.<br />
* To remove a color, click the small '''×''' on its swatch.<br />
* A color that is already saved is not added a second time.<br />
* When the setting changes, for example because you edit <code>settings.json</code> by hand, all open boards update their list right away.<br />
<br />
In <code>settings.json</code> the colors are a list of hex values:<br />
<pre><br />
"vscWhiteboard.customColors": ["#1e90ff", "#ff8800"]<br />
</pre><br />
The extension writes values as lowercase <code>#rrggbb</code>. Entries it cannot read are ignored. See [[LightweightWhiteboard:Commands and Settings|Commands and Settings]].<br />
<br />
== Picking a color from the board ==<br />
The ''Pick color'' tool (<code>I</code>) takes the color of a pixel on the board. See [[LightweightWhiteboard:Drawing Tools#Pick color|Drawing Tools]].<br />
<br />
{{LightweightWhiteboard Nav}}</div>Maintenance script