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
995commerceAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

the above is good tutorial on how to sort using ASP
dsackerContract ERP Admin/ConsultantCommented:
Something like this will split and sort them. You can play around with the colors to see if they are moving from darkest to lightest, and if you don't like the sort, you can add code in the sort routine to compare either the 3rd/4th or 5th/6th positions first.

    Dim ndx1        As Integer
    Dim ndx2        As Integer
    Dim strArray()  As String
    Dim strHold     As String

    strArray = Split(UCase("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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dsackerContract ERP Admin/ConsultantCommented:
One correction:

Change:

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

To:

    For ndx1 = 0 To (UBound(strArray) - 1)
Bootstrap 4: Exploring New Features

Learn how to use and navigate the new features included in Bootstrap 4, the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.

flow79Commented:
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>"
%>
flow79Commented:
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>
995commerceAuthor Commented:
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?
dsackerContract ERP Admin/ConsultantCommented:
Did you notice my correction posted above?
dsackerContract ERP Admin/ConsultantCommented:
Change:

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

To:

    For ndx1 = 0 To (UBound(strArray) - 1)
995commerceAuthor Commented:
sorry
missed it
dsackerContract ERP Admin/ConsultantCommented:
You definitely want to keep the -1 ... that allows the ndx2 to compare everything to the end of your array.
995commerceAuthor Commented:
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?
dsackerContract ERP Admin/ConsultantCommented:
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?
995commerceAuthor Commented:
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!
dsackerContract ERP Admin/ConsultantCommented:
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.
995commerceAuthor Commented:
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!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP

From novice to tech pro — start learning today.