Link to home
Start Free TrialLog in
Avatar of 995commerce
995commerce

asked on

sorting an array of hex colors

Hi,

does anyone have a function I could use to sort an array of hex colors?

let me be more specific.

as it is the string array looks like this: "808080|525252|D6D6D6|E7EBEB|d73929" for example.

surely we can just use split to convert this to an array.

once an array I hope to find a function that would sort the array of these values, something like from darkest to lightest if at all possible?

TIA
Avatar of flow79
flow79
Flag of United States of America image

http://www.aspfaqs.com/aspfaqs/ShowFAQ.asp?FAQID=83

the above is good tutorial on how to sort using ASP
ASKER CERTIFIED SOLUTION
Avatar of dsacker
dsacker
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
One correction:

Change:

    For ndx1 = 1 To (UBound(strArray) - 1)

To:

    For ndx1 = 0 To (UBound(strArray) - 1)
dsacker,

ASP only supports VBScript, which does not allow datatyping and such.

here is a working version of your script that will actually work on the web with ASP

<%
            Dim ndx1
    Dim ndx2
    Dim strArray
    Dim strHold

    strArray = Split("808080|525252|D6D6D6|E7EBEB|D73929", "|")
    For ndx1 = 1 To (UBound(strArray) - 1)
        For ndx2 = (ndx1 + 1) To UBound(strArray)
            If strArray(ndx2) < strArray(ndx1) Then
               strHold = strArray(ndx1)
               strArray(ndx1) = strArray(ndx2)
               strArray(ndx2) = strHold
            End If
        Next
    Next
            response.write strArray(0) &"<br>"
            response.write strArray(1) &"<br>"
            response.write strArray(2) &"<br>"
            response.write strArray(3) &"<br>"
            response.write strArray(4) &"<br>"
%>
here's an even better representation of it (going black to gray to white)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>
<body>
<%
            Dim ndx1
    Dim ndx2
    Dim strArray
    Dim strHold

    strArray = Split("000000|999999|cccccc|666666|ffffff", "|")
    For ndx1 = 1 To (UBound(strArray) - 1)
        For ndx2 = (ndx1 + 1) To UBound(strArray)
            If strArray(ndx2) < strArray(ndx1) Then
               strHold = strArray(ndx1)
               strArray(ndx1) = strArray(ndx2)
               strArray(ndx2) = strHold
            End If
        Next
    Next            
%>
<div style="background-color:<%response.write strArray(0)%>;width:50px;height:50px;border:1px solid #000000;">#<%response.write strArray(0)%></div>
<div style="background-color:<%response.write strArray(1)%>;width:50px;height:50px;border:1px solid #000000;">#<%response.write strArray(1)%></div>
<div style="background-color:<%response.write strArray(2)%>;width:50px;height:50px;border:1px solid #000000;">#<%response.write strArray(2)%></div>
<div style="background-color:<%response.write strArray(3)%>;width:50px;height:50px;border:1px solid #000000;">#<%response.write strArray(3)%></div>
<div style="background-color:<%response.write strArray(4)%>;width:50px;height:50px;border:1px solid #000000;">#<%response.write strArray(4)%></div>

</body>
</html>
Avatar of 995commerce
995commerce

ASKER

ok got a little problem, it doesn't sort all the colors, skips the first....

http://www.haroldauto.com/edit:2:43t243

scroll down, all the colors are sorted with the function:

function sortharray(str1)
 strArray = Split(str1, "|")
   For ndx1 = 1 To (UBound(strArray) - 1)
       For ndx2 = (ndx1 + 1) To UBound(strArray)
           If strArray(ndx2) < strArray(ndx1) Then
              strHold = strArray(ndx1)
              strArray(ndx1) = strArray(ndx2)
              strArray(ndx2) = strHold
           End If
       Next
   Next
For xx = 0 To UBound(strArray)
if xx = 0 then
tmpstrh = strArray(xx)
else
tmpstrh = tmpstrh & "|" & strArray(xx)
end if
next
sortharray = tmpstrh
end function


I think the -1 is messing it up, any way around that?
Did you notice my correction posted above?
Change:

    For ndx1 = 1 To (UBound(strArray) - 1)

To:

    For ndx1 = 0 To (UBound(strArray) - 1)
sorry
missed it
You definitely want to keep the -1 ... that allows the ndx2 to compare everything to the end of your array.
well, you can see for yourself, all the themes have this function applied, some look pretty weird =)\

there might be no way to fix that right?
I can actually see the gradient change to lighter, although in some hex schemes, you're values bring in enough other colors to fool the sort.

If you don't mind, why not go into something like MS Paint, etc., where you can go to the color palette, then select a particular color. Then use the sliding bar to get a range of values. You'll be getting decimal values which will need to be converted to hex (unless you have a palette editor that already gives you that).

Select about 5-6 equal places in the range and list the hex values. It may be necessary to sort the inner hex values (3rd/4th positions) on some, the far right values (5th/6th positions) on some, etc. You might be able to play with that and begin to see a pattern based on using your various colors.

I haven't done a complete trial-and-error evaluation of the spectrum, but if you have the time, it might be a worthwhile effort.

Make sense?
hehe I got 180 or more color themes there, you think I could tweak them by hand?

this is just to sort them better, there will be next interface were the site owner will be able to customize the selected color theme, move the colors around, save the them and such so this is only an aproximation, I will probably leave it like it is as it does fix a lot of themes that were "upside down"....

thanks for your help!
Well, I took a few minutes, and I think I see the pattern.

If you are starting with a primary green color, then your sort will need to compare the green of the RGB. Likewise with the reds and blues.

Your reds probably sort perfectly, because they're in the right order in the hex RGB (positions 1-2 = red, 3-4 = green, 5-6 = blue). Of course this gets more complicated if you're sorting oranges, browns, etc.

You could set up two temporary variables and move to them a rearrangment of the hex values based on which is your primary color, playing with that for awhile. For instance:

If your primary color is green:

    strTempValue1 = Mid(strArray(ndx1), 3, 2) & Mid(strArray(ndx1), 1, 2) & Mid(strArray(ndx1), 5, 2)
    strTempValue2 = Mid(strArray(ndx2), 3, 2) & Mid(strArray(ndx2), 1, 2) & Mid(strArray(ndx2), 5, 2)

Then compare those two against each other, and swap if necessary. Place the first line right below your "For ndx1", and your second line right below the "For ndx2", then compare if strTempValue2 < strTempValue1, and swap if true.

Obviously for blue, you'd be moving Mid(strArray(ndx1), 5, 2) first. This may improve things, but there will still be come variant color schemes that will fool this.
I will keep these notes in case needed in the future, but for this particular purpose I think we will be fine as is...

thanks!