Color is an essential part of design. And choosing the perfect color scheme is a step all web designers, must go through.

Below are 20 CSS Color Palettes for Web Developers.

1.GRADIENTS COLLECTION PREVIEW

Used CSS variables and flexbox.

Made with

1
HTML (Pug) / CSS (SCSS)

Author

1
MenSeb

Demo

See the Pen Gradients Collection Preview by MenSeb (@MenSeb) on CodePen.


2.COLOR PALETTES

Color palettes with Flexbox.

Made with

1
HTML / CSS

Author

1
Linda Labancz

Demo

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


3.CSS GRID: COLOR PALETTE

Color palette that can be used in a real use case.

Made with

1
HTML (Pug) / CSS (SCSS)

Author

1
Olivia Ng

Demo

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


4.GRADIENT COLLECTION

A small collection of gradients.

Made with

1
HTML (Pug) / CSS (PostCSS)

Author

1
Tamino Martinius

Demo

See the Pen Gradient Collection by Tamino Martinius (@Zaku) on CodePen.


5.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

1
HTML (Pug) / CSS (Stylus) / JavaScript

Author

1
Jhey

Demo

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


6.COLOR PALETTE

Color palette using CSS Grid.

Made with

1
HTML / CSS (SCSS)

Author

1
Joshua Ward

Demo

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


7.AUTO COLOR PALETTE FORMATTING

Add/Edit/Remove Hex Colors from the array to update the palette.

Made with

1
CSS (SCSS) / JavaScript

Author

1
Tony Banik

Demo

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


8.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

1
2
HTML/Haml
CSS/SCSS

Author

1
Gilles Migliori

Demo

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


9.COLOR PALETTE

Pure CSS color palette.

Made with

1
2
HTML
CSS/SCSS

Author

1
Joshua Ward

Demo

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


10.COLOR PALETTE

Color palette with CSS flexbox.

Made with

1
2
HTML
CSS

Author

1
Diana Choi

Demo

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


11.Color Wheel

Color wheel with HTML, CSS and JavaScript.

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
thepheer

Demo

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


12.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 with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Chris Coyier

Demo

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


13.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 with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Alessandro

Demo

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


14.Pantone Color Search + Clipboard

Pantone color search with clipboard in HTML, CSS and JavaScript.

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Mike Weaver

Demo

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


15.Random Color Palette Generator

Added ability to toggle between light and dark background colors.

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Giana

Demo

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


16.Color Palettes

Click on the button to view a random color palette.

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Screeny

Demo

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


17.Color Palette

Click the color code to change the color!

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Philipp

Demo

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


18.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 with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Blixt

Demo

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


19.Flattastic Pro Color Palette

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

Made with

1
2
Html
Css

Author

1
Marcos Rodrigues

Demo

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


20.Color Palette

Color swatches with hex values on click, actively selected and available to copy.

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Louis Coyle

Demo

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