oaktrees
asked on
Need Five Good Contrasting Colors for 212934
What would be 5 REALLY GOOD contrasting colors for a dark background.
212934
Good in contrast & readability.
Somehow I was hoping there was a web tool that one could put in a background color, and a range of suitable contrasting colors would get generated.
Couldn't find anything for a SINGLE color as a starting point.
So, for the color
212934
if you can offer a solid set of 5 colors with great contrast and readability, that's what I need.
If there's a formula for that, please share.
If there's a tool where one can enter a background color and a range of text colors is generated even better!
Sincerely,
OT
212934
Good in contrast & readability.
Somehow I was hoping there was a web tool that one could put in a background color, and a range of suitable contrasting colors would get generated.
Couldn't find anything for a SINGLE color as a starting point.
So, for the color
212934
if you can offer a solid set of 5 colors with great contrast and readability, that's what I need.
If there's a formula for that, please share.
If there's a tool where one can enter a background color and a range of text colors is generated even better!
Sincerely,
OT
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi Len & Scott!
That's what I'm getting at. White, out of the box, is an obvious choice.
But, if there are elements in a document that need different "valences" then you'd want a RANGE of nice contrasting colors.
Let me illustrate.
Using the tool that Len suggested we can see that against a dark background black and red are poor choices.
Black getting a red stop sign:
https://contrast-ratio.com/#black-on-%23212617
SCORE / RELATIVE LUMINANCE
1.35 / 0.017714213392336274
And red not much better:
https://contrast-ratio.com/#red-on-%23212617
3.87 / 0.017714213392336274
Yellow, on the other hand, is quite perfect.
https://contrast-ratio.com/#yellow-on-%23212934
13.66 / 0.02157142662212875
Now, with there being about a BILLION colors between black and yellow, and maybe another billion more beyond yellow, I was hoping there'd be a calculator which would generate a list of all the Green Light colors against any selected background.
Surely it's a formula, as https://contrast-ratio.com/#purple-on-%23212934 shows us. It pops up with a red "Stop" indicator right out of the gate.
Here's my thinking:
Rather than having to, one by one, enter and test each color that springs to mind to test it against any background - was hoping there'd be a way just to generate the entire list of them that are Green Light for any potential background color.
Now, for those with graphic arts training, there's an intuitive sense to this. They've been lucky enough to have enough experience to know what will look good. Less need for them to even have to check.
But, even for them, there's clearly a science to it, as this posts illustrates > https://blog.prototypr.io/how-to-design-a-dark-theme-for-your-android-app-3daeb264637
Where phrases like "Primary Color Tonal Value 500" can be found. https://miro.medium.com/max/2800/1*OkhjA8Qatt25nOO34wu0Ow.jpeg
So, hoping for a tool that...knows what these guys know.
What I did so far was to simply google image search: dark theme text color > https://www.google.com/search?as_st=y&tbm=isch&as_q=dark+theme+text+color
Got to this: https://miro.medium.com/max/3600/1*upuJdnV8UARih0feJbEteA.png
Now, surely these are useful, but, would love to be able to see ALL the colors that, scientifically / via-vormula, would work.
Sincerely,
OT
That's what I'm getting at. White, out of the box, is an obvious choice.
But, if there are elements in a document that need different "valences" then you'd want a RANGE of nice contrasting colors.
Let me illustrate.
Using the tool that Len suggested we can see that against a dark background black and red are poor choices.
Black getting a red stop sign:
https://contrast-ratio.com/#black-on-%23212617
SCORE / RELATIVE LUMINANCE
1.35 / 0.017714213392336274
And red not much better:
https://contrast-ratio.com/#red-on-%23212617
3.87 / 0.017714213392336274
Yellow, on the other hand, is quite perfect.
https://contrast-ratio.com/#yellow-on-%23212934
13.66 / 0.02157142662212875
Now, with there being about a BILLION colors between black and yellow, and maybe another billion more beyond yellow, I was hoping there'd be a calculator which would generate a list of all the Green Light colors against any selected background.
Surely it's a formula, as https://contrast-ratio.com/#purple-on-%23212934 shows us. It pops up with a red "Stop" indicator right out of the gate.
Here's my thinking:
Rather than having to, one by one, enter and test each color that springs to mind to test it against any background - was hoping there'd be a way just to generate the entire list of them that are Green Light for any potential background color.
Now, for those with graphic arts training, there's an intuitive sense to this. They've been lucky enough to have enough experience to know what will look good. Less need for them to even have to check.
But, even for them, there's clearly a science to it, as this posts illustrates > https://blog.prototypr.io/how-to-design-a-dark-theme-for-your-android-app-3daeb264637
Where phrases like "Primary Color Tonal Value 500" can be found. https://miro.medium.com/max/2800/1*OkhjA8Qatt25nOO34wu0Ow.jpeg
So, hoping for a tool that...knows what these guys know.
What I did so far was to simply google image search: dark theme text color > https://www.google.com/search?as_st=y&tbm=isch&as_q=dark+theme+text+color
Got to this: https://miro.medium.com/max/3600/1*upuJdnV8UARih0feJbEteA.png
Now, surely these are useful, but, would love to be able to see ALL the colors that, scientifically / via-vormula, would work.
Sincerely,
OT
I am not sure what else you are after. The Adobe tool is a great resource for picking out color blocking options. I use it myself. Then the tool I suggested takes a background color and generates multiple options for you and allows you to filter for multiple options. However, this type of choice goes beyond the math of what colors will contrast. Take yellow on very dark colors for instance. Yes, they contrast but certain shades and font sizes can be hard on the eyes. What about combinations that are hard for color blind?
If you are interested in diving into the formulas these tools use, the contrast-ratio tool has an MIT license and you can grab the code https://github.com/LeaVerou/contrast-ratio.. If you go to the tool I suggested and view the source, you can find the js file that is used to generate the output. W3C has good information as well https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
Finally, beyond all the science is the art factor. Colors have meaning, colors can also be fashionable. What is trendy today vs 1970? or did you want your look to be like 1970?
If you are interested in diving into the formulas these tools use, the contrast-ratio tool has an MIT license and you can grab the code https://github.com/LeaVerou/contrast-ratio.. If you go to the tool I suggested and view the source, you can find the js file that is used to generate the output. W3C has good information as well https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
Finally, beyond all the science is the art factor. Colors have meaning, colors can also be fashionable. What is trendy today vs 1970? or did you want your look to be like 1970?
ASKER
Hi Scott,
You're right! http://colorsafe.co/ is what I need.
You wrote: "The Adobe tool is a great resource for picking out color blocking options." Seems like there's a steep learning curve to that one. Know of any good intros / videos?
Thanks again!
OT
You're right! http://colorsafe.co/ is what I need.
You wrote: "The Adobe tool is a great resource for picking out color blocking options." Seems like there's a steep learning curve to that one. Know of any good intros / videos?
Thanks again!
OT
ASKER
GREAT resources! Thanks!
For adobe, try the Explore feature. I didn't use your number, just "dark gray" https://color.adobe.com/search?q=dark%20gray You can see some options that others have used. Clicking one example one gives a little more detail.
You can look at trends https://color.adobe.com/trends/Graphic-design There is one with a dark gray, off white, tans and a blue that looks good.
On the create side, https://color.adobe.com/create, you can enter in your color number on the left most box. Then I like to use either complimentary or triad. I only use those as suggestions and adapt to my own liking.
You can look at trends https://color.adobe.com/trends/Graphic-design There is one with a dark gray, off white, tans and a blue that looks good.
On the create side, https://color.adobe.com/create, you can enter in your color number on the left most box. Then I like to use either complimentary or triad. I only use those as suggestions and adapt to my own liking.
Here is another tools that I use for accessibility project
Good constrasts, for web accessibility between two colors
https://contrast-finder.tanaguru.com/
Good constrasts, for web accessibility between two colors
https://contrast-finder.tanaguru.com/
The best way is to compare, you can use this tool to get contrast ratio by comparing 2 colors and you can see the result
https://contrast-ratio.com/#white-on-%23212934
https://contrast-ratio.com/#yello-on-%23212934
as long that the result is the green circle this mean it is good, yellow not so good and red not good)
You can use online tool to get color info and gradient
https://www.color-hex.com/color/212934
or pallette
https://color.adobe.com/create
https://colorhunt.co/
https://www.color-hex.com/color-palettes/