New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Too many CSS colors #968

Closed
mekarpeles opened this Issue May 24, 2018 · 24 comments

Comments

Projects
6 participants
@mekarpeles
Copy link
Member

mekarpeles commented May 24, 2018

Related to / part of #658 (design OL pattern library).

Overview

Open Library has ~80 colors in its main css file: https://github.com/internetarchive/openlibrary/blob/master/static/css/master.css

This was determined by grepping through the file to extract any line containing color. The color values were then extracted from each line and this list was then filtered into a unique set of color values (with repeats removed).

A computer assisted (comparing float hex 3-tuples) + manual process (not all values were easily comparable or visually useful to the goal of resolving) was then run to organize + visually present these values:

http://archive.org/~mek/olcss.html

Goal

We'd love assistance from a design champion to:
a) standardize/normalize/canonicalize all colors in our CSS to use hsl syntax instead of rgb, etc[1]
b) suggest colors to completely remove from the pallet (e.g. that outlier purple)
c) help us converge on a core color pallet (its apparent we've been eyeballing colors, based on the variations)

Context

Currently, here is how we use a variety of our colors:

  • the background of the website is a tan / beige (an off white)
  • our primary call to action (borrow / read) is a vibrant/saturated light blue
  • our secondary call to action (book is on waitlist) is an orange
  • we have a top banner (for news) which is a darker blue
  • we currently use green for our "want to read" button on book pages

We're open to this green and orange colors changing. I think we'd like to explore sticking with blue + beige as core colors.

Conclusion

The objective of this task is not to completely redesign OL's color scheme, but instead to help solidify it (reduce # of different colors, increase harmony between colors and different variants of the same colors, and finally to converge on a syntax standard for representing colors).

Resources

[1] Understanding + using + converting HSL

@Mononokay

This comment has been minimized.

Copy link

Mononokay commented May 24, 2018

Just wondering - why use HSL vs hex triplets?

@mekarpeles

This comment has been minimized.

Copy link
Member

mekarpeles commented May 25, 2018

@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.

@isgerjanson

This comment has been minimized.

Copy link
Collaborator

isgerjanson commented May 25, 2018

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?

@mekarpeles

This comment has been minimized.

Copy link
Member

mekarpeles commented May 25, 2018

@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.

@isgerjanson

This comment has been minimized.

Copy link
Collaborator

isgerjanson commented May 26, 2018

@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?

@mekarpeles

This comment has been minimized.

Copy link
Member

mekarpeles commented May 26, 2018

@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

@mekarpeles

This comment has been minimized.

Copy link
Member

mekarpeles commented Jun 4, 2018

@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

@tfmorris

This comment has been minimized.

Copy link
Collaborator

tfmorris commented Jun 4, 2018

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.

@mekarpeles

This comment has been minimized.

Copy link
Member

mekarpeles commented Jun 4, 2018

@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! 😄

@isgerjanson

This comment has been minimized.

Copy link
Collaborator

isgerjanson commented Jun 5, 2018

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.

@LeadSongDog

This comment has been minimized.

Copy link

LeadSongDog commented Jun 5, 2018

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

@isgerjanson

This comment has been minimized.

Copy link
Collaborator

isgerjanson commented Jun 5, 2018

@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.

@LeadSongDog

This comment has been minimized.

Copy link

LeadSongDog commented Jun 6, 2018

@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.

@isgerjanson

This comment has been minimized.

Copy link
Collaborator

isgerjanson commented Jun 13, 2018

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.

@LeadSongDog

This comment has been minimized.

Copy link

LeadSongDog commented Jun 13, 2018

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.
@psyked

This comment has been minimized.

Copy link
Collaborator

psyked commented Jun 14, 2018

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.

@isgerjanson

This comment has been minimized.

Copy link
Collaborator

isgerjanson commented Jun 14, 2018

@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.

@mekarpeles

This comment has been minimized.

Copy link
Member

mekarpeles commented Jun 14, 2018

@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)

@mekarpeles

This comment has been minimized.

Copy link
Member

mekarpeles commented Jun 14, 2018

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.

@psyked

This comment has been minimized.

Copy link
Collaborator

psyked commented Jun 15, 2018

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.

@isgerjanson

This comment has been minimized.

Copy link
Collaborator

isgerjanson commented Jun 15, 2018

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

@mekarpeles

This comment has been minimized.

Copy link
Member

mekarpeles commented Jun 15, 2018

@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 :)

@mekarpeles mekarpeles added this to the 2018 Q2 milestone Jun 21, 2018

@mekarpeles mekarpeles added this to In Progress in 2018 Q2 Jun 21, 2018

@LeadSongDog

This comment has been minimized.

Copy link

LeadSongDog commented Jun 22, 2018

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.

@mekarpeles

This comment has been minimized.

Copy link
Member

mekarpeles commented Jun 23, 2018

@mekarpeles mekarpeles moved this from In Progress to Done in 2018 Q2 Jun 26, 2018

@mekarpeles mekarpeles closed this Jun 26, 2018

jdlrobson added a commit to jdlrobson/openlibrary that referenced this issue Sep 10, 2018

Disallow hex/named variables in favor of variables
Port all colors to existing variables where possible (or a close
alternative exists)

For other colors, create new variables.

Stylelint from now on will enforce the use of variables for colors
making it easier to standardise on certain ones and remove redundant
ones.

Related: internetarchive#968
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment