Re: [OT] Round 2: Webpage design and Name That Color!
spir denis.s...@gmail.com wrote in message news:mailman.1875.1298389603.4748.digitalmar...@puremagic.com... On 02/22/2011 03:22 AM, Nick Sabalausky wrote: Nick Sabalauskya@a.a wrote in message news:ijpvpl$2l8u$1...@digitalmars.com... I've been updating the docs for my Goldie project in preparation of a new release, and figured the they looked a bit...sterile, so I've tweaked the CSS a bit. And, well, I think I've stumbled upon a heisencolor...(or a heisenhue, rather) Without reading any replies or cheating by inspecting the pixels in a paint program, take a look at this screenshot: http://www.semitwist.com/download/goldie0.4docBeta.png ...and reply with what color you think the background looks like (the main background, not the sidebar). And whether or not you like it would be helpful, too, of course. And, strange as this may sound, reply again if you end up changing your mind on what color it looks like. Thanks all for the comments! I've made a few more tweaks, put up two sample pages, and would like to get some opinions on if this now looks good or acceptable or bad (and maybe improvement suggestions for any bad votes): http://www.semitwist.com/goldie0.4docBeta2/index.html http://www.semitwist.com/goldie0.4docBeta2/SampleApps/ParseAnything/index.html (Most of the links are broken ATM, I know. And FWIW, beige is what I was trying to go for with the background.) FWIW, the old v0.3 documentation is here: http://www.semitwist.com/goldiedocs/current/Docs/ I want to at least make sure that the 0.4 docs are an improvement on that. [Nick: I think you'd rather provide a valid email and ask people to reply off list. Would be much nicer, I guess. You can write it down like nick at site dot org to avoid spam bots.] I think the intention is good, IIUC, but the choice of colors is not. There are rules and tricks to choose and marry colors but it's a big difficult domain in any case (it's about impossible if you use a color chooser based on HSV instead of HSL, for some reasons.) And there are indeed questions of taste. Just as an example: * main background color less sad (hue=44): #FCE6A9 (or even more rose, hue=33: #FCD7A9) * darken it (L component) for side bar color: #E0CD96 * intensify it (S component) for frame bg color: #FFE28F The contrasts are rather slight, close to minimal; do your own trials. You can also play with main foreground color, giving it the same hue (instead of absolute black): eg #383019. I like to also use a color that constrasts with the hue used everywhere else, for instance for titles and/or frame borders: eg #1F3832. Denis PS: example using such color choosing principles: http://spir.wikidot.com/ Thanks a lot for all the advice :) I've tried your suggestions and I think it does look much nicer: http://www.semitwist.com/goldie0.4docBeta3/index.html http://www.semitwist.com/goldie0.4docBeta3/SampleApps/ParseAnything/index.html I might try playing around with the link foreground colors later if I get a chance. I think one of the things that kept thwarting my attempts is the relativistic nature of color perception. For instance, when I first tried your color suggestions (Beta3 above), it looked very, very orange to me. But then I switched back to my Beta2 and that suddenly looked downright green. Then I looked at your site, which seems fairly rosy, and then back to Beta3 which now looks perfect even though it's the exact same color that seemed very orange after looking at Beta2 first. That effect makes adjusting colors seem annoyingly non-deterministic. Funny thing is, some of those principles you mentioned are things I've been aware of (like different hues of black), but without enough artistic experience, I'll be dammed if I seem to be able to remember to actually *use* half those techniques ;) I'm realizing now that tweaking based on RGB certainly seems to be a bad idea unless you really know what you're doing. HSL is definitely much more natural to deal with, and tends to fit the problem domain better, even though being a long-time low-level coder has managed to train me to automatically think RGB whenever I think color. You do seem to be right about HSV being a pain compared to HSL: I'd been using GIMP's color chooser which is HSV, and the V is a pain when you want to adjust the brightness of a light color without messing with the saturation, too. I don't suppose you know offhand of a good free HSL color chooser on Windows?
Re: [OT] Round 2: Webpage design and Name That Color!
On 02/27/2011 09:21 AM, Nick Sabalausky wrote: spirdenis.s...@gmail.com wrote in message news:mailman.1875.1298389603.4748.digitalmar...@puremagic.com... On 02/22/2011 03:22 AM, Nick Sabalausky wrote: Nick Sabalauskya@a.a wrote in message news:ijpvpl$2l8u$1...@digitalmars.com... I've been updating the docs for my Goldie project in preparation of a new release, and figured the they looked a bit...sterile, so I've tweaked the CSS a bit. And, well, I think I've stumbled upon a heisencolor...(or a heisenhue, rather) Without reading any replies or cheating by inspecting the pixels in a paint program, take a look at this screenshot: http://www.semitwist.com/download/goldie0.4docBeta.png ...and reply with what color you think the background looks like (the main background, not the sidebar). And whether or not you like it would be helpful, too, of course. And, strange as this may sound, reply again if you end up changing your mind on what color it looks like. Thanks all for the comments! I've made a few more tweaks, put up two sample pages, and would like to get some opinions on if this now looks good or acceptable or bad (and maybe improvement suggestions for any bad votes): http://www.semitwist.com/goldie0.4docBeta2/index.html http://www.semitwist.com/goldie0.4docBeta2/SampleApps/ParseAnything/index.html (Most of the links are broken ATM, I know. And FWIW, beige is what I was trying to go for with the background.) FWIW, the old v0.3 documentation is here: http://www.semitwist.com/goldiedocs/current/Docs/ I want to at least make sure that the 0.4 docs are an improvement on that. [Nick: I think you'd rather provide a valid email and ask people to reply off list. Would be much nicer, I guess. You can write it down like nick at sitedot org to avoid spam bots.] I think the intention is good, IIUC, but the choice of colors is not. There are rules and tricks to choose and marry colors but it's a big difficult domain in any case (it's about impossible if you use a color chooser based on HSV instead of HSL, for some reasons.) And there are indeed questions of taste. Just as an example: * main background color less sad (hue=44): #FCE6A9 (or even more rose, hue=33: #FCD7A9) * darken it (L component) for side bar color: #E0CD96 * intensify it (S component) for frame bg color: #FFE28F The contrasts are rather slight, close to minimal; do your own trials. You can also play with main foreground color, giving it the same hue (instead of absolute black): eg #383019. I like to also use a color that constrasts with the hue used everywhere else, for instance for titles and/or frame borders: eg #1F3832. Denis PS: example using such color choosing principles: http://spir.wikidot.com/ Thanks a lot for all the advice :) I've tried your suggestions and I think it does look much nicer: http://www.semitwist.com/goldie0.4docBeta3/index.html http://www.semitwist.com/goldie0.4docBeta3/SampleApps/ParseAnything/index.html I might try playing around with the link foreground colors later if I get a chance. I think one of the things that kept thwarting my attempts is the relativistic nature of color perception. For instance, when I first tried your color suggestions (Beta3 above), it looked very, very orange to me. But then I switched back to my Beta2 and that suddenly looked downright green. Then I looked at your site, which seems fairly rosy, and then back to Beta3 which now looks perfect even though it's the exact same color that seemed very orange after looking at Beta2 first. That effect makes adjusting colors seem annoyingly non-deterministic. Funny thing is, some of those principles you mentioned are things I've been aware of (like different hues of black), but without enough artistic experience, I'll be dammed if I seem to be able to remember to actually *use* half those techniques ;) I'm realizing now that tweaking based on RGB certainly seems to be a bad idea unless you really know what you're doing. HSL is definitely much more natural to deal with, and tends to fit the problem domain better, even though being a long-time low-level coder has managed to train me to automatically think RGB whenever I think color. You do seem to be right about HSV being a pain compared to HSL: I'd been using GIMP's color chooser which is HSV, and the V is a pain when you want to adjust the brightness of a light color without messing with the saturation, too. I don't suppose you know offhand of a good free HSL color chooser on Windows? No, sorry (I have left windows for a long time). You are right about HSV. The point is its V component only covers half range of 'lightness'. Precicely, it covers from black to the maximal 'natural' lightness of the corresponding 'pure' color of the same hue. It may be better when you're dealing with material (substractive) colors, meaning paints. For instance to print it out on paper. Then, the max V component gives the pure color you get out of the paint tube. Maybe it's the
Re: [OT] Round 2: Webpage design and Name That Color!
spir denis.s...@gmail.com wrote in message news:mailman.2005.1298820313.4748.digitalmar...@puremagic.com... You are right about HSV. The point is its V component only covers half range of 'lightness'. Precicely, it covers from black to the maximal 'natural' lightness of the corresponding 'pure' color of the same hue. It may be better when you're dealing with material (substractive) colors, meaning paints. For instance to print it out on paper. Then, the max V component gives the pure color you get out of the paint tube. Maybe it's the reason why older image manipulation software started using HSV; then, the error propagated into newer software (just like in programming languages ;-). But it's easy to get it with HSL as well: just set L to 50%; so, the advantage of HSV with material colors is not that big, I guess. But the drawbacks of HSV are painful: since L only covers half of the lightness range, then the rest must be covered somewhere (to get the whole color space): namely, it is taken by the S component. This means that S, which should intuitively allow setting the saturation (I call that vividness), in fact also takes a part of lightness: when you move the S cursor, you change both saturation lightness! Thus, both S and V are messed up. Worse even, I think (not sure) that V is messed up only on its higher part of its range (since for the lower part ligntness is set separately by V). I have never managed to get an accurate mental model of HSV: what is 'S' in HSV? (answers off list welcome ;-) While the mental model of HSL is obvious, trivial (for me at least). To sum up: use HSL. Yea, exactly the conclusion I've come to. With HSL component scales, it's easier (not easy) to compose nice looking color palettes; especially ones that do not look like a messy (or random) /juxtaposition/ of colors: mainly play with S and/or L. As a side-note, /all/ default syntax-highlighting style sheets I have ever seen are horrible from this point of view ;-) Ie, programmer art. :) I've occasionally given a little bit of thought to a syntax-highlighting system that's based more on color selecting *and* color mixing rather than just color selecting. A problem I've noticed is that there are various orthogonal attributes to highlight on, such as whether or not the text is a keyword and whether or not the text is selected. Under every system I've seen, each combination (and there's an exponential number of combinations) has to be manually chosen, and some combinations end up needing to be omitted (for instance, syntax highlighting often goes away for selected text). But if each attribute could have an associated color equation (like a simplified version of video card blending modes and vertex/pixel shaders, or at the very least, an alpha component), then that could make it easier to accont for more combintions that look better, without exponential blowup in amount of work. For instance, selected text could be specified as 0xFF with 50% alpha instead of just 0x00 background and 0xFF foreground. Or if that caused problems with certain underlying colors, then maybe an alternate blending mode could be chosen or even written.
Re: [OT] Round 2: Webpage design and Name That Color!
Here's a small program to convert HSL to RGB. Usage hsl 60 1 0.5 for example,
where 60 is hue, 1 is saturation and 0.5 is lightness.
import std.stdio;
import std.math;
import std.conv;
struct Color {
ubyte r;
ubyte g;
ubyte b;
ubyte a;
}
Color fromHsl(real h, real s, real l) {
h = h % 360;
real C = (1 - abs(2 * l - 1)) * s;
real hPrime = h / 60;
real X = C * (1 - abs(hPrime % 2 - 1));
real r, g, b;
if(h is real.nan)
r = g = b = 0;
else if (hPrime = 0 hPrime 1) {
r = C;
g = X;
b = 0;
} else if (hPrime = 1 hPrime 2) {
r = X;
g = C;
b = 0;
} else if (hPrime = 2 hPrime 3) {
r = 0;
g = C;
b = X;
} else if (hPrime = 3 hPrime 4) {
r = 0;
g = X;
b = C;
} else if (hPrime = 4 hPrime 5) {
r = X;
g = 0;
b = C;
} else if (hPrime = 5 hPrime 6) {
r = C;
g = 0;
b = X;
}
real m = l - C / 2;
r += m;
g += m;
b += m;
return Color(
cast(ubyte)(r * 255),
cast(ubyte)(g * 255),
cast(ubyte)(b * 255),
255);
}
void main(string[] args) {
auto color = fromHsl(to!real(args[1]), to!real(args[2]),
to!real(args[3]));
writefln(#%02x%02x%02x, color.r, color.g, color.b);
}
Re: [OT] Round 2: Webpage design and Name That Color!
On 2011-02-22 03:22, Nick Sabalausky wrote: Nick Sabalauskya@a.a wrote in message news:ijpvpl$2l8u$1...@digitalmars.com... I've been updating the docs for my Goldie project in preparation of a new release, and figured the they looked a bit...sterile, so I've tweaked the CSS a bit. And, well, I think I've stumbled upon a heisencolor...(or a heisenhue, rather) Without reading any replies or cheating by inspecting the pixels in a paint program, take a look at this screenshot: http://www.semitwist.com/download/goldie0.4docBeta.png ...and reply with what color you think the background looks like (the main background, not the sidebar). And whether or not you like it would be helpful, too, of course. And, strange as this may sound, reply again if you end up changing your mind on what color it looks like. Thanks all for the comments! I've made a few more tweaks, put up two sample pages, and would like to get some opinions on if this now looks good or acceptable or bad (and maybe improvement suggestions for any bad votes): http://www.semitwist.com/goldie0.4docBeta2/index.html http://www.semitwist.com/goldie0.4docBeta2/SampleApps/ParseAnything/index.html The beige and yellow looks horrible. It would be better with just black on white. -- /Jacob Carlborg
Re: [OT] Round 2: Webpage design and Name That Color!
On 02/22/2011 03:22 AM, Nick Sabalausky wrote: Nick Sabalauskya@a.a wrote in message news:ijpvpl$2l8u$1...@digitalmars.com... I've been updating the docs for my Goldie project in preparation of a new release, and figured the they looked a bit...sterile, so I've tweaked the CSS a bit. And, well, I think I've stumbled upon a heisencolor...(or a heisenhue, rather) Without reading any replies or cheating by inspecting the pixels in a paint program, take a look at this screenshot: http://www.semitwist.com/download/goldie0.4docBeta.png ...and reply with what color you think the background looks like (the main background, not the sidebar). And whether or not you like it would be helpful, too, of course. And, strange as this may sound, reply again if you end up changing your mind on what color it looks like. Thanks all for the comments! I've made a few more tweaks, put up two sample pages, and would like to get some opinions on if this now looks good or acceptable or bad (and maybe improvement suggestions for any bad votes): http://www.semitwist.com/goldie0.4docBeta2/index.html http://www.semitwist.com/goldie0.4docBeta2/SampleApps/ParseAnything/index.html (Most of the links are broken ATM, I know. And FWIW, beige is what I was trying to go for with the background.) FWIW, the old v0.3 documentation is here: http://www.semitwist.com/goldiedocs/current/Docs/ I want to at least make sure that the 0.4 docs are an improvement on that. [Nick: I think you'd rather provide a valid email and ask people to reply off list. Would be much nicer, I guess. You can write it down like nick at site dot org to avoid spam bots.] I think the intention is good, IIUC, but the choice of colors is not. There are rules and tricks to choose and marry colors but it's a big difficult domain in any case (it's about impossible if you use a color chooser based on HSV instead of HSL, for some reasons.) And there are indeed questions of taste. Just as an example: * main background color less sad (hue=44): #FCE6A9 (or even more rose, hue=33: #FCD7A9) * darken it (L component) for side bar color: #E0CD96 * intensify it (S component) for frame bg color: #FFE28F The contrasts are rather slight, close to minimal; do your own trials. You can also play with main foreground color, giving it the same hue (instead of absolute black): eg #383019. I like to also use a color that constrasts with the hue used everywhere else, for instance for titles and/or frame borders: eg #1F3832. Denis PS: example using such color choosing principles: http://spir.wikidot.com/ -- _ vita es estrany spir.wikidot.com
Re: [OT] Round 2: Webpage design and Name That Color!
IIRC there was a website where you could get two nicely matching colors for background+foreground by selecting just one color first. I've no idea where exactly I saw that though.
Re: [OT] Round 2: Webpage design and Name That Color!
On Monday 21 February 2011 18:22:01 Nick Sabalausky wrote: Nick Sabalausky a@a.a wrote in message news:ijpvpl$2l8u$1...@digitalmars.com... I've been updating the docs for my Goldie project in preparation of a new release, and figured the they looked a bit...sterile, so I've tweaked the CSS a bit. And, well, I think I've stumbled upon a heisencolor...(or a heisenhue, rather) Without reading any replies or cheating by inspecting the pixels in a paint program, take a look at this screenshot: http://www.semitwist.com/download/goldie0.4docBeta.png ...and reply with what color you think the background looks like (the main background, not the sidebar). And whether or not you like it would be helpful, too, of course. And, strange as this may sound, reply again if you end up changing your mind on what color it looks like. Thanks all for the comments! I've made a few more tweaks, put up two sample pages, and would like to get some opinions on if this now looks good or acceptable or bad (and maybe improvement suggestions for any bad votes): http://www.semitwist.com/goldie0.4docBeta2/index.html acceptable http://www.semitwist.com/goldie0.4docBeta2/SampleApps/ParseAnything/index.h tml bad Overall, I think they both look fine, but I think that the yellow background for the sample command line output looks pretty bad. As bright as white may be, it probably would be a lot better. - Jonathan M Davis
