40+ CSS Color Palettes - Free Code + Demos

Tried to come up with something that can be used in a real use case 😂 Also this demonstrates how you should use grid + flex together?

A small collection of gradients

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

Read More

Tried to come up with something that can be used in a real use case 😂 Also this demonstrates how you should use grid + flex together?

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

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

Designed for use with Chrome.

The source is available on github.

Circles are nested SVG s 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

Some palette that il love, with nuances.

Cleaned up errors. Now works in Firefox. Added ability to toggle between light and dark background colors.

click on the button to view a random color palette

This pen is an HTML / CSS version of the dribbble Flattastic Pro Color Palette by Erigon https://dribbble.com/shots/1186718-Flattastic-Pro-Color-Palette https://dribbble.com/erigon

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.

A HTML/CSS version of the color palette overview based on the Dribbble shots "Flattastic Pro Color Palette" (https://dribbble.com/shots/1186718-Flattastic-Pro-Color-Palette) and "Aves UI Kit Color Palette" (https://dribbble.com/shots/1706500-Aves-UI-Kit-Color-Palette) with my own little tw...

Read More

This pen is an HTML / CSS version of the dribbble Flattastic Pro Color Palette by Erigon https://dribbble.com/shots/1186718-Flattastic-Pro-Color-Palette https://dribbble.com/erigon

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

Flexible style guide palette demo by the Lincoln Loop team. View the post for this demo here. Happy Flexbox Fridays!

color names: https://github.com/meodai/color-names reload icon by Ravindra Kalkani from the Noun Project: https://thenounproject.com/search/?q=reload&i=1973430

View it at dribbble or Behance Download .psd

This is a Scss implementation of a function that will compute colors based on Google Material Design Color Pallet https://www.google.com/design/spec/style/color.html#color-color-palette

Good evening! Super happy to publish my first pen. With the super big phat help of @lukyvj I managed to animate the color palette of my old logo. It was ultra fun and I hope I will continue to learn more about CSS/SCSS. Happy weekend y'all!

Color palette of the Material Design for Bootstrap theme (https://github.com/FezVrasta/bootstrap-material-design)

I really liked how Duminda Perera showcased her colors in "Minimalist Color Palettes 2015" https://www.behance.net/gallery/32154055/Minimalist-Color-Palettes-2015. I decided to use this palette showcase technique to with the theme of my wedding.

CSS library for Material Design Background and Foreground colors

this generator produces a palette based on a base PRIMARY color that is some shade of light blue

Reflexion on building consistent use for colors in web templates.

Responsive Material Color Palette with copy option

A simple color picker with the option to build a small colour palette. the switch in the top corner enables custom backgrounds.