Make Complex Color Schemes & Export As Photoshop, HTML & GIMP Palette

Advertisement

We’ve previously reviewed two apps that help you create color schemes; Chroma was a Chrome app and ColorSpire was a web app that made it easy to find the right color or the right shade for whatever you wanted to design. While both apps in their own capacity worked well, the Color Scheme Designer out does them by a mile. This web application lets you create color schemes with a single color or in a combination of two, three or four colors. You can adjust the brightness and hue of the colors, select from many preset contrast options, and view samples of what a web page would like in the current scheme. Each scheme that’s created has it’s own link that you can use to share it with your designer, a co-worker or a client.

Color Scheme Designer

To get started, select how many different colors you want to use in your color scheme. Six discs aligned on top of the large color disc tell you how many colors there will be in the scheme. Mono represents single color, Complement represents two colors, Triad and Analog represents three and Tetrad and Accented Analogic represents four.

Color Scheme Designer color disc

Getting the hang of hues takes time, especially if you’re working with either three or four colors. For the number colors that you’re working with, a small knob is added to the color disc for each. The dark knob represents the core color in your scheme and all others represent the complementing or contrasting colors. Except in Complement color scheme, the knobs move independent of the main anchor knob. Changing colors in Mono or Complement mode is simple enough; in Triad and Tetrad, it is slightly complex.

Color Scheme Designer angle

For three or four combination schemes, the colors are spaced apart at certain angles making sure the colors vary by a certain degree. To increase or decrease the color variation, select Angle and enter a number that corresponds to the degree of color variation that you would like. All color schemes that you create are previewed in a panel on the right, however, you can also view how your color scheme will appear on an actual web page.

Color Scheme Designer sample page

To preview what a web page would look like in the scheme you’ve created, click the Light Page Example or the Dark Page Example link below the scheme preview. The light page example uses the lightest shade in your scheme as the background whereas the dark page example uses the darkest shade as the background.

Color Scheme Designer brightness grey

To adjust the level of brightness and grey for your scheme, go to the Adjust Scheme tab. Move the knob on the color box to increase or decrease brightness, alternatively, you can select one of several contrast presets from the dropdown menu. To set contrast manually, move the pointer in the Scheme Contrast box. To view colors and color codes, go to the Color List tab.

Color Scheme Designer export

Once you’ve decided on a scheme, you can export the scheme to HTML + CSS, XML, Photoshop or GIMP palette format. Photoshop palette is saved as an ACO file.

Visit Color Scheme Designer

Advertisement