Hi Guys, I need some help. This is a CFML programming issue more than anything, but since I'm deploying this on OpenBD I'm hoping you guys can chime in some best practices in regards to implementation. I'm creating a simple page maker, and at the top of each page will be a small 15px high header with a horizontal navigation ribbon.
As people are creating pages, I want them to be able to enter in a hex value for the header. This way it will match whatever they make on the page. Currently, I have premade color schemes that they can choose from a drop down, but this is limited to a few colors and I'd rather give users the freedom. The downside to this is that in choosing the header color, I need to either allow users to pick the color of the text in the header, or pick it automatically. I can't let users pick the text color because they could just match it to the header background and make it invisible. So my only option here is to pick the text color automatically. At minimum, I need to derive whether the font will be black/white with a supplied value. (light/dark). I'd prefer to pick a better color scheme than just white/black but I need to get this working and deciding whether black or white is the best font option is good enough for now. I would also prefer to do this server-side, not via javascript. Here's a great article explaining my issue. http://particletree.com/notebook/calculating-color-contrast-for-legible-text/ I read on another thread what seems to be a cut and dry approach if green value >= 128 set opposite green value to 0 if red value >= 128 set opposite red value to 0 if blue value >=128 set opposite blue value to 0 if green value < 128 set opposite green value to 255 if red value < 128 set opposite red value to 255 if blue value < 128 set opposite blue value to 255 But I'm not sure how to get RGB value from HEX. And i'm not sure if this is the best way to go about it either. Here's another thread, but this is using Javascript http://stackoverflow.com/questions/1664140/js-function-to-calculate-complementary-colour And another one, but using C# http://stackoverflow.com/questions/1855884/determine-font-color-based-on-background-color Here's what I have so far. This basically looks to see if a new color has been picked, and if so, generate a small bit of CSS that will overwrite the default CSS (which is why only colors are defined). I plan to create a .cfm file that will take 1 value (primary) and return a 2nd value (secondary). Secondary will be the color of the text. I'm just not sure on what to actually put in the 'get_contrast_color.cfm" file. <cfif isDefined("form.header")> <cfset primary_color = "#form.header#"> <cfset secondary_color = ""> <cfinclude template="/www/admin/get_contrast_color.cfm"> <CFOUTPUT> <style> ##navbar a {color: ###secondary_color#;} ##navbar li {border-right: 1px solid ###secondary_color#;} ul##navbar {background: ###primary_color#;} </style> </CFOUTPUT> -- online documentation: http://openbd.org/manual/ google+ hints/tips: https://plus.google.com/115990347459711259462 http://groups.google.com/group/openbd?hl=en
