3.9 KiB
Drawing color refactor
Source discussion: Color Coded Trendlines Tips.
This document records the useful design work from that conversation and the final decision made afterwards. The picker is a grouped palette, not an unordered bag of colors: six hue families, four deliberately separated lightness variants per family, arranged as three contrasting row pairs.
Pairing
The rows are kept in three high-contrast pairs:
- green / red
- blue / orange
- teal / purple
The application assigns no timeframe, direction, drawing kind, or other
semantic meaning to a pair. Persisted names are only color names (green1,
red3, blue2). Users can apply any convention without fighting an encoded
mapping or changing drawing identity later.
Palette
Columns run from 1 (lightest) to 4 (darkest). The larger-than-usual
lightness steps are intentional: adjacent variants need to remain distinct on a
dense chart, not merely look harmonious in a design swatch.
| Family | 1 | 2 | 3 | 4 |
|---|---|---|---|---|
| green | green1 (#A6D8AA) |
green2 (#4DB155) |
green3 (#258F33) |
green4 (#006D09) |
| red | red1 (#FAADBC) |
red2 (#F45B78) |
red3 (#D13F62) |
red4 (#AF2850) |
| blue | blue1 (#A3CCFF) |
blue2 (#4699FE) |
blue3 (#1E76D8) |
blue4 (#0054B3) |
| orange | orange1 (#F8C592) |
orange2 (#F08A24) |
orange3 (#D66B12) |
orange4 (#B94E08) |
| teal | teal1 (#80D8D8) |
teal2 (#00B0B1) |
teal3 (#008E8F) |
teal4 (#006C6E) |
| purple | purple1 (#DDBCEB) |
purple2 (#BB79D7) |
purple3 (#9858B3) |
purple4 (#763790) |
Picker behavior
- Render six rows of four swatches in the table order above.
- Keep each contrasting pair adjacent.
- Add a small visual break between the three pairs.
- Show stable name and exact value together wherever a name appears, for
example
blue1 (#4699FE)in tooltips and accessible labels. - Keep the native color wheel for arbitrary values and Cancel on a final row.
- Existing persisted colors outside this palette remain valid and appear as
custom (#RRGGBB); there is no migration or recoloring of saved drawings. - Each family row has an optional user annotation stored in
localStorage. Blank annotations show the family name. Annotations carry user-defined meaning only and never alter color names or drawing data. - Hovering a drawing on the chart shows its drawing label, stable color name and hex, and the optional row annotation on separate lines. Custom colors omit the annotation because they do not belong to a palette row.
localStorage is intentionally temporary, not the server persistence design.
When cross-device preference sync is built, these annotations move into the
user-keyed, namespaced JSON preference store described in multi_user.md under
drawing_palette. They must not become a global file or dedicated columns per
family; adding future palette preferences should require no database schema
change.
Notes from the source discussion
The source also considered family labels, larger standalone swatches, a detail card with RGB values, categorical auto-color presets, and semantic labels baked into color names. Those are intentionally not part of this compact sidebar picker. Color-family names are the durable API; user-defined meaning is not.
Green and teal, especially their darkest variants, were identified as the most likely perceptual collision. They are retained because the final requirement is three complete contrasting pairs; the pair spacing and four strong lightness steps are therefore functional, not decorative.
The final in-app values drop the darkest source column from every family. The original shades 1-3 move to positions 2-4, and each new shade 1 is a solid 50% tint of the original shade 1 toward white. At the picker's small swatch size, the darkest colors lost their hue and made families hard to distinguish; numbered names allow this range shift without changing the palette API.