20 CSS Color Palettes for Web Developers

20 CSS Color Palettes for Web Developers

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

HTML (Pug) / CSS (SCSS)

Author

MenSeb

Demo


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


2.COLOR PALETTES

Color palettes with Flexbox.

Made with

HTML / CSS

Author

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

HTML (Pug) / CSS (SCSS)

Author

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

HTML (Pug) / CSS (PostCSS)

Author

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

HTML (Pug) / CSS (Stylus) / JavaScript

Author

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

HTML / CSS (SCSS)

Author

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

CSS (SCSS) / JavaScript

Author

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

HTML/Haml
CSS/SCSS

Author

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

HTML
CSS/SCSS

Author

Joshua Ward

Demo


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


10.COLOR PALETTE

Color palette with CSS flexbox.

Made with

HTML
CSS

Author

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

Html
Css/SCSS
Javascript

Author

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

Html
Css/SCSS
Javascript

Author

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

Html
Css/SCSS
Javascript

Author

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

Html
Css/SCSS
Javascript

Author

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

Html
Css/SCSS
Javascript

Author

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

Html
Css/SCSS
Javascript

Author

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

Html
Css/SCSS
Javascript

Author

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

Html
Css/SCSS
Javascript

Author

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

Html
Css

Author

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

Html
Css/SCSS
Javascript

Author

Louis Coyle

Demo


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

Source:https://jquerypluginsfree.com/20-css-color-palettes-for-web-developers/

Comments