Welcome to our collection of CSS color palettes! In this carefully curated compilation, we have gathered a diverse selection of free HTML and CSS code examples that showcase stunning color palettes. These examples have been sourced from reputable platforms such as CodePen, GitHub, and other valuable resources.
With our November 2021 update, we are thrilled to present four new additions to our collection, ensuring that you have access to the latest and most inspiring color palette designs available. These CSS color palettes offer a wide range of harmonious color combinations, allowing you to enhance the visual appeal and aesthetics of your website or application.
Start exploring our collection now and unlock the potential to transform your website or application with the power of color.
Related Articles
Links
Made with
- HTML / CSS
About a code
Colour Palette Condensed
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Color Palettes
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Color Palette
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Gradients Collection Preview
Used CSS variables and flexbox.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Color Palettes
Color palettes with Flexbox.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
CSS Grid: Color Palette
Color palette that can be used in a real use case.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (PostCSS)
About a code
Gradient Collection
A small collection of gradients.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Stylus) / JavaScript
About the code
Duotone Filtering with CSS Variables
Was playing withmix-blend-modeto 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 thecolorsvariable in thePugcode.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Color Palette
Color palette using CSS Grid.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- CSS (SCSS) / JavaScript
About the code
Auto Color Palette Formatting
Add/Edit/Remove Hex Colors from the array to update the palette.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML/Haml
- CSS/SCSS
About the code
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.
Links
Made with
- HTML
- CSS/SCSS
About the code
Color Palette
Pure CSS color palette.
Links
Made with
- HTML
- CSS
About the code
Color Palette
Color palette with CSS flexbox.
Links
Made with
- HTML / CSS (SCSS)
About a code
Color Palette
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Color Wheel
Color wheel with HTML, CSS and JavaScript.
Made by thepheer
March 7, 2017
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
March 2, 2017
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
February 2, 2017
Pantone Color Search + Clipboard
Pantone color search with clipboard in HTML, CSS and JavaScript.
Made by Mike Weaver
November 3, 2016
Random Color Palette Generator
Added ability to toggle between light and dark background colors.
Made by Giana
March 20, 2016
Color Palettes
Click on the button to view a random color palette.
Made by Screeny
February 6, 2016
Color Palette
Click the color code to change the color!
Made by Philipp
January 8, 2016
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
October 1, 2015
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
February 5, 2017
Flattastic Pro Color Palette
This pen is an HTML/CSS version of the dribbble Flattastic Pro Color Palette by Erigon.
Made by Marcos Rodrigues
July 26, 2014
Links
Made with
- HTML / CSS (SCSS)
About the code
Color Swatch
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Color Palette
Color swatches with hex values on click, actively selected and available to copy.
Made by Louis Coyle
June 11, 2013