Color Theme Generator Using Only One Base Color

This website uses color theory to create different colors from one base color. You can enter the base color in the HSL-color scheme. It uses hue (0-360º), saturation (0-100%) and lightness (0-100%).

Usually the base color is chosen to have a saturation of 100% and a lightness of 50%. This color is considered brightest. Nevertheless using a different saturation or lightness can create interesting color schemes as well.

The tree view of the colors shows how the used colors were mixed. It starts with the base color and the complement of it. These two are mixed two create desaturated versions of themselves, called the primary color and the complementary. From there on mixing with black and white are used for creating shades of the primary/complementary colors and the other color is used to create more neutral colors. If you want to learn more about the mixing, going on behind the scenes, check out Practical Color Theory for People Who Code by Natalya Shelburne. If you want to use a color scheme, you generated, feel free to copy the sass code to use it in your own projects.

Enter a color (HSL):

swap

Hello, World

tiny lorem ipsum tiny lorem ipsum tin rem ipsum ?

tiny lorem ipsum tiny lorem ipsum tiny lorem ipsum tiny lorem ipsum tiny lorem ipsum tiny lorem ipsum tiny lorem ipsum tiny lorem ipsum tiny lorem ipsum tiny lorem ipsum tiny lorem ipsum tiny lorem ipsum tiny lorem ipsum tiny lorem ipsum tiny lorem ipsum tiny lorem ipsum tiny lorem ipsum tiny lorem ipsum tiny lorem ipsum tiny lorem ipsum tiny lorem ipsum tiny lorem ipsum tiny lorem ipsum tiny lorem ipsum tiny lorem ipsum tiny lorem ipsum tinyny lorem ipsum

cta abc abc cta

Tiny footer

Author

@onTwitter

Sass-code:

Shades

In order to create a compelling layout, more shades and black- and white-like colors are needed. Using pure black or pure white often produces a weird looking design. To make the design look good, one usually mixes the pure black/white with a tiny amount of the base color. The script below uses a base and a secondary color to generate a pallet of useful shades in order to create a compelling design. It is important not to use too many shades as it can make the design look muddy, but not too few either so a good contrast between different for- and backgrounds can be created. I chose ten shades for the two main colors and five dark and light shades. Many designs also need colors to communicate warnings, positive and negative states. The script takes three state colors (e.g. green, yellow and red) and creates five shades of them as well. Play around with the values and you should be able to create a nice color scheme. You can use the complementary colors from above or try colors that are not complementary. You can do anything at ZomboCom. Anything at all. The only limit is yourself.