11 CSS Color Palettes

July 13, 2017 | by Vladimir Stepura

Collection of hand-picked free HTML and CSS color palettes with little JavaScript. Demo and download code (*zip).

Demo Image: Color Wheel
Demo Image: Color Wheel

Color Wheel

Color wheel with HTML, CSS and JavaScript.
Made by thepheer
March 7, 2017

Demo Image: Color Palette Circles
Demo Image: Color Palette Circles

Color Palette Circles

Circles are nested SVG circles. They are generated by Jade loops (for easy tweaking). Flexbox lays them out in an even row. They are colorized via palettes from the COLOURlovers API.
Made by Chris Coyier
March 2, 2017

Demo Image: Color Palettes With Shades
Demo Image: Color Palettes With Shades

Color Palettes With Shades

Color palettes with shades in HTML, CSS and JavaScript. Palettes: Windows Phone, Tango Desktop Project, Fedora, Open Suse, Jack Production, iOs 7, Pantone Spring 2016.
Made by Alessandro
February 2, 2017

Demo Image: Pantone Color Search + Clipboard
Demo Image: Pantone Color Search + Clipboard

Pantone Color Search + Clipboard

Pantone color search with clipboard in HTML, CSS and JavaScript.
Made by Mike Weaver
November 3, 2016

Demo Image: Random Color Palette Generator
Demo Image: Random Color Palette Generator

Random Color Palette Generator

Added ability to toggle between light and dark background colors.
Made by Giana
March 20, 2016

Demo Image: Color Palettes
Demo Image: Color Palettes

Color Palettes

Click on the button to view a random color palette.
Made by Screeny
February 6, 2016

Demo Image: Color Palette
Demo Image: Color Palette

Color Palette

Click the color code to change the color!
Made by Philipp
January 8, 2016

Demo Image: Generate Palettes From An Image
Demo Image: Generate Palettes From An Image

Generate Palettes From An Image

This tool will let you drop an image and generate palettes from its top 100 colors (by surface area), and output it for use in CSS, iOS (Objective-C & Swift), Android (Java), etc.
Made by Blixt
October 1, 2015

Demo Image: Color Palette
Demo Image: Color Palette

Color Palette

A HTML/CSS version of the color palette overview based on the Dribbble shots “Flattastic Pro Color Palette” and “Aves UI Kit Color Palette”.
Made by Dorijan Covran
February 5, 2017

Demo Image: Flattastic Pro Color Palette
Demo Image: Flattastic Pro Color Palette

Flattastic Pro Color Palette

This pen is an HTML/CSS version of the dribbble Flattastic Pro Color Palette by Erigon.
Made by Marcos Rodrigues
July 26, 2014

Demo Image: Color Palette
Demo GIF: Color Palette

Color Palette

Color swatches with hex values on click, actively selected and available to copy.
Made by Louis Coyle
June 11, 2013

FreeFrontend © 2016 - 2017

Back to top