Settings UI Guidelines -- Border 20% darker

Question

The UI Guidelines for the Settings Charm specify that the heading background should be the same as the app tile background, and that the Border should be "20% darker". Given that Win8 doesn't support HSV color specifications, how does one determine "20% darker" for an RGB value? I can go into Photoshop and pick a color that looks about that, but there's no way to calculate it, is there?

---

Rebecca M. Riordan

Answer 1

Hi Rebecca,

I did some search and http://www.pvladov.com/2012/09/make-color-lighter-or-darker.html shares some formulas to change the brightness of the color.

    if (correctionFactor < 0)
    {
        correctionFactor = 1 + correctionFactor;
        red *= correctionFactor;
        green *= correctionFactor;
        blue *= correctionFactor;
    }
    else
    {
        red = (255 - red) * correctionFactor + red;
        green = (255 - green) * correctionFactor + green;
        blue = (255 - blue) * correctionFactor + blue;
    }

Also find a quick tool to pick the color without Photoshop, http://www.webappers.com/2010/04/17/helps-web-designers-find-lighter-darker-colors/ .

This response contains a reference to a third party World Wide Web site. Microsoft is providing this information as a convenience to you. Microsoft does not control these sites and has not tested any software or information found on these sites; therefore, Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. There are inherent dangers in the use of any software found on the Internet, and Microsoft cautions you to make sure that you completely understand the risk before retrieving any software from the Internet.

---

Min Zhu
MSDN Community Support | Feedback to us
Develop and promote your apps in Windows Store
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 2

Interesting. I would have sworn that algorithm adjusted saturation, not value, but I just tested it with an HSV widget and it does return the right values. Thanks. (But I'll probably still do it by eye, lol.)

---

Rebecca M. Riordan