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

Try making the grays less dull. #6937

Merged
merged 1 commit into from May 27, 2018

Conversation

Projects
None yet
2 participants
@jasmussen
Contributor

jasmussen commented May 24, 2018

When we merged in the pull request to make the colors of the editing canvas more friendly to themed background colors, we replaced all UI colors that floated on here with a range of opacities instead.

Those opacities can be improved, because as a result, they are a bit dull compared to Hugo's glorious shades of gray.

In this PR I try to improve those shades using a highly scientific metho... who am I kidding, I did this manually and it was quite the work.

I took the solid grays on one side, copied each of them and set them to a range of opacities ranging from .9 for the darkest and .1 for the lightest. Then I adjusted the saturation and brightness to mimic the original colors as closely as possible. The reason being, as soon as opacity is introduced, the colors lose punch proportionally to the loss of opacity. We can compensate for that with darker base colors, and increased saturation.

Please test that these colors, when viewed on a white background, have sufficient contrast in all the in-canvas editing UI where they are applied.

The end goal is for the opacities, when shown on a white background, to be as close to the range of solid grays we have, as possible.

Here's the file where I, in Photoshop, manually adjusted each color to look its best at a given opacity:

grays

See also codepen where I experimented with the opacities: https://codepen.io/joen/pen/vjwjpx?editors=1100

Here are the new opacities on a colored background:

screen shot 2018-05-24 at 13 28 53

Try making the grays less dull.
When we merged in the pull request to make the colors of the editing canvas more friendly to themed background colors, we replaced all UI colors that floated on here with a range of opacities instead.

Those opacities can be improved, because as a result, they are a bit dull compared to Hugo's glorious shades of gray.

In this PR I try to improve those shades using a highly scientific metho... who am I kidding, I did this manually and it was quite the work.

I took the solid grays on one side, copied each of them and set them to a range of opacities ranging from .9 for the darkest and .1 for the lightest. Then I adjusted the saturation and brightness to mimic the original colors as closely as possible. The reason being, as soon as opacity is introduced, the colors lose punch proportionally to the loss of opacity. We can compensate for that with darker base colors, and increased saturation.

Please test that these colors, when viewed on a white background, have sufficient contrast in all the in-canvas editing UI where they are applied.

@jasmussen jasmussen added the Design label May 24, 2018

@jasmussen jasmussen self-assigned this May 24, 2018

@jasmussen jasmussen requested review from karmatosed, mtias and WordPress/gutenberg-core May 24, 2018

@karmatosed

Looks like a great iteration, the colors seem fresher which is a lot nicer.

@jasmussen jasmussen merged commit 0addd84 into master May 27, 2018

2 checks passed

codecov/project 46.14% remains the same compared to 321be98
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@jasmussen jasmussen deleted the try/less-dull-grays branch May 27, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment