7

Is there a software that generates all possible color combinations for a specified layout?
For example, I'm designing a website layout and I have a color palette.

Colour palette

I want to see all the possibilities within that set of colors to better choose the right layout for the website:
Basic layout in different colour combinations

  • 1
    Do you care about pricing? How about what OS will you want to use this on? Is a web-app okay? – Nick Wilde Jul 22 '14 at 23:00
  • 1
    For now I'm not worried about the cost. It would be best if it was for a Mac. Yes it could be a web-app – CIRCLE Jul 22 '14 at 23:38
  • How would the tool apply the color to the website? Is there a CSS file with placeholders? – ComFreek Aug 5 '14 at 17:33
  • 1
    And how do the sections defined by you get colored? – ComFreek Aug 5 '14 at 17:51
  • 1
    Could you provide more info? The colors are defined by image as above, (so need analyze it for colors) or you have rgb values? Want generate 25 images (5x5 combinations) (if yes, how big?) - or you want get 25 different colored web pages? The layout is always left-menu + top-menu (e.g. two color combination?). Could you install command line utilities on OS X (like macports.org?) Are you OK with the Terminal.app and scripts? – jm666 Aug 7 '14 at 22:20
2
+25

You can install ImageMagick (batch image processing program).

For OS X, the best you can do is:

  1. install MacPorts
  2. open new Terminal.app window (or relog)
  3. run: port install ImageMagick
  4. it installs a few open source packages (it may take a while)

And finally run the attached script to get the next image:

20 different color combinations

At the end of of this post is the script, save it for example with name mktiles and you can modify it yourself. But you need to know a bit Bash and the ImageMagick suite of commands (convert and montage).

The usage:

bash mktiles num_of_colors color_image_file final_image_name.ext

Meanaing of arguments:

  • num_of_colors: number of colors from the image (the first N most used)
  • color_image_file: your palette image file
  • final_image_name.ext: the desired image file name of the result (the extension determines the type)

E.g. for your example:

bash mktiles 5 xY1j5.png final.jpg

(I uploaded the final.jpg above.)

The script:

#!/bin/bash
iw=300 #width
ih=200 #height
mw=$(( $iw * 33 / 100 ))
th=$(( $ih * 10 / 100 ))
tmpdir=/tmp/tiles.$$

getcolors_image() {
    convert "$1" -colors "${2:-5}" -unique-colors txt:- | sed -n 's/.*\(#[A-Z0-F][A-Z0-F][A-Z0-F][A-Z0-F][A-Z0-F][A-Z0-F]\).*/\1/p'
}

do_image() {
    filename="$tmpdir/$1-$2.png"
    convert -size ${iw}x${ih} xc:none \
        -fill "$1" -draw "rectangle 0,0 $mw,$ih" \
        -fill "$2" -draw "rectangle 0,0 $iw,$th" \
        "$filename"
}

case "$#" in
3) colors="$1"; input="$2"; final="$3" ;;
*) echo "Usage: $0 numcolors input_image output_image" >&2 ; exit 1 ;;
esac

mkdir -p $tmpdir
declare -a colors=($(getcolors_image "$input" "$numcolors"))
tile=$(( ${#colors[@]} - 1 ))

for top in ${colors[@]}
do
    for left in ${colors[@]}
    do
        [[ "$top" == "$left" ]] && continue
        do_image "$top" "$left"
    done
done

montage $tmpdir/* -tile $((${#colors[@]} - 1))x${#colors[@]} "$final"
rm -rf "$tmpdir"

The script of course is far from ideal, but you can get the idea.

With a similar technique you can generate 20 HTML pages with embedded CSS & colors and the like. Learning Bash scripting on OS X can be helpful.

-1

Design a palette and check how would it look like in a website: http://www.paletton.com/

Bootstrap color theme designer with preview http://www.lavishbootstrap.com/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.