locked
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

    Saturday, March 16, 2013 4:10 PM

Answers

  • 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.

    Monday, March 18, 2013 4:43 AM
    Moderator

All replies

  • 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.

    Monday, March 18, 2013 4:43 AM
    Moderator
  • 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

    Monday, March 18, 2013 12:32 PM