Create a complete color scheme based on one seed color

Contribute Feature

AI-generated summary

The discussion revolves around creating a complete color scheme from a single seed color, inspired by a Bootstrap utility. erlend_sh highlights the utility’s ability to generate a full scheme from one color, suggesting it could make design accessible. codinghorror confirms plans for a default theme set, inviting contributions. Moter8 asks for updates, and codinghorror encourages submissions, sharing a starting point from ColourLovers. Moter8 shares a green-beige scheme with specific color codes and notes adjustments for header icons and link colors. Greg11 and ljpp mention additional online tools for generating color schemes.

1

Continuing the discussion from What about an easier styling/theming system?:

I recently discovered this very handy Bootstrap utility:

It lets you set a single “seed color” and from that it makes you a complete color scheme. I think “anyone can be a designer” features like these could be really valuable for a forum, as it makes it very easy for anyone to style their forum to their liking - in accordance with style standards determined by Discourse - which in turn reduces the “every Discourse forum looks the same” effect.

The color theming system is a great first step, but your average forum admin will not have the design sense (or patience) to make a good looking and readable forum design.

6 Likes
Battle Axe - A free theme by the Tappara.co hockey community
2

We are planning for @awesomerobot to come up with a set of about 5 default built in color schemes for people to choose from, using the EZ themer.

3 Likes
3

Any update to this? There still is only 1 color scheme built-in.

1 Like
4

Sure, if anyone has any color theme sets to contribute, post them here – that’s the first step!

Here is a starting point
http://www.colourlovers.com/lover/mapadelphia

image.jpg966×765 48.8 KB

3 Likes
5

Tried out a Green-Beige color scheme:

1260×834 111 KB

Secondary: #f0ece4
Tertiary: #E2AA32
Header Background: #17A768
Header Primary: #111111

To get black header icons instead of grey ones and a pretty link color I used this in the custom CSS:

.d-header .icons .icon {
    color: #383838;
}

.d-dropdown a {
    color: #17A768;
}

.a {
    color: #0DAD46;
}

What I still need to change is the color of the “Star” “Share” etc buttons to maybe a white.

5 Likes
7

http://www.design-seeds.com/blog/

2 Likes
8

There are a ton of online tools that do this. https://coolors.co/ is one that generates 5 color sets.