Table of Contents

Collection of hand-picked free HTML and CSS color palette code examples.

COLOR PALETTES

Color palettes with Flexbox. Made with HTML / CSS by Linda Labancz.

See the Pen
Color palettes with Flexbox (study 2)
by Linda Labancz (@marlasdaughter)
on CodePen.


Demo and Download 

CSS GRID: COLOR PALETTE

Color palette that can be used in a real use case. Made with HTML (Pug) / CSS (SCSS) by Olivia Ng.

See the Pen
CSS Grid: Color Palette
by Olivia Ng (@oliviale)
on CodePen.


Demo and Download 

DUOTONE FILTERING WITH CSS VARIABLES

Was playing with mix-blend-mode to create different duotone filters. Then I thought it might be cool to have a handy selector wheel to try out different filters. So here it is! A duotone filtering tester using CSS variables. The inner ring is the lightening color whilst the outer is the darkening color. To change the colors, adjust the colors variable in the Pug code. Made with HTML (Pug) / CSS (Stylus) / JavaScript by Jhey.

See the Pen
Duotone filtering w/ CSS variables 😎🌈
by Jhey (@jh3y)
on CodePen.

Demo and Download 

COLOR PALETTE

Color palette using CSS Grid. Made with HTML / CSS (SCSS) by Joshua Ward.

See the Pen
Color Palette
by Joshua Ward (@joshuaward)
on CodePen.

Demo and Download

AUTO COLOR PALETTE FORMATTING

Add/Edit/Remove Hex Colors from the array to update the palette. Made with CSS (SCSS) / JavaScript by Tony Banik.

See the Pen
Auto Color Palette Formatting
by Tony Banik (@banik)
on CodePen.

Demo and Download 

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. Made with HTML/Haml, CSS/SCSS by Gilles Migliori.

See the Pen
Bootstrap 4 Color Palette Generator
by Gilles Migliori (@migli)
on CodePen.

Demo and Download 

COLOR PALETTE

Pure CSS color palette. Made with HTML, CSS/SCSS by Joshua Ward

See the Pen
Color Palette
by Joshua Ward (@joshuaward)
on CodePen.


Demo and Download

COLOR PALETTE

Color palette with CSS flexbox. Made with HTML, CSS by Diana Choi.

See the Pen
Flexbox – Color Palette
by Diana Choi (@dianachoi)
on CodePen.


Demo and Download 

COLOR WHEEL

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

See the Pen
Color Wheel
by Jake Weary (@thepheer)
on CodePen.

Demo and Download 

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.

See the Pen
Color Palette Circles
by Chris Coyier (@chriscoyier)
on CodePen.

Demo and Download

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.

See the Pen
Color Palettes with shades
by Alessandro (@afranceschetti)
on CodePen.

Demo and Download

PANTONE COLOR SEARCH + CLIPBOARD

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

See the Pen
Vue Pantone Color Search + Clipboard
by Mike Weaver (@mjweaver01)
on CodePen.

Demo and Download

RANDOM COLOR PALETTE GENERATOR

Added ability to toggle between light and dark background colors. Made by Giana.

See the Pen
Random Color Palette Generator
by Giana (@giana)
on CodePen.

Demo and Download 

COLOR PALETTES

Click on the button to view a random color palette. Made by Screeny.

See the Pen
Color Palettes
by Screeny (@screeny05)
on CodePen.

Demo and Download

COLOR PALETTE

Click the color code to change the color!. Made by Philipp.

See the Pen
color palette
by Philipp (@phbo)
on CodePen.

Demo and Download

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.

See the Pen
Generate palettes from an image
by Blixt (@blixt)
on CodePen.

Demo and Download

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.

See the Pen
Color Palette
by Dorijan Covran (@chorijan)
on CodePen.

Demo and Download

FLATTASTIC PRO COLOR PALETTE

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

See the Pen
Flattastic Pro Color Palette
by Marcos Rodrigues (@rodriguesmarcos)
on CodePen.

Demo and Download

COLOR SWATCH

Made with HTML / CSS (SCSS) by Felix Rilling.

See the Pen
Color Swatch
by Felix Rilling (@FelixRilling)
on CodePen.

Demo and Download

COLOR SWATCHES WITH HEX VALUES

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

See the Pen
Colour Palettes
by Louis Coyle (@dropside)
on CodePen.

Demo and Download