Hey all,
I hope the [How To] tag can become a developer-helping-developer thread which can show examples on certain APIs for the betterment of the dev community.
The inaugural thread will be on the Color API (since there’s been a lot of confusion with it), inspired by Cliff’s personal assistance in helping me get it working.
The API
Colors API is here: https://api.guildwars2.com/v1/colors.json
It has a root key of “colors”, and contained within that are keys of color IDs. Plucking out a single color dictionary in the color response looks like this:
691: {
name: "Spring Dew"
cloth: {
brightness: 27
contrast: 1.25
hue: 190
saturation: 0.3125
lightness: 0.644531
}
leather: {
brightness: 27
contrast: 1.28906
hue: 190
saturation: 0.253906
lightness: 0.664063
}
metal: {
brightness: 27
contrast: 1.28906
hue: 190
saturation: 0.234375
lightness: 0.664063
}
}
Materials
Default, cloth, leather, and metal are materials. The dye picker in the game uses the cloth material, so if you plan on doing something similar, use the cloth material (we’ll get to how to produce colors from these values in a second).
Color Components
Each material contains the following: brightness, contrast, hue, saturation, & lightness
brightness:
- A negative or positive number (range unknown)
contrast:
- A value between 0 – 2
hue:
- A value between 0 – 360
saturation:
- A value between 0 – 2
- A value of 1.0 will mean “no change”
lightness:
- A value between 0 – 2
- A value of 1.0 will mean “no change”
The purpose of these components is to shift a reference (base) color. What does that mean? Starting with the base color, we’re going to use these values to perform calculations that will get us the actual color we want.
Base Color
The base color will start in the RGB colorspace. In whatever language, framework, or library you work in, get a color object in the RGB colorspace that has the values:
R:128, G:26, B:26.
The Color Algorithm
I just updated the API to show the base_rgb of colors. I also removed the non-dye colors to make it more uniform and reduce confusion (multiple “black” dyes, etc.).
I also created a javascript version of our internal color shifting algorithm here: http://jsfiddle.net/cliff/jQ8ga/ . This example code uses the sylvester javascript matrix library for math.
The way it works is pretty different than the processes previously described — it calculates a transformation matrix which is then applied to the color in one pass.
I also added pre-calculated RGB values to the color API for those who don’t need to deal with HSL transformations and just want an RGB value. It can also be used to test your color shifting algorithm against ours for correctness.
smiley.1438 has a site with the colors shown correctly: https://chillerlan.net/gw2color.php
