Color Scheme Contest (with Prizes!)

I have found this also - some colour combinations are quite difficult to put into place without editing html/css manually of which you ask not to do for this contest.

8 Likes

This is fair feedback, I think @awesomerobot may be able to help with guidance here.

3 Likes

Despite what it seems, I suspect those are lighter versions of the text color. I’m guessing your text color is actually a very dark blue.

For example, #0a061d looks like this:

00%20PM

but when it’s lightened 50% in SASS it looks like this:

29%20PM

I guess the simplest explanation is that there a lot of different ways to mix colors to get something that looks like black, and that impacts what the color looks like when it’s lightened.

I intentionally used that in my Apricot theme

I made the primary text color a black from brown, so when lightened it looks brown

22%20PM

43%20PM

Definitely feel free to report any issues here, some of them might be chalked up to the difficulty of making a small set of colors work universally no matter what you set them to… but I’m sure there’s room to improve as well.

13 Likes

Hey folk,

Agreement on the inherent light/dark issues. Some elements seem to be hardcoded based on the master values, or iterated off of them which amounts to the same effect.

I think that the major value of this competion will not be the results, but information on the friction to creating good results.

One clear barrier to creating good color only options for this first iteration is that the discourse logo text is hardcoded as black in the icon. That eliminates half of the spectrum for backgrounds on the header (light only) so I created a custom png with a little white border around the text elements so that folk can experiment with if they want to go the other way.

Nothing great. A real version would want to expand the size of the png and allow more border, a real real version would be in svg or html and allow changeing of the text color, but this border trick will at least give folk an option for working with banner headers that use dark colors ( a common desire because usually you want a light background to your more important text content).

So here is an element for experimentation.

discourse_outline

2 Likes

kris I like the apricot theme, very clever.

Thanks Dražen! We definitely need these sorts of higher level templates to iterate on.

Totally agree, I wish there was a mechanism by which you could set a dark-themed icon and a light-theme icon based on which theme was chosen by the user (if you indeed let them choose their own theme).

EDIT: Thanks @Johani for pointing me to this theme component: Alternative logos for dark / light themes

4 Likes

3 posts were split to a new topic: Color scheme outputs unexpected colors

Reminder: You have until this Friday to send in a submission!

We’ve received a lot of beautiful and fun color schemes already, so please keep’em coming!

13 Likes
4 Likes

As per dark material design kind of old, but old is gold. The color layouts are already mentioned did a few changes. A dark color scheme which is easy on the eyes and clear text visibility.

4 Likes

So I have finally gone through the 10 and sent them off - Tried to create a different style of schemes in order to fit most tastes - hopefully they came out ok. Was good fun doing them - tough not using any CSS overrides in some places but hopefully they all work pretty well - they did from what I saw anyhow.

6 Likes

As the contest has ended - I hope more people will share their results :slight_smile: while we wait for the judges

And :1st_place_medal: :2nd_place_medal: :3rd_place_medal:

7 Likes

Sure, here are a few of mine…

Acid Lime:
25%20PM

Burning Man:
38%20PM

Calm:
53%20PM

Lazy Day:
16%20PM

POP:
26%20PM

Masculine:
03%20PM

7 Likes

Blood and Metal :
image

Cosmic Tranquillity :
image

Famous Blue :
image

Green Apple :
image

Mist (all grey theme ; no color) :
image

Strawberry Ice Cream :
image

Vintage Beach :
image

6 Likes

https://theme-creator.discourse.org/theme/megothss/beach
https://theme-creator.discourse.org/theme/megothss/lavender
https://theme-creator.discourse.org/theme/megothss/northern-lights
https://theme-creator.discourse.org/theme/megothss/rose
https://theme-creator.discourse.org/theme/megothss/southern-lights
https://theme-creator.discourse.org/theme/megothss/volcano

4 Likes

Latte - Discourse Theme Creator

Minimal - Discourse Theme Creator

Purpleism - Discourse Theme Creator

Stem - Discourse Theme Creator

Stormcoast - Discourse Theme Creator

Sunflower - Discourse Theme Creator

Peppermint - Discourse Theme Creator

BarbyP - Discourse Theme Creator

Kingdom - Discourse Theme Creator

Couleur - Discourse Theme Creator

4 Likes

Blackboard - Discourse Theme Creator
Cotton Candy - Discourse Theme Creator
Guacamole - Discourse Theme Creator
Noir - Discourse Theme Creator
Pink Is The New White - Discourse Theme Creator
Shades of Blue - Discourse Theme Creator

3 Likes

Winners are announced :confetti_ball:

7 Likes