entropia

After pretty heavy development for a couple days I didn’t touch CSS Colorizer for a for weeks.  I think it was because I wrote myself into a corner with the UI.  So this weekend I changed how it works and got a demoable version ready.  It’s not all the usable yet but most of the essential functionality is there.

First, some words on the UI.  At first, I was showing everything on the screen at the same time:  the color picker, the CSS, and HTML, and the preview, with the option of switching back and forth between the internal CSS and the generated CSS.  But this layout had no flow.  There was no way to know what to do.

So I broke it into steps that are shown two-at-a-time.  You can easily move from step to step, even backwards to previous steps with Next and Prev buttons.  It even has a little scroll animation.

Try it out here. 

Here’s how the flow breaks down:

• Previously Generated CSS - if you’ve already used Colorizer and have an output file with a header, paste it here and click parse to generate the internal CSS.  Otherwise, skip this step.
• Internal CSS - if you don’t have a Colorizer file, paste your regular CSS here and replace the color codes with color variable names.  Variables begin with $$, such as $$foreground.
• Colors - here is where you actually create the color scheme.  This section isn’t complete, but you can do basic editting by entering raw rgb values or functions.
• Raw CSS - Click generate to replace the color variables with the actual color values.  The output is actual usable CSS.
• HTML - paste some HTML to test your CSS.
• Preview - click the link to apply HTML to see it in action.

The main area that still needs work is the color picker.  I need a visual color map of some sort and the derived colors still have a very limited selection of functions (even though they’re list on the page, hueshift() and hsv() haven’t been implemented).

Overall I don’t think it’s as useful as I hoped.  Choosing colors as functions of other colors feels unnatural.  I was hoping to make it easier to generate matching colors but that’s really something that’s best left to tweaking by hand.

But, it’s something.  Which is better than nothing.