Just wondering - why use HSL vs hex triplets?

@Mononokay, the arguments raised were:

• widespread support, easier to understand and modify
• like rgb, it's easy to tack alpha onto it when you need it (unlike hex)

Open to discussion, top priority is converging on a canonical approach.

Saw your tweet and stopped by, do I get it right, are you looking for reverse engineering your brand identity based on this stylesheet here?

@isgerjanson that seems like a valid interpretation. From an engineering standpoint, we're trying to develop a pattern library which makes it easier to know how colors should be used.

Right now it's difficult to know what colors work with Open Library and it's difficult to maintain.

Hopefully by choosing a core pallet and updating our stylesheet, openlibrary.org will also look more visually balanced and coherent.

@mekarpeles In this case, it seems to me that you've to go through all or at least a couple of screens of Open Library. Also, it's crucial in my opinion to figure out your current (implicit) design system/methodology.

I'd like to address and solve this issues and would like to know how I can be of any help because I've never worked on an open project like this on GitHub.

Is there any easier way to communicate than this comment section?

@isgerjanson, just submitted a request to invite you to our slack channel. Some folks are off for the holiday weekend so I hope it arrived by Tuesday! Thanks for your patience, looking forward to speaking with you more about this project

@isgerjanson any questions / thoughts re: next steps?
I can go through http://archive.org/~mek/olcss.html and start at least merging the "grays" and canonicalizing the colors if that is helpful

While there are 80 colors, there are over 400 color references and 6,000 (!) lines in that CSS file. It seems like refactoring the CSS in a more rational way would be a necessary prerequisite to implementing a refactored color scheme. Making better use of the "Cascading" part of CSS should make the file a lot smaller, easier to understand, and modify.

@tfmorris I agree, I don't know of many volunteers who are willing to completely refactor our css in one go and I anticipate big changes are very likely to also have "cascading" style problems (which may turn into a huge project).

It may seem arbitrary focusing on colors, but I'm hoping we can find a set of relatively small scoped tasks to help us gradually move in the right direction.

Unless of course you or someone else really feels confident (+ has time and interest) in tackling this in one go. If so, please take this as my encouragement! 😄

As said by @tfmorris there’s a need to refactor the CSS to reduce the number of color references using cascading.

On my part, I’m focusing on three sections of Open Library to get started with this issue: Home Page, Search Page, Books Page.

I’ll check out the CSS on all three pages and hopefully find ways to reduce the number of references. Then, I’ll create a hand full of color scheme combinations, in regard of WCAG, presenting them to you using a conventional design method like, e.g. style tiles that should allow everyone to make a sound decision about which colors to pick.

How many colours are regarded as stylistically "clean" design? I have to think it's just a handful, certainly less than ten.

@LeadSongDog Usually, you start (at least I do) with three base colors (one accent, two supporting colors) besides neutral white and shades of black/grey and in addition to system colors like red for warning, yellow for hints etc. A quick fix in our cases would be an even much simpler color scheme based on shades of the Open Library logo color (#518ABE), grey and white. Using CSS:Less to easily derivate from the chosen colors by reducing or increasing saturation should allow developers to continue their work without bothering too much about the design.

@isgerjanson OL uses shades of: grey, tan, and blue, (with orange and green buttons). Orange is also used in the timeline, but that would have been better done in blue anyhow. Icons such as for Twitter of course are special cases.

I've started with the most straightforward approach and pulled the main fonts and colors from the homepage and set up a simple color scheme (base colors and shades) based on the current logo and the colors used in the charts, see here: https://isger.link/open-library-color-refactoring

Any opinions? (I know the differences to the original is very small – but still …)

EDIT: I've uploaded a changed version of the original homepage using the new color palette. An updated version of the Books Detail Page and Search Page will follow too.

Great start, though I've got a few nits to pick:

• Carousel backgrounds could use the same shade as the basic page background.
• The subject carousel background should probably be the same as the other carousels.
• In the "new feature" notice, white text on orange has low visibility. Either black text or black-keyed white text would work better.

I thought I'd have a go at coming at this from a purely technical point of view, and see what sort of variations there are in the existing colours and what could be reduced or standardised. I've created a repo and a report page here: https://psyked.github.io/openlibrary-css-analysis/ and I'll update it as I go along. My primary idea is to use something like Delta-E colour comparisons in place to find similar colours that could be merged, and then perhaps look at checking colour contrast accessibility.

@LeadSongDog You're right regarding the use of strong text color for the "new feature" notice and I'll look into the recommendation for the carousel as well. (I've merely applied the color scheme in a rush, and I've noticed that I even changed the IA header – I'll stop messing around with the layout but it's kind of hard to only stick to the colors when you see something like this: https://cssstats.com/stats?link=https%3A%2F%2Fraw.githubusercontent.com%2Finternetarchive%2Fopenlibrary%2Fmaster%2Fstatic%2Fcss%2Fmaster.css.)

@psyked This is a very interesting approach that you follow. :) I am total with you in regard of color contrast accessibility but I'm not sure if it's wise to automatically merge colors based on (perceived?) similarity (because you will reduce color shades) regardless of context (e. g. font color, background color or border color) – but maybe I just can't figure out what you'll end up with. I've bookmarked your page and I'm eager to learn more about your approach.

@psyked this is amazing. What do you suggest for next steps?

@isgerjanson I'm loving the clarity and consistency of this approach, thanks for putting it together. My early feedback re: the colors is they feel a little muted (which is partially the goal re: quiet). I think @bfalling likes them as is :)

re: the homepage concept, I'm not sure I like the usage of orange (anywhere). The black and orange reminds me of an "Under Construction" sign, which is very different from "quiet".

re: @LeadSongDog's feedback:

Carousel backgrounds could use the same shade as the basic page background.

I disagree -- the current carousel background is currently the same color but a lighter alpha than the background (intentionally) to give a feeling a depth (that it pops out and is closer to the viewer)

I think as a first step, there are colors we can comfortably literally just prune from the style sheet.

e.g. there's a yellow: #ffff00 and a purple #c43bfc that seem completely out of place.

Secondly, I think we should use @psyked's Similar colours chart (based on Delta-E 2000) and consolidate accordingly, picking the 1st color in each set.

One exception may be #FFFFFF -- I don't think we should replace white w/ a grey like #F6F6F6.

Glad you like it, @mekarpeles 😄 I've added some extra bits which count the usage of specific colours and find the next-most-similar colour, which helps highlight some inconsistencies and identify the outlier colours.

With regards to pruning, I would try to reduce everything in the Similar colours list, but not necessarily picking the 1st colour in the set, as it's currently sorted by lightness, rather than web-safe, best-fit or use-count.

Next step would be identifying the colour variations and dealing with them on an individual basis. I assume that the visually-imperceptible differences have just crept in as an error when colour-picking existing designs and then propagation from that, so I'd get the colours aligned based on usage counts or websafeness. There's a lot of light grey shades which I think should probably be grouped to either white or a darker grey for better colour contrast, depending on the situation.

Great that you’ve settled with an approach so I‘ll drop out of this conversation.

@isgerjanson, would love to continue the conversation on a separate issue which targets your goals. Can we continue on #658? We very much would like to build a design pattern library for Open Library and achieve greater consistency. It seems like that issue and this one can be done in parallel and we'd love your help :)

I like where this seems to be headed. Consideration should also be given to design for https://en.wikipedia.org/wiki/Color_blindness to ensure the selections ultimately made are distinct to as many eyes as possible. There must be some tools extant to aid this.

@LeadSongDog https://webaim.org/resources/contrastchecker is a good one