Software to generate all layout possibilities within a set of color

Question

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.

I want to see all the possibilities within that set of colors to better choose the right layout for the website:

Answer 1

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:

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.

Answer 2

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/