Collection of hand-picked free HTML and CSS color palette code examples.
Color palettes with Flexbox. Made with HTML / CSS by Linda Labancz.
CSS GRID: COLOR PALETTE
Color palette that can be used in a real use case. Made with HTML (Pug) / CSS (SCSS) by Olivia Ng.
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
Color palette using CSS Grid. Made with HTML / CSS (SCSS) by Joshua Ward.
AUTO COLOR PALETTE FORMATTING
BOOTSTRAP 4 COLOR PALETTE GENERATOR. INCLUDING COLOR VARIANTS
Bootstrap 4 color palette generator. Generates color variants from Bootstrap
.border-indigo-600. Made with HTML/Haml, CSS/SCSS by Gilles Migliori.
Pure CSS color palette. Made with HTML, CSS/SCSS by Joshua Ward
Color palette with CSS flexbox. Made with HTML, CSS by Diana Choi.
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.
COLOR PALETTES WITH SHADES
PANTONE COLOR SEARCH + CLIPBOARD
RANDOM COLOR PALETTE GENERATOR
Added ability to toggle between light and dark background colors. Made by Giana.
Click on the button to view a random color palette. Made by Screeny.
Click the color code to change the color!. Made by Philipp.
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.
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.
FLATTASTIC PRO COLOR PALETTE
This pen is an HTML/CSS version of the dribbble Flattastic Pro Color Palette by Erigon. Made by Marcos Rodrigues.
Made with HTML / CSS (SCSS) by Felix Rilling.
COLOR SWATCHES WITH HEX VALUES
Color swatches with hex values on click, actively selected and available to copy. Made by Louis Coyle.