Color Palette Generator

by Jason on

mouseover me…

I’ve been wanting to create something to get color averages or perhaps generate a palette from an image for awhile now and decided to whip something up using something I rarely use: HTML5’s canvas tag.

The images in this post are drawn onto a canvas and processed using this Palette class. Note that image size is defined via CSS. A babelized version is available for evergreen browsers here.

Examples

    <div class="palette-example2"></div>

    <link rel="stylesheet" href="/color/scripts/index.css" />
    <script src="/color/scripts/dist/index.js"></script>
    <script>
    new Palette({
        image: '/color/dragon.jpg',
        selector: '.palette-example2',
        horizontalSegments: 20,
        verticalSegments: 10,
        /*
        displayPalette: false, // default true
        displayTools: false // default true
        */
    });
    </script>

    new Palette({
        image: '/color/oscar.jpg',
        selector: '.palette-example3',
        horizontalSegments: 1,
        verticalSegments: 100,
        threshold: 60
    });

Options

  • image
    Type: string

    URL of the image source

  • selector
    Type: string

    CSS selector for the target element / container

  • segments optional
    Type: number

    Number of horizontal and vertical image segments to generate

  • verticalSegments optional
    Type: number

    Number of vertical image segments to generate

  • horizontalSegments optional
    Type: number

    Number of horizontal image segments to generate

  • threshold optional
    Type: number

    Number between 1 and 255 used to calculate whether a color is sufficiently different enough to be included in the palette

  • displayPalette optional
    Type: boolean

    Display the palette div

  • displayTools optional
    Type: boolean

    Display the tools / slider div