Colors in .json file

Colors in .json file
0

#1

I am creating a theme file in json and I have certain company colors I must use. I am presented with this code that requires secondary, neutral, and tertiary colors to be defined. I have 4 primary colors I am working with, is there a way to generate these color values based on a single primary hex code?

"interface":{
        "primary":"#00c0e8",  
        "primaryAlt":"#",  
        "primaryAlt2":"#",  
        "primaryAlt3":"#",  
        "primaryAlt4":"#",  
        "primaryContrast":"#",  

        "secondary":"#",  
        "secondaryAlt":"#",  
        "secondaryAlt2":"#",  
        "secondaryAlt3":"#",  
        "secondaryContrast":"#",  

        "neutralPrimary":"#",  
        "neutralPrimaryAlt":"#",  
        "neutralPrimaryAlt2":"#",  
        "neutralPrimaryAlt3":"#",  
        "neutralPrimaryContrast":"#",  

        "neutralSecondary":"#",  
        "neutralSecondaryAlt":"#",  
        "neutralSecondaryAlt2":"#",  
        "neutralSecondaryAlt3":"#",  
        "neutralSecondaryContrast":"#",

#2

Maybe try something like this:
http://www.thecolorapi.com/

With your color: http://www.thecolorapi.com/scheme?hex=00c0e8&format=html

You could use JSON format and get the values you need in your program. A contrived psuedocode example:

const colors = ['#000', '#fff']

async function getColor(color) {
  let res = await fetch(COLOR_API_URI)
  let json = await res.json()

  let alt1 = json.someValue
  let secondary = json.someValue.complement

  return {
    alt1,
    secondary
  }
}

console.log(getColor(colors[0]), getColor(colors[1]))

// TODO: build json file

#3

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#4

If your requirement is only 4 set of colors, make them up on a site like color-hex. Or check your targeted company’s Band Resources page. If you’re asking for an algorithm that do that automatically. Maybe there are written ones post on the web(probably very basic) or even API you can call(like the one post by Isaac). Google it. If there aren’t or calling an API every time is not suited for your case, you need to learn some basic color theory and write one yourself.


#5

excellent, thanx very much, I will give that a shot.


#6

Some very interesting theory in this article, if you want to really dig into colours, hex codes and the relationship between them in using colour theory: