Secondary Design Color

[tgeorgeux]

Hello all! At the Cal Poly hub we've been working on some branding decisions including updating brand guidelines and setting official print colors. In the process we're exploring adding in a palette of secondary colors to use with Jupyter Orange.

We'd love for anybody who's interested to be involved in the process with us. In the interest of productive work, there are a few constraints we will work within.

• The secondary colors need to compliment existing Jupyter Orange.
• We aren't working to change Jupyter Orange.
• We want to focus first on developing 3 colors: A light fill color, a dark fill color, and a color we can use for text on light backgrounds.

I'll update progress here as it's made:

• Scope secondary colors to a range that compliments Jupyter Orange
• Try multiple shades, RGB combinations, CMYK combinations, to find a set of 'color candidates' that would work with Jupyter Orange
• Of the selected colors play with Hue/Saturation/Lightness to find good matches that are easy on the eyes. Ideally a color candidate will be as close to the same base color with variation on lightness as possible. A good (good meaning works well with Jupyter Orange & White) candidate will have:
  • A good dark fill/accent color
  • A good light fill/accent color
  • A good 'text-on-light/white-background' color
• Members of the community should feel this is a good (or good enough) color.

[Ruv7]

Thanks Tim, how can folks help? By suggesting colors? By providing feedback on the colors you're considering? Are there meetings planned or will the communications be asynchronous? Clarifying next steps or the specific action folks can take will hopefully encourage participation.

[tgeorgeux]

Good point Ana! I'll update the top level comment to reflect the process a bit more.

In the mean-time, I have tasked one our design interns @i-am-am to vet out some colors. It seems that if you consult color Color Theory the color that compliments orange is blue. So we're working on multiple shades of right now.

If others have suggestions we welcome them. We're looking specifically colors that both 'look good' with the Jupyter Orange, and are complimentary in a technical sense (color theory). Jupyter exists primarily in a digital medium so our final decisions will be made based off the on-screen appearance, with a good working print analogue. If you want to ring in with feedback after we present these colors, that's helpful too!

I'm going to update a simple checklist at the top level to track progress.

[i-am-am]

Here is what I've been doing with this so far:

• We had an in-person discussion where we looked at a variety of colors to confirm that blue was the best choice. We also noted that almost-purple blues like Reflex Blue look really cool, but become overwhelming next to Jupyter Orange. We're leaning towards a blue that is really a middle blue-- not too green and not too purple. This becomes especially noticeable on the light version of the color.

• I played more with Pantone colors and their conversions before moving to HSL sliders. My top choice is an HSL value of (216, 87, --) with the L value changing for different tones of the color. I have been using 18 for dark blue, 82 for light blue, and 38 for a text blue. These convert to Hex codes of #062656, #a9c9f9, and #0d50b5. If the community likes these, I can find CMYK matches for printing and add them to my update of the brand guidelines.

[tgeorgeux]

@i-am-am Can you post a couple simple design artifacts demonstrating how the design would be used?

[betatim]

For people like me who are "colour illiterate" having some examples (or even just preview of the colour itself) like Tim suggested would be great.

(Unfortunately I don't think we can past chunks of HTML into a comment here and have it show up in the right colour. At least I couldn't work out how ;( )

[choldgraf]

(I'm also +1 on just seing PNGs of image mockups :-) )

[i-am-am]

Here are some color samples to look at. One thing to keep in mind is that colors appear different in different lighting. Just like a computer screen that looks very bright in a dark room looks much darker when you take it outside, so too can the colors you see change, even if you don't realize it. Because of this, folks who are interested might try looking at these samples on different screens and in different lighting to get a better idea of what the colors look like.

Here are the colors themselves; in order light, text blue, dark:

And here are some simple examples using those colors:

[ellisonbg]

Great to see this! Question, what is the hue of the Jupyter Orange, and what is its complementary blue hue? How close is that to the blue above?

[i-am-am]

Jupyter Orange has a hex value of #f37626, which translates to an HSL of (23, 90, 55). The complement of this is HSL (203, 90, 55). To me, this color feels a bit more dull/green than what we wanted, but here is what a dark, medium, and light blue would look like as an exact complement:

HSL 203, 90, 86 --> #bbe3fb light blue
HSL 203, 90, 34 --> #0969a5 text blue
HSL 203, 90, 20 --> #053e61 navy blue

And the examples with those colors:

I still recommend the blues from my previous post over these, what do other people think?

[choldgraf]

like the blues from the previous post!

(you should consider posting some of these over in the jupyter discourse. It gets more eyeballs from the broader community than this repo)

[i-am-am]

It looks like there is a post! https://discourse.jupyter.org/t/new-jupyter-branding-colors/947
I'll add some updates there.

[Zsailer]

I'm with @choldgraf, I like the second palette of blues you've posted above (though, I also admit my color illiteracy).

[i-am-am]

This is getting confusing to talk about, so maybe use a thumbs up emoji on posts of colors you do like, and thumbs down emoji on one you don't like, then comment with reasoning!

The goal should be to find colors that fit with Jupyter's theme of “professional, but enjoyable; simple, but powerful; intelligent, yet delightful.” So @choldgraf, @Zsailer, and others, do you feel like one set captures that theme better than the other? Is there another reason behind your choice?

[Zsailer]

@i-am-am

I think both palettes satisfy your definition above. My personal preference is the second palette (I gave it a 👍), but I have no informed reason (hence my statement about color illiteracy).

What's your goal for responses here—Would you like votes from the broader community or are you looking for people with color theory expertise to weigh in?

[blink1073]

Here is a helpful tool to check how the image would look given different forms of color-blindness: https://www.color-blindness.com/coblis-color-blindness-simulator/

[tgeorgeux]

If you allow this link to load and scroll down, you can use this to view all the colors on the page with different filters instead of one at a time. https://www.toptal.com/designers/colorfilter?orig_uri=https://github.com/jupyter/design/issues/56&process_type=protan

I think there are potential contrast issue for the darker colors, but it's not my area of expertise.

[tgeorgeux]

In addition, I'd like to clarify the usage cases further. I don't think we're talking about immediately incorporating these new colors into software immediately. Not that we couldn't but we are designing this set specifically around branding and identity, can we find a color combination that communicates Jupyter's Brand Values while at the same time giving a distinct visual impression that will invoke a familiar 'jupyter feel' when people see those color combinations used (Think white loopy cursive writing of the word 'cola' over a solid red background. Does this invoke any brand association for you?)

[betatim]

As a "coca-cola style" thing I prefer https://user-images.githubusercontent.com/38475381/57323105-fef15400-70b9-11e9-9b4a-e4fa842144b0.png. It is "bold", where as the same colour combo (white on dark) in the other colour scheme feels "faded by the sun".

The lighter background colours in both colour schemes don't do it for me. In particular this makes me (untrained as I am in colours) think "wow, you didn't want your logo to work in bright conditions or on bad projects did you" which is contrary to the "professional" feeling.

Not a fan of either blue colour as text colour on the white background. Both feel hard(er) to read compared to black-on-white.

I don't know if the dashed lines decorating the logo are part of what you are looking for feedback on. If yes: they aren't making me think "simple", more "busy". Maybe if we made them more subtle or ... somehow used them to look like decoration except actually they somehow represent the orbits of the moons of jupiter? Kind of the effect that most people just see lines, but once someone shows you (or you happen to be an astronomer) you go "Nice, a little subtle Jupiter astronomy reference there". Which would trigger "intelligent" as a feeling in me.

[ellisonbg]

I am inclined for us to stick to the complementary blue (to Jupyter orange) and then play further with the saturation and lightness values.