new here first off, so if I need to redirect please let me know kindly.

I am a developer and am currently working on front end stuff, and I need to come up with a set of colors for something I am doing based off of another existing set. The colors I have are:

color: #8a6d3b; //darker brown yellow
background-color: #fcf8e3; //eggshell yellow
border-color: #faebcc; //slightly darker from above^

There exists 4 of these sets of colors, and I want to make my own for use with my web application. I assume though cannot verify that they use some kind of scale to determine these colors. Say they know what they want the background-color to be, and then decide they want the color to be 50 values below that and the border-color to be only 20 values darker than the background. Are there any tools or methods to determine how much variance in the colors there is so if I give a background color, I could then determine the other colors based on the variance?

I'm not versed in the graphic design world/terminology, so hopefully you get the idea of what I am trying to say. Thanks!

  • Cool. I looked over that ( see you also answered it so maybe you can elaborate). If I convert say one of the original colors from above, say background-color to HSB, do I then do the same with my new background-color and the difference between them is the difference between the other parts of the set?
    – erp
    Feb 28 '17 at 15:22
  • If I understand you correctly, then yes :)
    – Vincent
    Feb 28 '17 at 16:23

This is a tricky question, I also sometimes have a hard time to pick a good color palette for a webpage. But some resource that I have found useful are listed below, I hope you find them useful too!

  • AI with Colormind: Tool using AI and large sample of "good" designs/artwork/prints to generate color combinations. Also possible to supply your own colors and generating complementing colors. http://colormind.io/

  • Structured rules: Have not seen any unified rules on how to pick great colors yet. But this page takes a stab at it with clear rules on how to do it and with ok results. Start out with your given colors and see where it takes you. https://tallys.github.io/color-theory/

  • Material colors: Limit the scope of available colors to pick from to a more manageable number. Keeping to combination of them typically yield ok results. https://material.io/guidelines/style/color.html

Not the answer you're looking for? Browse other questions tagged or ask your own question.