Finding complementary and contrasting colors using ASP

I need help!

[dataguy]

I've been working 2 days to find a way to take a color and convert it to a contrasting color automatically, and so far I've accomplished squat.

I have a web app that is served remotely and lets the remote webmaster specify a background color and I need to automatically determince an appropriate forground color which can be used for text.

For example, if the webmaster specifies #FFFFFF for the background color, the asp page should decide something like #000000 for a good color to use to display text.

Any suggestions?

[Easy_Coder]

have you tried a translation table?

load all of the colors into a table then then assign an opposite color that makes sense to a human in that table? You'll have to load it once but after that it should be fine...

then just have your app go to the db for the compliment.

actual_color ¦ compliment_color
green ¦ white

[dataguy]

have you tried a translation table?

Well, looking up the color in a table is easy enough, but where would I get the data for the table? 000000 - FFFFFF is 16 million colors, though they could probably be rounded down to 255 different colors I still wouldn't know where to start finding good contrasts, besides doing it manually. I'll have to think that over..

[Easy_Coder]

Yeah I would just load the 216 web colors as the default... then turn it over to your users and let them maintain it going forward by adding their own combinations via a color picker or something.

[drhowarddrfine]

"web colors" are dead.

[drhowarddrfine]

You'd have to do a bit of thinking about this, something I loathe to do, but if your starting color was red, #FF0000, then it's complement would be between green and blue, #00FFFF. As red decreased in intensity, so would the green/blue color. Now, what if you had #003366 and you needed to find it's complement. Is it #336600 by shifting? But that doesn't work in the first example unless you carry the most significant around.

Hmmm. I just don't feel like thinking about this right now.

[emsaw]

dataguy,
here's an example in classic ASP . You should be able to convert the relevant bits to what you need. I can't take much credit for most of the functions used, as they are mainly cut-n-paste from various places, but the logic to get from a to b was mine :)

usage is: /ColorContrast.asp?oColor=3399FF

There is NO error checking.. I'll leave that to you.

------ColorContrast.asp--------------------
<%@ Language="VBScript" %>
<% Option Explicit %>
<%
dim originalColor
dim oppositeColor
originalColor = "0000FF"
If(Len(Request.QueryString("oColor")) > 0 ) Then
originalColor = Request.QueryString("oColor")
End If
Response.Write "Original Color: " & originalColor & "<br>"
oppositeColor = GetOppositeHexValue(originalColor)
Response.Write "Opposite Color: " & oppositecolor
Function GetOppositeHexValue(color)
dim part1, part2, part3, part4, part5, part6
part1 = Mid(color, 1,1)
part2 = Mid(color, 2,1)
part3 = Mid(color, 3,1)
part4 = Mid(color, 4,1)
part5 = Mid(color, 5,1)
part6 = Mid(color, 6,1)
part1 = Hex(BinToDec(FlipBits(DecToBin(HexToDec(part1)))))
part2 = Hex(BinToDec(FlipBits(DecToBin(HexToDec(part2)))))
part3 = Hex(BinToDec(FlipBits(DecToBin(HexToDec(part3)))))
part4 = Hex(BinToDec(FlipBits(DecToBin(HexToDec(part4)))))
part5 = Hex(BinToDec(FlipBits(DecToBin(HexToDec(part5)))))
part6 = Hex(BinToDec(FlipBits(DecToBin(HexToDec(part6)))))
GetOppositeHexValue = part1 & part2 & part3 & part4 & part5 & part6
End Function
Function FlipBits(num)
Dim out, x
out = ""
For x = 1 to Len(num)
If Mid(num, x, 1) = 0 Then
out = out & 1
Else
out = out & 0
End If
Next
FlipBits = out
End Function
Function DecToBin(ByVal d)
Dim st
st = ""
Do While d > 0
If d Mod 2 > 0 Then
st = "1" & st
Else
st = "0" & st
End If
d = Int(d / 2)
Loop
DecToBin = Right("0000" & st, 4)
End Function
Function HexToDec(strHex)
 dim lngResult
 dim intIndex
 dim strDigit
 dim intDigit
 dim intValue
 lngResult = 0
 for intIndex = len(strHex) to 1 step -1
 strDigit = mid(strHex, intIndex, 1)
 intDigit = instr("0123456789ABCDEF", ucase(strDigit))-1
 if intDigit >= 0 then
  intValue = intDigit * (16 ^ (len(strHex)-intIndex))
  lngResult = lngResult + intValue
 else
  lngResult = 0
  intIndex = 0 ' stop the loop
 end if
 next
 HexToDec = lngResult
End Function
Function BinToDec(strBin)
 dim lngResult
 dim intIndex
 dim strDigit
 lngResult = 0
 for intIndex = len(strBin) to 1 step -1
 strDigit = mid(strBin, intIndex, 1)
 select case strDigit
  case "0"
  ' do nothing
  case "1"
  lngResult = lngResult + (2 ^ (len(strBin)-intIndex))
  case else
  ' invalid binary digit, so the whole thing is invalid
  lngResult = 0
  intIndex = 0 ' stop the loop
 end select
 next
 BinToDec = lngResult
End Function
%>
<html>
<head>
<title>Opposite Colors</title>
</head>
<body>
<table>
<tr>
<td bgcolor="<% = "#" & originalColor %>">
<font size="5" color="<% = "#" & oppositeColor %>">original</font>
</td>
</tr>
<tr>
<td bgcolor="<% = "#" & oppositeColor %>">
<font size="5" color="<% = "#" & originalColor %>">opposite</font>
</td>
</tr>
</table>
</body>
</html>

------------------------------------------------

HTH,

Mark

[aspdaddy]

What is the opposite of mid-gray?

[dataguy]

What is the opposite of mid-gray?

Well, if you consider mid gray to be C0C0C0 then this algo says that 3F3F3F is the opposite.

Maybe 'opposite' isn't the best term, but these two colors work well together.

Thanks emsaw, this fits the bill perfectly!

[Easy_Coder]

Maybe 'opposite' isn't the best term

how `bout 'contrast'?

[emsaw]

Dataguy, glad to help.
I feel like I am rarely able to help, since there are SO MANY knowledgeable persons that contribute here!

Though this does fall apart (as ASPDaddy mentioned)when converging toward the median values... like #787878, which maps out to #878787... the two colors are still distinguishable, but not really contrasting.. perhaps as was suggested earlier, a color shift in addition to this 'bit-flipping' would remedy this ... or you could simply disallow a certain range of values in the mid range...

Mark