Choose a better color palette for the various categories

[defeo]

The colors for the various categories

https://github.com/ec24-tips/ec24-tips.github.io/blob/7002030eb45f707d1315e3d53afb7c5aa51271bf/main.css#L48-L67

were chosen quite randomly. If any graphically talented person wants to help choose a better palette, that'd be appreciated.

[syndrakon]

I played around a bit and came up with some versions:

---

1. Many distinct colors:

.cat-bar {
    --base-color: #70108d;
    --active-color: #4a0c5f;
}
.cat-restaurant {
    --base-color: #00396e;
    --active-color: #002242;
}
.cat-café {
    --base-color: #03b3b9;
    --active-color: #008a8f;
}
.cat-bakery {
    --base-color: #24549b;
    --active-color: #1a3e77;
}
.cat-sightseeing {
    --base-color: #e61212;
    --active-color: #a10a0a;
}
.cat-shopping {
    --base-color: #ff2c84;
    --active-color: #d1236b;
}
.cat-viewpoint{
    --base-color: #1ac004;
    --active-color: #128d02;
}
.cat-beach {
    --base-color: #d49c00;
    --active-color: #b98800;
}
.cat-sport{
    --base-color: #e47f0d;
    --active-color: #b1640b;
}
.cat-hike {
    --base-color: #427c21;
    --active-color: #2b4614;
}
.cat-conference {
    --base-color: #555;
    --active-color: #000;
}

---

2. Less colorful with better contrasts

.cat-bar, .cat-restaurant , .cat-café, .cat-bakery, .cat-shopping {
    --base-color: #111BD9;
    --active-color: #111BD9;
}
.cat-viewpoint, .cat-sightseeing {
    --base-color: #9E0830;
    --active-color: #9E0830;
}
.cat-sport, .cat-beach, .cat-hike {
    --base-color: #3f593f;
    --active-color: #3f593f;
}
.cat-conference {
    --base-color: #111111;
    --active-color: #111111;
}

---

3. Another one with few, but quite different ones. It might be slightly more daltonian-friendly and has one more color

.cat-bar, .cat-restaurant , .cat-café, .cat-bakery {
    --base-color: #5C48AB;
    --active-color: #5C48AB;
}
.cat-shopping {
    --base-color: #A30076;
    --active-color: #A30076;
}
.cat-viewpoint, .cat-sightseeing {
    --base-color: #8F2201;
    --active-color: #8F2201;
}
.cat-sport, .cat-beach, .cat-hike {
    --base-color: #006040;
    --active-color: #006040;
}
.cat-conference {
    --base-color: #111111;
    --active-color: #111111;
}

---

My personal preference are 1 and 2 depending on how many colors and how much contrast we want. I do not like 3 as much, but I still provide it to give an example of a completely different choice.

[syndrakon]

Given black is no longer used, I would suggest replacing the green in propositions 2 and 3 by black, since black is very visible while green is our least visible color for our backgrounds.

But before doing this, one should try this change out, display the result and see how it looks.