Post thumbnail: 15 CSS Color Palettes

15 CSS Color Palettes

Collection of hand-picked free HTML and CSS color palette code examples. Update of July 2018 collection. 3 new items.

Demo image: SCSS Material Palette

Author

  • Henry Desroches

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

SCSS Material Palette Generator

Pure SCSS Material palette generator. Put in $testColor your color, the generator will use it as the 500 value of the palette.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: Google Fonts, Reset.css

Demo image: Bootstrap 4 Color Palette Generator

Author

  • Gilles Migliori

Made with

  • HTML/Haml
  • CSS/SCSS

About the code

Bootstrap 4 Color Palette Generator. Including Color Variants

Bootstrap 4 color palette generator. Generates color variants from Bootstrap $colors i.e: .text-indigo-600 .bg-indigo-600 .border-indigo-600.

Demo image: Color Palette

Author

  • Joshua Ward

Made with

  • HTML
  • CSS/SCSS

About the code

Color Palette

Pure CSS color palette.

Demo image: Color Palette

Author

  • Diana Choi

Made with

  • HTML
  • CSS

About the code

Color Palette

Color palette with CSS flexbox.

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

Back to top