manipulating hex values

Discussion in 'ASP .Net' started by darrel, Mar 1, 2006.

  1. darrel

    darrel Guest

    (apologies if I've asked this before in here...I thought I had, but can't
    seem to find my original post).

    I'm trying to automate the process of picking some colors. I want to select
    one color, then programtically generate some different values of the same
    color...both lighter and darker.

    I'd like to start and end with a hex value.

    Can that be done in VB.net? It looks like I can, but the hex values I see in
    examples don't quite match the typical hex notation of color values in CSS.

    For instance, I'd like to take this:

    #6699cc

    Split it into 3 values (easy enough) and convert to a percentage value (not
    sure on that step, but basically 'hex converted to base 10/255'):

    66 = .4
    99 = .6
    cc = .8

    Then do some math on each (like multiply by 1.2 to make a ligher color) and
    then convert back to hex.

    It looks like hex is a type of LONG, but I'm not exactly sure how to
    translate between the two. Is ctype the answer?

    -Darrel
    darrel, Mar 1, 2006
    #1
    1. Advertising

  2. Hi darrell,

    Use the Int32.Parse(String, System.Globalization.NumberStyles) overload to
    parse the string, and perform math on it. Then use the
    Int32.ToString(String) method to translate it back. Example:

    string color = "#6699cc";
    int r, g, b;
    double rr, gg, bb;

    // Parse string to Int32 values
    r = Int32.Parse(color.Substring(1, 2),
    System.Globalization.NumberStyles.AllowHexSpecifier);
    g = Int32.Parse(color.Substring(3, 2),
    System.Globalization.NumberStyles.AllowHexSpecifier);
    b = Int32.Parse(color.Substring(5, 2),
    System.Globalization.NumberStyles.AllowHexSpecifier);

    rr = (double)r/255D;
    gg = (double)g/255D;
    bb = (double)b/255D;

    // perform some math on the percentages, then convert back

    r = (int)(rr * 255D);
    g = (int)(gg * 255D);
    b = (int)(bb * 255D);

    color = "#" + r.ToString("X2") + g.ToString("X2") + b.ToString("X2");

    --
    HTH,

    Kevin Spencer
    Microsoft MVP
    ..Net Developer
    A brute awe as you,
    a Metallic hag entity, eat us.


    "darrel" <> wrote in message
    news:%23%...
    > (apologies if I've asked this before in here...I thought I had, but can't
    > seem to find my original post).
    >
    > I'm trying to automate the process of picking some colors. I want to
    > select one color, then programtically generate some different values of
    > the same color...both lighter and darker.
    >
    > I'd like to start and end with a hex value.
    >
    > Can that be done in VB.net? It looks like I can, but the hex values I see
    > in examples don't quite match the typical hex notation of color values in
    > CSS.
    >
    > For instance, I'd like to take this:
    >
    > #6699cc
    >
    > Split it into 3 values (easy enough) and convert to a percentage value
    > (not sure on that step, but basically 'hex converted to base 10/255'):
    >
    > 66 = .4
    > 99 = .6
    > cc = .8
    >
    > Then do some math on each (like multiply by 1.2 to make a ligher color)
    > and then convert back to hex.
    >
    > It looks like hex is a type of LONG, but I'm not exactly sure how to
    > translate between the two. Is ctype the answer?
    >
    > -Darrel
    >
    >
    >
    Kevin Spencer, Mar 2, 2006
    #2
    1. Advertising

  3. darrel

    darrel Guest

    > Use the Int32.Parse(String, System.Globalization.NumberStyles) overload to
    > parse the string, and perform math on it. Then use the
    > Int32.ToString(String) method to translate it back. Example:


    Kevin:

    Excellent! That worked wonderfully.

    Alas, I'm finding that subtle color shifting really isn't best handled by
    simple math. Looks like I'm going to want to adjust each shade differently
    depending on the source file.

    So, seemed great in concept, but not so great in practice.

    However, I now have a nice script for future reference. Thanks!

    -Darrel
    darrel, Mar 2, 2006
    #3
  4. Hi Darrell,

    Bob Powell has some nice code samples for modifying colors. Check out:
    http://www.bobpowell.net/gdiplus_faq.htm

    --
    HTH,

    Kevin Spencer
    Microsoft MVP
    ..Net Developer
    A brute awe as you,
    a Metallic hag entity, eat us.


    "darrel" <> wrote in message
    news:Ot$...
    >> Use the Int32.Parse(String, System.Globalization.NumberStyles) overload
    >> to parse the string, and perform math on it. Then use the
    >> Int32.ToString(String) method to translate it back. Example:

    >
    > Kevin:
    >
    > Excellent! That worked wonderfully.
    >
    > Alas, I'm finding that subtle color shifting really isn't best handled by
    > simple math. Looks like I'm going to want to adjust each shade differently
    > depending on the source file.
    >
    > So, seemed great in concept, but not so great in practice.
    >
    > However, I now have a nice script for future reference. Thanks!
    >
    > -Darrel
    >
    Kevin Spencer, Mar 2, 2006
    #4
  5. darrel

    darrel Guest

    > Bob Powell has some nice code samples for modifying colors. Check out:
    > http://www.bobpowell.net/gdiplus_faq.htm


    Thanks, Kevin.

    I actually got things working based on your sample. The issue was that I was
    incrementing each color channel equally, when I really needed to increase
    (or decrease) each channel using an equal percentage.

    Here's what I ended up with:

    =====================================
    'this particular example creates 3 value variations from one initial color
    input

    dim siteColor1 as string = "cd7f32"
    dim siteColor2 as string
    dim siteColor3 as string
    dim siteColor4 as string

    Dim loopCount As Integer

    'for the original hex values
    Dim r As Integer
    Dim g As Integer
    Dim b As Integer

    'for the converted to decimal values (one for each color variation)
    Dim rr(3) As Double
    Dim gg(3) As Double
    Dim bb(3) As Double

    ' Parse string to Int32 values
    r = Int32.Parse(siteColor1.Substring(0, 2),
    System.Globalization.NumberStyles.AllowHexSpecifier)
    g = Int32.Parse(siteColor1.Substring(2, 2),
    System.Globalization.NumberStyles.AllowHexSpecifier)
    b = Int32.Parse(siteColor1.Substring(4, 2),
    System.Globalization.NumberStyles.AllowHexSpecifier)

    'convert to decimal
    loopCount = 0
    While loopCount < 4
    rr(loopCount) = CType(r, Double) / 255D
    gg(loopCount) = CType(g, Double) / 255D
    bb(loopCount) = CType(b, Double) / 255D
    loopCount = loopCount + 1
    End While

    'now the colors are in decimal format
    Dim colorMultiplier(3) As Decimal

    'lighten or darken each color.
    'positive decimals up to 1 = ligher (0-100%)
    'negative numbers down to -1 = darker (0-100%)

    colorMultiplier(0) = 0
    colorMultiplier(1) = .7
    colorMultiplier(2) = .6
    colorMultiplier(3) = -.8

    'multiply everything
    loopCount = 0
    While loopCount < 4
    If colorMultiplier(loopCount) > 0 Then
    'lighten color
    rr(loopCount) = rr(loopCount) + ((1 - rr(loopCount)) *
    colorMultiplier(loopCount))
    gg(loopCount) = gg(loopCount) + ((1 - gg(loopCount)) *
    colorMultiplier(loopCount))
    bb(loopCount) = bb(loopCount) + ((1 - bb(loopCount)) *
    colorMultiplier(loopCount))
    ElseIf colorMultiplier(loopCount) < 0 Then
    'darken color
    rr(loopCount) = rr(loopCount) + (rr(loopCount) *
    colorMultiplier(loopCount))
    gg(loopCount) = gg(loopCount) + (gg(loopCount) *
    colorMultiplier(loopCount))
    bb(loopCount) = bb(loopCount) + (bb(loopCount) *
    colorMultiplier(loopCount))
    Else
    'do nothing, as multiplier = 0 which means keep color as-is.
    End If
    loopCount = loopCount + 1
    End While

    'convert back to hex and create the color variables
    r = CType(rr(1) * 255D, Integer)
    g = CType(gg(1) * 255D, Integer)
    b = CType(bb(1) * 255D, Integer)
    siteColor2 = r.ToString("X2") + g.ToString("X2") + b.ToString("X2")

    r = CType(rr(2) * 255D, Integer)
    g = CType(gg(2) * 255D, Integer)
    b = CType(bb(2) * 255D, Integer)
    siteColor3 = r.ToString("X2") + g.ToString("X2") + b.ToString("X2")

    r = CType(rr(3) * 255D, Integer)
    g = CType(gg(3) * 255D, Integer)
    b = CType(bb(3) * 255D, Integer)
    siteColor4 = r.ToString("X2") + g.ToString("X2") + b.ToString("X2")
    =====================================

    Thanks for the help!

    -Darrel
    darrel, Mar 3, 2006
    #5
  6. > I actually got things working based on your sample. The issue was that I
    > was incrementing each color channel equally, when I really needed to
    > increase (or decrease) each channel using an equal percentage.


    Yup. I believe Bob Powell talks about the difference in luminosity of the 3
    values. At least I read it somewhere....

    Great work, darrel!

    --
    HTH,

    Kevin Spencer
    Microsoft MVP
    ..Net Developer

    Presuming that God is "only an idea" -
    Ideas exist.
    Therefore, God exists.

    "darrel" <> wrote in message
    news:...
    >> Bob Powell has some nice code samples for modifying colors. Check out:
    >> http://www.bobpowell.net/gdiplus_faq.htm

    >
    > Thanks, Kevin.
    >
    > I actually got things working based on your sample. The issue was that I
    > was incrementing each color channel equally, when I really needed to
    > increase (or decrease) each channel using an equal percentage.
    >
    > Here's what I ended up with:
    >
    > =====================================
    > 'this particular example creates 3 value variations from one initial color
    > input
    >
    > dim siteColor1 as string = "cd7f32"
    > dim siteColor2 as string
    > dim siteColor3 as string
    > dim siteColor4 as string
    >
    > Dim loopCount As Integer
    >
    > 'for the original hex values
    > Dim r As Integer
    > Dim g As Integer
    > Dim b As Integer
    >
    > 'for the converted to decimal values (one for each color variation)
    > Dim rr(3) As Double
    > Dim gg(3) As Double
    > Dim bb(3) As Double
    >
    > ' Parse string to Int32 values
    > r = Int32.Parse(siteColor1.Substring(0, 2),
    > System.Globalization.NumberStyles.AllowHexSpecifier)
    > g = Int32.Parse(siteColor1.Substring(2, 2),
    > System.Globalization.NumberStyles.AllowHexSpecifier)
    > b = Int32.Parse(siteColor1.Substring(4, 2),
    > System.Globalization.NumberStyles.AllowHexSpecifier)
    >
    > 'convert to decimal
    > loopCount = 0
    > While loopCount < 4
    > rr(loopCount) = CType(r, Double) / 255D
    > gg(loopCount) = CType(g, Double) / 255D
    > bb(loopCount) = CType(b, Double) / 255D
    > loopCount = loopCount + 1
    > End While
    >
    > 'now the colors are in decimal format
    > Dim colorMultiplier(3) As Decimal
    >
    > 'lighten or darken each color.
    > 'positive decimals up to 1 = ligher (0-100%)
    > 'negative numbers down to -1 = darker (0-100%)
    >
    > colorMultiplier(0) = 0
    > colorMultiplier(1) = .7
    > colorMultiplier(2) = .6
    > colorMultiplier(3) = -.8
    >
    > 'multiply everything
    > loopCount = 0
    > While loopCount < 4
    > If colorMultiplier(loopCount) > 0 Then
    > 'lighten color
    > rr(loopCount) = rr(loopCount) + ((1 - rr(loopCount)) *
    > colorMultiplier(loopCount))
    > gg(loopCount) = gg(loopCount) + ((1 - gg(loopCount)) *
    > colorMultiplier(loopCount))
    > bb(loopCount) = bb(loopCount) + ((1 - bb(loopCount)) *
    > colorMultiplier(loopCount))
    > ElseIf colorMultiplier(loopCount) < 0 Then
    > 'darken color
    > rr(loopCount) = rr(loopCount) + (rr(loopCount) *
    > colorMultiplier(loopCount))
    > gg(loopCount) = gg(loopCount) + (gg(loopCount) *
    > colorMultiplier(loopCount))
    > bb(loopCount) = bb(loopCount) + (bb(loopCount) *
    > colorMultiplier(loopCount))
    > Else
    > 'do nothing, as multiplier = 0 which means keep color as-is.
    > End If
    > loopCount = loopCount + 1
    > End While
    >
    > 'convert back to hex and create the color variables
    > r = CType(rr(1) * 255D, Integer)
    > g = CType(gg(1) * 255D, Integer)
    > b = CType(bb(1) * 255D, Integer)
    > siteColor2 = r.ToString("X2") + g.ToString("X2") + b.ToString("X2")
    >
    > r = CType(rr(2) * 255D, Integer)
    > g = CType(gg(2) * 255D, Integer)
    > b = CType(bb(2) * 255D, Integer)
    > siteColor3 = r.ToString("X2") + g.ToString("X2") + b.ToString("X2")
    >
    > r = CType(rr(3) * 255D, Integer)
    > g = CType(gg(3) * 255D, Integer)
    > b = CType(bb(3) * 255D, Integer)
    > siteColor4 = r.ToString("X2") + g.ToString("X2") + b.ToString("X2")
    > =====================================
    >
    > Thanks for the help!
    >
    > -Darrel
    >
    >
    >
    >
    Kevin Spencer, Mar 3, 2006
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. darrel

    manipulating hex in ASP.net

    darrel, Oct 6, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    2,692
    S. Justin Gengo
    Oct 6, 2005
  2. Replies:
    10
    Views:
    6,135
    Neredbojias
    Aug 19, 2005
  3. Bengt Richter
    Replies:
    6
    Views:
    448
    Juha Autero
    Aug 19, 2003
  4. Stephen Cattaneo

    manipulating hex values

    Stephen Cattaneo, Apr 1, 2008, in forum: Python
    Replies:
    0
    Views:
    275
    Stephen Cattaneo
    Apr 1, 2008
  5. Stephen Cattaneo

    Re: Re: manipulating hex values

    Stephen Cattaneo, Apr 1, 2008, in forum: Python
    Replies:
    1
    Views:
    538
    Stephen Cattaneo
    Apr 3, 2008
Loading...

Share This Page