Colorize

Submit the CSS file you want to work with to start the colorize application.

If you want to start the application with a new set of colors, you may choose the angle that you would like the new color for each property to be. This is a work in progress so there might be unexpected results on top of features/functionalities missing. If you have any suggestions or observations you may contact us as well as with any bug reports or feature requests.

Complementary

Opposite sides of the color wheel. Create high contrast, vibrant pairings! (e.g. red & green, blue & yellow)

Tetradic

Four colors forming two complementary pairs on the color wheel. Creates a lively and bold combination! (Think of a rectangle on the color wheel)

Split Complementary

A base color with two colors on either side of its complement on the color wheel. Offers vibrant contrast with a touch more balance than straight complementary. (e.g. blue with yellow-orange & red-orange)

Triadic

Three colors evenly spaced on the color wheel, forming a triangle. Creates a vibrant and dynamic palette! (e.g. red, yellow, blue)

Analogous

Neighbors on the color wheel! These colors sit next to each other, creating a harmonious and calming effect. (e.g. blue, blue-green, green)

Monochromatic Tones

Tones of one color!

Monochromatic Shades

Shades of one color!

About Colorize

The idea behind the colorize application is to help developers restyle already built third-party applications to fit the style of their site/application they want to integrate the third-party application into. Most CSS files that applications come with could be well over a thousand lines long and might not use CSS variables for colors. This is where this application comes: parses the CSS file, finds all instances where colors are used and prints them in user friendly format to help developers discover where the colors are set within the CSS file.

Currently, the application is in it's baby stage and many of the planned features are missing and the features that it does have isn't as extensively tested as one might hope. The most useful function the application serves at the moment is discovery of all the colors used throughout the CSS file (and maybe help provide ideas for new colors initially), but that is going to change as the application matures and more features are added making this tool more useful.

The colorize application/tool is planned to be free to use for everybody though it might be available to registered members only (membership is free), but that is only because of certain planned features which aren't implemented yet. The application could be available for non-members as well, but without those planned features for non-members.

Planned Features

As the application matures and (hopefully) gets extensively tested and perfected, more and more features are going to be added. The planned features for the application are:

  1. Each color would be changeable seperately.
  2. The ability to render pretty CSS or minified CSS.
  3. The ability to download the rendered CSS file VS copying/pasting the CSS.
  4. Toggle properties from being included in the application's process.
    • If there are certain properties you want to leave untouched by the application, you would toggle the checkbox to tell the application to leave that property value along.
  5. Live Preview
    • User will provide the HTML for the CSS which will be updated as colors are modified.
  6. User could save the progress to return to it later.
  7. Changes to the UI to make it more user-friendly.

The list is not complete and more features are going to be added to the planned list as well as to the application itself. If there are any other features you feel that is missing from the list, feel free and contact us and share your ideas.

Known Bugs

Unfortunately, the application is not perfect and there is a slight bug users should be aware of (even if it is for testing). I'll start the list (even though there is only one I know of) and will add on to it as they are discovered. This makes the users aware of the bugs and I have a list of bugs I need to work on fixing.

  1. If you have keyframes with a color name, that color would be treated as a color when it is used as the value to `animation` property or other properties that take the `keyframes name` as it's value.
    • I don't have a way to fix that yet, brainstorming. Can't relly on having spaces or semi-colons since CSS could be minified or the value could be set to the last property within a ruleset and missing a semicolon.
    • My current planned `work around` is having a toggle for every property to get the application ignore such property values. This feature could be useful in other scenarios so it's good to have.