return colors as array instead of object for api calls about color-names HOT 12 CLOSED

@ctf0 thanks a lot for reporting this.

I thought it was practical to have an object, because it would be quicker to get your color back. (Also avoid returning the same color twice). But I guess some standards will not heart ;)

I'm on it

from color-names.

@ctf0 by the way your function would look something like that:

https://color-names.herokuapp.com/v1/${['#F44336', '#FFEBEE', '#FFCDD2', '#EF9A9A'].join(',').replace(/#/g, '')}

from color-names.

@ctf0 its still tinycolor, you have to chain it with .toHex(); tinycolor.mix('#f03', '#5c2', 50).toHex()

from color-names.

@meodai this is a different issue but regarding the function helper

Updated

i was thinking of doing something similar to how tinycolor work, so instead of
https://codepen.io/ctf0/pen/BwLezW

let list = raw.map((el)=>{
    return this.tc(el).toHex()
})

const url = "https://color-names.herokuapp.com/v1/" + list.join(',')
const vm = this
const xhttp = new XMLHttpRequest()

xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
        return vm.colorsNames = JSON.parse(this.response).colors
    }
}
xhttp.open("GET", url, true)
xhttp.send()

we do

colorNames(e).name // "aloha"
// or
colorNames(list).name // ['aloha', 'sunshine', etc...]

which will make the ajax call internally and return the response.

now you can simply have 2 copies for the script

• one as a helper which does nothing unless called "used directly in browser"
• another that makes an extra call to the api and save the data to a file "when installed with npm"

now you maintain only one point for serving data https://color-names.herokuapp.com/v1/ and no need for google sheet, nor any of the cdn files.

from color-names.

@ctf0 I don't understand your request.

Your example does not work because the tc function (witch I presume is tinycolor) does not return anything you could use as a key for the colors object (It returns a bunch of methods in an object). you would have to the toHex() to use it as a key.

Please help me understand your request.

from color-names.

its okay, already fixed it.

so what i mean is

atm in order for the user to consume the api, he have to setup an ajax request & make sure the list sent to the request is color codes without the # , right ?

but what if we wrapped that in a script so instead of each time the user doing that above, now all he have to do is simply call

var list = ['#F44336', '#FFEBEE', '#FFCDD2', '#EF9A9A']
colorNames(list)

now internally , that colorNames function will take care of

• cleanup the color codes and make sure its valid for the api call
• making the ajax request to the api endpoint
• return the data

the good thing about this, is whether

• you are following the json standards or not "like b4"
• changed the api endpoint ex.v1 to v2
• decided that now we can allow colors with # or whatever else you wanted

the user experience doesnt change , u still use the package through a one unified point.

from color-names.

ok so first of all the return is now an array. Make sure to use update you pen (Since the API is super new and your the only one using it, its still V1 ;) ):

{
"colors": [
{
"hex": "#212121",
"name": "Lead",
"rgb": {
"r": 33,
"g": 33,
"b": 33
},
"requestedHex": "#212121",
"distance": 0
},
{
"hex": "#262335",
"name": "Cold Steel",
"rgb": {
"r": 38,
"g": 35,
"b": 53
},
"requestedHex": "#232332",
"distance": 4.242640687119285
},
{
"hex": "#213631",
"name": "Pine Grove",
"rgb": {
"r": 33,
"g": 54,
"b": 49
},
"requestedHex": "#233",
"distance": 61.61980201201558
}
]
}

second. I think i get your 2. request. But you should a) do an other issue with it. Because those two requests are not directly related b) create a pull request so I get what you are saying? I don't want to provide the tools to get the colors, just the list of colors. So I am not tooo keen on maintaining an additional function. But I am happy to link to your repository if you should build a function like that.

from color-names.

thanx for the update, its okay np i understand.

from color-names.

@meodai btw, do you any code/api for merging/blending colors ?

from color-names.

@ctf0 since you are already using tinycolor you can mix: tinycolor.mix('#f03', '#5c2', amount = 50)

from color-names.

i have already tried but it gives strange output, so using

tinycolor.mix('#f03', '#5c2', 50)

return

{ "_originalInput": { "r": 170, "g": 102, "b": 42.5, "a": 1 }, "_r": 170, "_g": 102, "_b": 42.5, "_a": 1, "_roundA": 1, "_format": "rgb", "_ok": true, "_tc_id": 2 }

from color-names.

focken awesome, many thanx 🥇

from color-names.