Color palette expansion #327
Comments
|
Just to add to what I posted previously, here's an example of using a transparent color to create shadow (moved off the illustration on the ride side to make it clear).
Adding tints to the palette won't eliminate the need for this because it makes sense for some situations, including reflections that cross several colors, like in screens:
But an expanded palette can reduce the need for it. Here's the purse using the proposed expanded palette and no transparency:
The basic reason for this is to ensure consistency across different illustrations, but it will also better predict how a piece will look when printed. Adding colors can make a swatch palette more complex, but there are ways of dealing with that. Here's the proposed palette, as-is:
One way to simplify would be to deemphasize secondary colors by putting them in a separate folder. It just creates a bit of separation from the colors that are meant to be used prominently:
Another thing we could do is make spot colors of the main tints for use when more subtlety is required. Here the basic range of tints is still shown, but spot versions are below:
In practice you could pull the slider on a main tint to find an in-between shade. This does put some uncertainty into the equation, but I wanted to present it as an option to discuss. Here's how it would look in action:
|
|
Not really adding to the discussion, but a useful tool for finding gradients between colors: http://jsfiddle.net/d6wXV/6/embedded/result/ |
|
Very cool @amycesal. I looked it up and there's a more expanded version that lets you start with RGB colors. |
|
awesome work @designlanguage. 🌈 🌈 🌈 |
|
Ok one more crazy link about how and why it's important to have colors similar in tonality for data visualization: http://tools.medialab.sciences-po.fr/iwanthue/examples.php And I'm happy that we're adding more colors to the "warm" section our palette. It was kind of hard to use just the red or yellow next to the largely cool palette without drawing unnecessary attention to the items in those colors. That being said, I'd like to see a few more less cool purple and maybe more of a maroon or maybe a warmer violet with a little bit more depth and wine-y tone to it. But overall I think this is a huge improvement. |
|
@klocraft and I realized that this discussion is blocking the updating of the logo for web usage, if we want to avoid changing the gray text color now, and then again at the conclusion of this discussion. So here's a prod to everyone to get their feedback in :) Overall, I think it's a great proposal. I like the slight cooler shift in the gray hue, especially. @designlanguage mentioned outside this issue that he wants to try generating them with the generator linked above, which might remedy this, but I have one quick note: There's still no variant of our primary green that meets the contrast guideline on white at small text sizes. It'd be nice to have that. (Good that the darker one meets it for larger type, though!) |
|
Thanks for calling this out again - the official CFPB green is about one Pantone shade off to meet 508 colour contrast ratios with white at any size, it just needs to be a slight bit darker. JH |
|
Deciding on a family of grays is a priority since it affects our logo, so let's focus on that. Here are the original cool gray tints:
As I mentioned before, they seem a little too similar to the warm gray/brown family, especially in the lighter tints. There are also a couple sharp jumps in the tint range:
To differentiate the tint families, we can either make the warm gray more of a brown or pull the cool gray to be cooler. Or we can let the two families be similar and allow near-redundant light tints in the expanded palette. I'm interested to know if any of you have strong feelings one way or the other. Shifting the cool gray a bit cooler would be a pretty subtle change to the palette, so I've explored that here. As an aside, I should say that the current cool gray looks to be more of a warm gray to me; I see more red than blue in it. Warm gray may be seen as more welcoming/inviting and less clinical than cool gray, and I know those values are important to the bureau. Considering that, I tried a keep the shift cooler pretty minimal. I used this tool that @amycesal linked, that finds mathematically spaced tints between two shades. Here's how an expanded cooler gray might look:
To the naked eye though, it looks like there are more severe jumps at the light and dark ends and the smallest jumps are in the middle. To counteract this, I calculated many more steps than I needed between the lightest and darkest shade. For the lighter and darker tints, I picked shades that were closer together on that list; for the middle tints they were further apart. The result is a tint family that hopefully feels more gradual even though it's actually a bell curve.
And here is the current and proposed together for comparison:
|
|
Thanks, George. I still like the idea of leaving the warm grays (named "Neutral" in our current palette) as they are and taking the Gray family in a slightly cooler direction. Concerning the equal steps or custom-eyeballed graduated steps, one thing to consider might be how we'll translate these values to print. Not that it's a huge deal to have each step as its own color in a custom palette, but there's something nice about the predictability of knowing that it's a specific percentage tint of the base color. But as noted above, we should also check the colors for accessible contrast, and fudge any of the hex/rgb values that are right on the bubble so that they make it. So given that we have to do that, maybe it doesn't matter. |
|
Interesting exploration going on here! Just wanted to enter a reminder about our accessibility needs -- In order to handle link text on the website, we need to be sure to check pacific blue link text on the lightest grays in whatever new gray palette we're considering. We're currently using our 5% gray for wells on the website in order to maintain enough contrast ratio with links (#295) so we just want to be sure we can maintain that. |
|
There was some good feedback from the working session yesterday. Due to the amount of work that would be involved in updating existing materials, the preference seems to be too not shift or add any color families, but to just add/adjust tints within those families. Accessibility@schaferjh - Just as you mentioned, there was a request yesterday to make the lightest tints of each shade pass accessibility matched with pacific blue, but that may not be practical. In order to get the tints light enough, they are barely able to be differentiated. Here are the colors together:
And here they are just passing accessibility:
Since I'm proposing a darker shade for all color families, I think it would be better to select the new darker version of pacific for text. It works well over the light shades in the proposed palette. Here are the light shades:
And here they are passing accessibility with the darker pacific:
As far as making our brand green darker, I wonder if adding the darker green tint would satisfy potential use cases rather than shifting the existing green. Percentage tints@Scotchester - What would the benefit be of having each tint being an equal percentage step from the main tint? I'm wondering because 1) the majority of the tints in the current palette aren't a % of their main color, and 2) I discussed the possibility of making each main color a spot color so you could just move the slider for a tint, but there was concern that there'd be too much variation between illustrations. MathI used a similar method as with the cool gray (see my previous post) on all the other colors. I'll spare you all the numbers in this post, but they're there. I started off with mathematically equal spacing between tints then adjusted them appear visibly equal. What all this means is that except for the main color in each family, all the tints are different than the existing color palette. Sidenote: the main gray shown here is the current cool gray, not the shifted version from the previous post.
TonalityI agree with @amycesal that swatches between color families should have a similar tonality. It will not only help with data visualizations, but across the board. In MSEM we have color-coded covers, but it was difficult to select the right tints because the tonality didn't match between families. In order to make the tonalities similar, I made navy the darkest color in its family, whereas in the other families, the main color is second-darkest. The other exception is the teal, where the main teal was darker than the other main colors, but too light for the darkest tints. I shifted the teal colors for more consistent tonality:
Thanks for all your comments so far; keep them coming! |
|
Hey @designlanguage I think we should spend some time at this Monday's Design Manual meeting to go over this in further detail. |
|
Here is the proposed palette expansion with two updates: adding the new green and switching back to the original teal, but making it the darkest shade in that family. Below right is the full expanded palette. Below left has our current main colors outlined.
|
|
Looks solid to me! |
|
We are moving on to the testing phase of this palette before we go ahead and start defining CMYK values. The green selections are still being worked out. |
|
I'm jumping in about how our current colors work with data visualization and proposing 2 changes. The Problem:Right now we only have 2 warm tones in the suite of colors, Gold and Red Orange. When trying to use them in graphs that have a lot of segments, they visually pull away too much and add unwanted emphasis. If you do the "squint test" (just squint) the red orange and the gold have more visual hierarchy than the rest of the bars.
Sometimes you would want to use a chart of warm colors to contrast with the majority of our cool colored charts, and there's not enough colors to really do this. I've tried using the Neutral, and that has a few problems. The Neutral has too much contrast against the warm colors, because it runs cooler, and it doesn't have enough contrast with the gray, so they can't be used in the same chart. The Solution:Changing the Neutral to a Warm Brown
We don't use the Neutral all that much, and I think one of the reasons is because it doesn't have enough contrast with the grey. The illustrations that I could find that use it are: Wallet, Teddy Bear, House (roof and garage door), Books and Bank. I think a warmer brown would work in all these instances as well as allow us to use it more frequently if it's a fresher, more wood or tanned leather like tone than just a warmer-ish gray. Adding another warm tone would give us more versatility in using those warm tones, and help combat the overwhelming coolness of the color suite. |
|
At a minimum, I support warming up the brown. I agree that it isn't used much since it is so close to the gray. |
|
👍 @mebates. The gray and brown are very similar, especially at lighter colors. Originally I tried making the gray cooler to solve for that, but making the brown warmer could be a better option. |
|
@designlanguage I'm going to move this into the August Sprint since this is a relevant ongoing issue. |
|
Starting from @amycesal's proposal, I explored how a brown/chestnut color might fit into our palette. After meeting with her to discuss, we landed on this:
The new color feels different enough from the cool gray and it also aligns well with the rest of the palette. It feels more like a color now than a neutral. The next step is to see where the warm gray exists currently, and if the chestnut color can successfully replace it. To start with, I pulled all the illustrations I could find that use warm gray and created this document below. I found that switching to a chestnut color made illustrations feel friendlier. In certain cases though, switching to cool gray made more sense, and in some instances you could switch to either.
If anyone can think of other instances where the warm gray exists that we can test, please let me know. Also, if you have thoughts on what we've explored here, please comment. |
|
Me likey. |
|
Love this new brown. Nice work! |
|
WOW that chestnut car looks like an 80's dad car. I think it warms up the teddy bear nicely and really looks like wood paneling on the garage door, and more like leather on the wallet. It also has enough of a contrast with the other colors to work nicely for data visualization. |
|
@designlanguage and I talked about adding another warm hue and landed on a wine-y purple. It sits nicely in the saturation values of the other colors, and adds to the overall warmth of the palette. I don't think it will be heavily used for illustrations, but it comes in handy for charts and graphs and data visualization.
|
|
Here's the data viz issue: |
|
@designlanguage What is the status of the print testing for the new color palette? |
|
@Scotchester - We are trying to get on GPO's schedule to test our CMYK. Hopefully we'll be able to go on press and confirm our colors soon. |
|
By popular demand, we've brought back the idea of including an additional color to the existing palette. @nataliafitzgerald and I talked about the gap between navy and red as the area to work in, and we started with the raspberry color from an old version of the color palette. The issue with raspberry is that it's pretty close to the dark red, and those two colors would compete with each other in a composition rather than work well together.
With a bit more blue, it feels distinct enough:
All together, here's how the palette fits together (minus the grays):
And paired just with the brand green:
Here are the hex values for the proposed swatch and tints:
Next steps will be looking at CMYK versions of this color and tints so we can add it to the printing reference file for GPO. |
|
To do:
|
|
Here's the pull request: |
|
As mentioned in PR #467 there is the need for further discussion/consensus in terms of which colors should be included in the primary color palette. Some action items include:
ExplorationI explored some options for what could be included in the primary color palette. A goal for the primary color palette would be that a user of the DM have a good understanding of the palette they would pull from for a basic branded piece. It also seems natural to include the logo colors, text color, solid beam colors, and main well colors (used in print) in the primary palette. Balancing all of these needs pushes me toward Option 2. In all of these options the full color palette would be included in the tints section and the secondary color palette would contain the solid colors not included in the primary color palette.
Historical documents for referenceWebsite prior to color update
Brand style guide 2.0
Foundational brand style guide 1.0
|
|
I'm leaning toward Option 2 as well. I find the midtones to be helpful, and it makes sense to me that the gray and midtone green from our logo are included here. I'm curious to hear what others think. Side note about the page: Do we need to have the CFPB green, white and black circles at the top? |
|
@huetingj - I don't think we need the green, white, and black circles at the top if they are causing confusion or just not helpful. We do have images to the right of the introductions on the other pages in the "Brand guidelines" vertical with the exception of "Video." But we don't follow this convention on pages within other verticals in the DM. I actually internally questioned whether we need them when I was working through the options. |
|
The one thing you might want to think about is adding color proportion. That might solve your "lots of green but not too much" issue. I love how the Red Cross does it. http://www.redcross.org/images/MEDIA_CustomProductCatalog/m6440103_BrandPoster.pdf |
|
@nataliafitzgerald I would agree that option 2 is working the best, however I would suggest removing black because like you mentioned its not part of the "core palette". I would suggest making the gray the darkest tone and adding a midtone (gray 50), or something in that range. |
|
@nataliafitzgerald sorry for the late reply. I agree with others that option 2 is more inline with CFPB current design standards. I looked through a sampling of both web and print pieces and see these colors (Green tint and midtone) used continuously as a baseline in a majority of design work. Option 2 provides the guidance needed for vendors, or new designers in addition to documenting existing designs. In my experience the core color palette should be a foundation for all colors, acting as the primary color in branded materials. This establishes brand recognition. I had a thought about possibly establishing black as a neutral palette with grey since it acts as a foundation that works iwth both primary and secondary palettes. I think we would all agree that even if the secondary colors are used as core it is important to support the secondary color with some primary color. I haven't seen where black is used except for text or a minicon and I would not consider that using the primary color palette. I would not think that it would be ok to use black as a background color or as a primary color in a design. does this make sense? |
|
Thanks everyone for your feedback! It looks like we have consensus on Option 2 being the best approach. I will move forward with incorporating this change into the Design Manual.
|
|
Moving this issue to done. Any remaining color updates can be handled in new issues. |
Hi all,
I've found that strictly using our color palette in illustrations can be very limiting. Often there is a slight difference in color needed for a shadow or a detail that doesn't exist in the current palette. We've worked around this several ways, including using transparency, but that can lead to inconsistent/unpredictable results, especially in printing. @nataliafitzgerald and I have discussed expanding the palette to lessen the need for these instances, so here's a first stab at it.
Within each color grouping, there's an area with a more severe jump and I wanted to focus on those areas to expand on. I felt that Navy and gray needed a bit more attention though. Navy is the darkest color, and each lighter step is significantly different. The darkest navy color also has a fair amount of red in it, but the second-darkest shifts to having less red and almost being a dark version of pacific. The gray range also has several sharp jumps. It's also a warm gray that isn't very different from the brown in the lighter shades.
So here's an initial proposal. The "+" minicon indicates an added color and the check mark is a revision to an existing color. Generally speaking, there is a light and dark shade added to each color group. The light shades find middle ground between some of the bigger jumps between tints; the dark shades in each tint are meant for shadows of the main color. With navy, I wanted to keep it consistent and differentiated from pacific, so it has a bit more red in the lighter tints. I made the gray slightly cooler, but it isn't vastly different.
If we want to expand the color groups, it seems the biggest gap is between navy and red. Here's a version of the palette with a lavender added:
All of these colors are RGB. I've started to look at CMYK translations of these, but we'd need see printed swatches before making any recommendations. For accessibility, here is how the colors stack up.
The next step will be testing this with existing illustrations. If anyone wants to help test this palette, or if there are any thoughts or questions on this, please let me know.
The text was updated successfully, but these errors were encountered: