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.
