that should be enough colors. damn it.

[kaigou]

ETA: WOAH some of these seem to have gotten thext text colors whacked, probably from when I finally got the link-colors to cascade properly. fixed!

Gradiance Amethyst — Gradiance Amethyst Verso
Gradiance Carmine — Gradiance Carmine Verso
Gradiance Celadon — Gradiance Celadon Verso
Gradiance Cerise — Gradiance Cerise Verso
Gradiance Cerulean — Gradiance Cerulean Verso
Gradiance Cobalt — Gradiance Cobalt Verso
Gradiance Dusk
Gradiance Emerald — Gradiance Emerald Verso
Gradiance Forest — Gradiance Forest Verso
Gradiance Fuschia — Gradiance Fuschia Verso
Gradiance Grayscale — Gradiance Grayscale Verso
Gradiance Halaya Ube — Gradiance Halaya Ube Verso
Gradiance Harlequin — Gradiance Harlequin Verso
Gradiance Heliotrope — Gradiance Heliotrope Verso
Gradiance Indigo — Gradiance Indigo Verso
Gradiance Jade — Gradiance Jade Verso
Gradiance Lemon — Gradiance Lemon Verso
Gradiance Maize — Gradiance Maize Verso
Gradiance Majorelle — Gradiance Majorelle Verso
Gradiance Midday
Gradiance Midnight — Gradiance Midnight Verso
Gradiance Morning
Gradiance Moss — Gradiance Moss Verso
Gradiance Nadeshiko — Gradiance Nadeshiko Verso
Gradiance Ocean — Gradiance Ocean Verso
Gradiance Ochre — Gradiance Ochre Verso
Gradiance Olivine — Gradiance Olivine Verso
Gradiance Peach — Gradiance Peach Verso
Gradiance Pistachio — Gradiance Pistachio Verso
Gradiance Racing — Gradiance Racing Verso
Gradiance Sangria — Gradiance Sangria Verso
Gradiance Sapphire — Gradiance Sapphire Verso
Gradiance Sienna — Gradiance Sienna Verso
Gradiance Sky — Gradiance Sky Verso
Gradiance Slate — Gradiance Slate Verso
Gradiance Spring — Gradiance Spring Verso
Gradiance Storm — Gradiance Storm Verso
Gradiance Thistle — Gradiance Thistle Verso
Gradiance Vermilion — Gradiance Vermilion Verso
Gradiance Viridian — Gradiance Viridian Verso

1. The alt-versions are simply the style inverted to be light-on-dark, so does it make more sense to change "alt" to "rev"? The Ay's say to use REV, so I use REV but not exactly because I are a smart-ass like that.
   
2. There are orphaned styles in there -- morning, dusk, midday, etc -- which don't have reversed styles; they're not single-color gradients. They don't break when reversed, but they can get muddy (in a sense). I was thinking of doing a separate style that wouldn't have reversal, more like LJ's old Disjointed. For now, though, they're listed with the rest.
   
3. Yes, I know full well that I'm totally whacked. Trust me, there's no need to repeat.
   
4. Follow-up on fictional juxtaposition coming some time this evening, probably.
   
5. And then KmO. Really!

Comments

[annotated_em]

Hm. I think "Rev" might work better. Or even "Inverse."

[branchandroot]

Agree with this. "Reversed" or "Inverse".

[kaigou]

I had it as reverse, but wasn't sure if people might think the page was flipped some other way, instead of getting that it's the colors that are reversed. I mean, what's a shorter way to say "dark-on-light" and "light-on-dark"?

[annotated_em]

Decentered? Or maybe that's just my peculiar take on the spatial relationships of the colors in the layout.

[kaigou]

I decided to go with 'verso' partly because it just means flipped (okay, to the left, but still), and partly to screw with the heads of anyone who doesn't know their western historical terminology and/or thinks watching some Romeo running around with a gun qualifies as 'knowing Shakespeare'. Just because I can be ornery like that.

[white_aster]

Shiny! Really shiny! :D Some of the alts, though, are kinda unreadable (not sure if you know this, ignore if you do). Amethyst, Celadon, Heliotrope, Jade, kinda Miaze, Majorelle, Nadeshiko, Ocean, Peach, Sangria, Sky, Spring all have a dark grey text on dark backgrounds, which doesn't work so well.

[kaigou]

Yep, those are the ones that got whacked inadvertently when I managed to fix the a:link color issue. Working on those now, but thanks for the head's up!

All fixed! ...except for the very bottom menu, which insists on being styled like a comment box, and that's REALLY ANNOYING but every time I manage to fix it, I break two other things in the process. Fffffttt.

[white_aster]

Shiny! I really like a lot of the color combinations. :D

[kaigou]

Thanks. *dryly* Doing the colors was actually the easiest part of it.

[ajnabi]

oh, wow.
i am in awe and have no words.
how on earth did you manage to do this many color schemes?!!
now i feel so utterly lazy for taking forever with mine, lol. it doesn't help that i keep changing the basic style, of course...

[kaigou]

YOU ASKED.

I set up an excel spreadsheet, and determined a series of increments for the H-S-V values for each color. Since the hue totals 360', I first tried it with 20' increments, but that ended up with too many too close together. So I did it at 30' increments instead. Then I set the saturation & value (lightness), again going in increments but diagonally, so I'd have a fairly decent separation between light and dark. Each setting on the H thus got three additional series of increments: one where S has a narrow change (from 60-100) and the L has a broad change (0-100), the second shading everything lighter so the S changes from 20-60 while L stays broad at 0-100, and then a third where both S and L change from 0-100, which is basically the same thing as drawing a diagonal line from top-left (lightest no-saturation) to bottom-right (darkest all-saturation) in photoshop. Which sounds really complex but ended up just being a series of rows like so:

        #        H        S        V
color#1
        1        30        25        100
        2        30        30        90
        3        30        35        80
        4        30        40        70
        5        30        45        60
        6        30        50        50
        7        30        55        40
        8        30        60        30
color #2
        1        30        11        90
        2        30        23        79
        3        30        34        68
        4        30        45        56
        5        30        56        45
        6        30        68        34
        7        30        79        23
        8        30        90        11
color #3
        1        30        65        100
        2        30        70        88
        3        30        75        76
        4        30        80        64
        5        30        85        52
        6        30        90        40
        7        30        95        28
        8        30        100        16

Then I set up a series of columns that broke down the HSV-to-RGB conversion formula, because I'm too lazy to do a full formula in excel so I just do a column for each step, easier to troubleshoot. Once I got the values for R, G, and B, it was simple enough to convert those in the final columns into a HEX value. A'course, then -- because even if you int(val) in Excel it still retains the original for math stuff, I just cut & pasted into text-editor, replaced values 10 through 15 with A through F, and removed the line-breaks at the same time, so now I had a series of horizontal rows that look like this:

cordovan        #FFBFBF        #E5A0A0        #CC8484        #B26B6B        #995454        #7F3F3F        #662D2D        #4C1E1E
vermilion        #E5CCCC        #C99B9B        #AD7272        #8E4E4E        #723232        #561B1B        #3A0C0C        #1C0202
carmine        #FF5959        #E04343        #C13030        #A32020        #841313        #660A0A        #470303        #280000

Then I pasted that back into a second worksheet in excel, and added columns for reversal -- that is, these rows were all "N" because they're dark-on-light. I added extra columns at the end for the user-optional settings, which in this case are the page background, the text-area backgrounds, the text-area font-color, and text-area link colors. Those shift slightly based on which color range it is, and again when it's reversed (since flipping the color looks better if the background isn't a pure-white but is the #hex-6 value instead). Those last columns just repeat the values, and since the overall order repeats and increments consistently, I could just copy & paste the three options over & over to the end. Then I took that entire thing, duplicated it, and set its front value to "Y" (for reversed) and then re-sorted the hex# values to be rising instead of falling.

And because I am supremely lazy (no, REALLY), I also duplicated the name column, with the first (name) being capitalized and the second being lower-case. Since I'd been doing it all in lower-case, that just meant copying the column over to text-editor, changing capitalization to first-letter, and copying back. Easier than doing it via Excel, certainly. Last thing I did was open a Word doc, and merge the damn thing.

layerinfo "type" = "theme";
layerinfo "name" = "Gradiance «name»";
layerinfo "redist_uniq" = "gradiance/«lower» ";
layerinfo author_name = "kaigou";

set color_001 = "«hex1»";
set color_002 = "«hex2»";
set color_003 = "«hex3»";
set color_004 = "«hex4»";
set color_005 = "«hex5»";
set color_006 = "«hex6»";
set color_007 = "«hex7»";
set color_008 = "«hex8»";

set color_page_background = "«pagebg»";
set color_page_text = "«text»";
set color_entry_background = "«entrybg»";
set color_entry_link = "«hex7»";
set color_entry_link_hover = "«hex7»";
set color_entry_link_visited = "«hex7»";

(There's a hidden if/then in the names, where if reverse =Y, it adds "Alt" to the name.)

That got me a document that was just section after section, one for each variation, and that's where I had the worst time, because doing the same action over and over is probably my idea of the absolute most boring please-to-be-avoiding kinda task ever. Just create layer, paste in layer info, create next, paste, on and on, and then go to styles and create a style for each. BLEAH.

But the rest of it was pretty easy once I got the basic process figured out. Which may sound strange and yeah, okay, fine, I'm a freaking dork and I know it, but if it weren't for having to do the layers/styles part, I could've done about twice as many color schemes -- because it's really easy when it's just a matter of regular incrementation. Color isn't just color, it's proportion when you're doing gradients, so as long as the proportion remains consistent the rest is just plug in a value and let the rest cascade.

Or maybe I really am just a big huge dork.

[ajnabi]

I know, I know, I know...! :P
But I do so love when you go into such wonderfully great length about your design/code process. (Like when we first interacted and you were such a great help with the relative fonts, and em sizing thing....!)

I have to say -- I am rather unintelligible about excel, and also about hues/saturations and rgb values (and converting them into hex codes), but it sounds like something I would like to do once I figured it out better. And the way you wrote it out is helpful, yes. Um. Yeah. Sorry for making you explain.... again.... XD XD :P

And, well, if you're a huge big dork, it's a good thing.....!

[kaigou]

Let me see if I can find it... it was an odd combination of google terms to find this page. Hrm.

http://www.easyrgb.com/index.php?X=MATH

That page has all kinds of formulas, and if you break them down into each step, you can usually do a pretty complicated formula in excel even if you only know the basics -- that is, instead of dealing with "if x=1, elseif x=2" I just did a set of columns for x=1, and then another set with the same original values based on if x=2, and so on. I ended up with a massively-spread spreadsheet that probably looked crazy, but it helped me figure out the logic, and once I've got that, I can pretty much reengineer anything, and yes, I do mean anything.

Basically, HSV are three values: hue (point of color in 360' wheel), saturation (% black+color) and value (% white+color). (HSL and HSV are not the same thing, btw.) Those three values combine in different ways to get you the red-green-blue value (RGB), which is easily converted into hexadecimal. Wiki has a really good page on HSV/HSL, which has visuals of how the colors are arranged on a color-sphere (or color-cake!) to help visual what's going on. Also recommend using ColourLovers' "add-a-color" page (even if you don't actually add a color) because it breaks the color into logical parts: one scale showing hue, another for saturation, and the third for value, so you can see how changing one value independently affects the final color.

I'd suggest start there, with ColourLovers as your practice field for seeing how the values interact (b/c the CL app also shows you hex and RGB values underneath, so you can see them change for each change of HSV), and read up on the Wiki pages -- a good place to start is "web colors", plus there's also the wiki page on "web color names" which is where I got most of these color-names, though I admit they're not all exactly the same as the shade I ended up using, but close enough at this rate. Heh.

Also, yeah, once I got used to Palatino, it's a lot easier on the eyes than Georgia is. For sans-serif, my favorite remains Gill Sans, though, and if we could remove Verdana and Tahoma along with the now-notorious Comic Sans, I'd be one happy bastard. I can tolerate Arial, except for when it break downs on-screen if it's used below its base anti-alias threshold.

[ajnabi]

P.S. I absolutely adore the font of your layouts -- palatino, i mean -- and i think i am going to replace arial with it. yes. and do something about georgia because it looks terrible on windows computers, it seems...

[wilhelminabenedict]

Ooooh. They're gorgeous!

[kaigou]

Thanks! there are a few wacky things still in the style, but we're at my limit of what I can figure out (without accidentally wrecking a bunch of other stuff at the same time), so here's where I turn it over to the DW-team in hopes someone there can enlighten me and/or fix the last few things. And then I can call myself done. Wait, no, then I do Gradiance II, and THEN I can call myself done. Righto!

[foxfirefey]

I bow before your awesome!

[kaigou]

Hahahaha NO YOU BOW BEFORE MY DORKINESS.

It's not perfect -- there are a few things I wanted to fix but when I try, I break two other things, and I don't know why. Like if you're in Safari, it shows the comment & reply-box looking like this:



It may be hard to make out, but the "BACK TO TOP" link is sitting above the reply box, just above the word "comments" in the last line. That should be lower, but it looks fine everywhere else. And the fact that the icon is floating to the left, when it floats-right everywhere in the CSS, there's no left-float ever for it! GUH. Or the fact that the mass-settings row at the bottom (okay, only I see that, but still) is consistently rendering itself in the same style as one of the modules, whut whut. Or the way Safari keeps trying to insert broken scroll-bars in an entry's footer. Oi, I have no idea! But I got the rest most of the way there, so I'm (somewhat) happy.

Other than THAT, though, hahahah stuff like this is FUN. Well, the math part is. The CSS, not so much, but once I got to the math part, I was happy again.