If you’re seeking a captivating CSS color palette collection that ensures consistency and maintains visual harmony throughout your project, look no further!
In this comprehensive compilation, we are featuring a wide range of free HTML and CSS color palette code examples gathered from reliable websites such as GitHub, CodePen, and other top-notch platforms.
In our February 2024 collection, we are showcasing 45+ stylish, trendy, and visually appealing color schemes that directly impact user emotions, readability, and accessibility, enhancing brand identity and creating a memorable online presence. Each color palette is carefully chosen to add a touch of creativity and help you build vibrant projects. You can define these vibrant website colors using various formats, including named colors, hexadecimal values, RGB values, and HSL values.
Our collection offers a diverse range of innovative, user-friendly color palettes, including monochromatic, analogous, complementary, and triadic color schemes. These playful and modern CSS color examples quite easily align with the brand’s identity and the overall theme of the website, web application, or mobile application design. At the same time, you can add a sense of balance through accessible color choices, contributing to a visually appealing and engaging design.
These trendy color combinations are highly customizable and adaptable, enabling you to adjust them to align easily with your website’s branding and user interfaces. These popular color combinations allow you to effortlessly apply colors to various UI elements such as text, backgrounds, links, and borders, and most importantly, they maintain visual hierarchy.
Whether you’re a web or UI designer, a web or frontend developer, or someone seeking attractive CSS color ideas, with these stylish website colors, you can always stay ahead of design trends and build visually stunning user interfaces that bestow a memorable user experience.
Let’s check out our collection and unleash the real designer that mesmerizes the audience.
1. Color Palette
See the Pen
Color Palette by Dorijan Covran (@chorijan)
on CodePen.
Author: Dorijan Covran @chorijan
Links: Source Code / Demo
Created on: February 5, 2015
Made with: HTML, CSS(SCSS)
2. Vue Pantone Color Search + Clipboard
See the Pen
Vue Pantone Color Search + Clipboard by Mike Weaver (@mjweaver01)
on CodePen.
Author: Mike Weaver @mjweaver01
Links: Source Code / Demo
Created on: October 25, 2016
Made with: HTML, CSS(SCSS)
3. Color Palette
See the Pen
Color palette by Aurora (@auareyou)
on CodePen.
Author: Aurora @auareyou
Links: Source Code / Demo
Created on: May 13, 2017
Made with: HTML, CSS(SCSS)
4. Generative color harmonies
See the Pen
Generative color harmonies by David Aerne (@meodai)
on CodePen.
Author: David Aerne @meodai
Links: Source Code / Demo
Created on: October 3, 2018
Made with: HTML(Pug), CSS(SCSS), JS(Babel)
5. Color Palettes With Shades
See the Pen
Color Palettes with shades by Alessandro (@afranceschetti)
on CodePen.
Author: Alessandro @afranceschetti
Links: Source Code / Demo
Created on: February 2, 2017
Made with: HTML, CSS, JS
6. Color Palette With Css Custom Properties
See the Pen
Color palette with css custom properties by Chandra (@chandrax)
on CodePen.
Author: Chandra @chandrax
Links: Source Code / Demo
Created on: May 6, 2020
Made with: HTML, CSS(SCSS)
7. Color Palette – Flexbox Fridays 2
See the Pen
Color Palette – Flexbox Fridays 2 by Lincoln Loop (@lincolnloop)
on CodePen.
Author: Lincoln Loop @lincolnloop
Links: Source Code / Demo
Created on: February 12, 2015
Made with: HTML, CSS
8. Color Palettes With Flexbox
See the Pen
Color palettes with Flexbox (study 2) by Linda Labancz (@marlasdaughter)
on CodePen.
Author: Linda Labancz @marlasdaughter
Links: Source Code / Demo
Created on: January 15, 2019
Made with: HTML, CSS
9. Material Design For Bootstrap Color Palette
See the Pen
Material Design for Bootstrap color palette by FezVrasta (@FezVrasta)
on CodePen.
Author: FezVrasta @FezVrasta
Links: Source Code / Demo
Created on: August 20, 2014
Made with: HTML, CSS(Less)
10. Flattastic Pro Color Palette
See the Pen
Flattastic Pro Color Palette by Marcos Rodrigues (@rodriguesmarcos)
on CodePen.
Author: Marcos Rodrigues @rodriguesmarcos
Links: Source Code / Demo
Created on: July 25, 2014
Made with: HTML, CSS
11. Color Palette Circles
See the Pen
Color Palette Circles by Chris Coyier (@chriscoyier)
on CodePen.
Author: Chris Coyier @chriscoyier
Links: Source Code / Demo
Created on: January 25, 2016
Made with: HTML(Pug), CSS, JS
12. Clean Color Palette In CSS
See the Pen
Awesome Color Palette #01 by Igor Milenkovic (@imilenig)
on CodePen.
Author: Igor Milenkovic @imilenig
Links: Source Code / Demo
Created on: May 14, 2019
Made with: HTML, CSS(Less)
13. Color Palette
See the Pen
Color Palette by Marco Biedermann (@marcobiedermann)
on CodePen.
Author: Marco Biedermann @marcobiedermann
Links: Source Code / Demo
Created on: May 4, 2013
Made with: HTML, CSS(PostCSS)
14. Auto Color Palette Formatting
See the Pen
Auto Color Palette Formatting by Tony Banik (@banik)
on CodePen.
Author: Tony Banik @banik
Links: Source Code / Demo
Created on: May 17, 2018
Made with: HTML, CSS(SCSS), JS
15. Color Palette Showcase
See the Pen
Color palette showcase by Steren (@steren)
on CodePen.
Author: Steren @steren
Links: Source Code / Demo
Created on: January 9, 2016
Made with: HTML, CSS(Less)
16. Color Wheel
See the Pen
Color Wheel by Jake Weary (@thepheer)
on CodePen.
Author: Jake Weary @thepheer
Links: Source Code / Demo
Created on: February 10, 2017
Made with: HTML, CSS, JS
17. Awesome Colour Palette
See the Pen
Awesome colour palette by zoreet (@zoreet)
on CodePen.
Author: zoreet @zoreet
Links: Source Code / Demo
Created on: May 2, 2019
Made with: HTML, CSS
18. CSS Grid: Color Palette
See the Pen
Color Palette by Joshua Ward (@joshuaward)
on CodePen.
Author: Joshua Ward @joshuaward
Links: Source Code / Demo
Created on: June 21, 2018
Made with: HTML(Pug), CSS(SCSS)
19. Colour Palettes
See the Pen
Colour Palettes by Louis Coyle (@dropside)
on CodePen.
Author: Louis Coyle @dropside
Links: Source Code / Demo
Created on: May 31, 2013
Made with: HTML, CSS, JS
20. Color Swatch
See the Pen
Color Swatch by Felix Rilling (@FelixRilling)
on CodePen.
Author: Felix Rilling @FelixRilling
Links: Source Code / Demo
Created on: March 15, 2014
Made with: HTML, CSS(SCSS), JS
21. Material Design Color Palette
See the Pen
Material Design Color Palette by BadBoy (@badboy)
on CodePen.
Author: BadBoy @badboy
Links: Source Code / Demo
Created on: April 22, 2016
Made with: HTML(Pug), CSS(SCSS)
22. Random Color Palette Generator
See the Pen
Random Color Palette Generator by Giana (@giana)
on CodePen.
Author: Giana @giana
Links: Source Code / Demo
Created on: October 2, 2015
Made with: HTML(Pug), CSS(SCSS), JS
23. CSS Grid: Color Palette
See the Pen
CSS Grid: Color Palette by Olivia Ng (@oliviale)
on CodePen.
Author: Olivia Ng @oliviale
Links: Source Code / Demo
Created on: November 25, 2018
Made with: HTML(Pug), CSS(SCSS)
24. Dot Palette
See the Pen
Dot palette by Eva Wythien (@evawythien)
on CodePen.
Author: Eva Wythien @evawythien
Links: Source Code / Demo
Created on: May 1, 2019
Made with: HTML, CSS(SCSS), JS
25. Generate Palettes From An Image
See the Pen
Generate palettes from an image by Blixt (@blixt)
on CodePen.
Author: Blixt @blixt
Links: Source Code / Demo
Created on: September 3, 2015
Made with: HTML, CSS, JS(Babel)
26. Color Pallete Generator
See the Pen
Color Pallete Generator by Arron (@arron21)
on CodePen.
Author: ARRON MCCRORY @arron21
Links: Source Code / Demo
Created on: May 12, 2020
Made with: HTML, CSS(SCSS)
27. Flexbox – Color Palette
See the Pen
Flexbox – Color Palette by Diana Choi (@dianachoi)
on CodePen.
Author: Diana Choi @dianachoi
Links: Source Code / Demo
Created on: September 15, 2017
Made with: HTML, CSS(SCSS)
28. Material Color Palette
See the Pen
Material Color Palette by Vineeth.TR (@vineethtrv)
on CodePen.
Author: Vineeth.TR @vineethtrv
Links: Source Code / Demo
Created on: October 19, 2015
Made with: HTML, CSS(SCSS), JS
29. Color Palettes
See the Pen
Color Palettes by Screeny (@screeny05)
on CodePen.
Author: Screeny @screeny05
Links: Source Code / Demo
Created on: October 30, 2015
Made with: HTML, CSS(SCSS), JS(Babel)
30. Gradient Collection
See the Pen
Gradient Collection by Tamino Martinius (@Zaku)
on CodePen.
Author: Tamino Martinius @Zaku
Links: Source Code / Demo
Created on: August 19, 2018
Made with: HTML(Pug), CSS(PostCSS)
31. Color Palette Maker
See the Pen
Color Palette Maker by Peter Norton (@graphilla)
on CodePen.
Author: Peter Norton @graphilla
Links: Source Code / Demo
Created on: September 17, 2016
Made with: HTML, CSS(SCSS), JS
32. Color Palette
See the Pen
Color Palette by Joshua Ward (@joshuaward)
on CodePen.
Author: Joshua Ward @joshuaward
Links: Source Code / Demo
Created on: December 14, 2017
Made with: HTML, CSS(SCSS)
33. Gradients Collection Preview
See the Pen
Gradients Collection Preview by MenSeb (@MenSeb)
on CodePen.
Author: MenSeb @MenSeb
Links: Source Code / Demo
Created on: April 26, 2019
Made with: HTML, CSS(SCSS)
34. Colour Palette Condensed
See the Pen
colour palette condensed by Sandra Davis (@lunamatic)
on CodePen.
Author: Sandra Davis @lunamatic
Links: Source Code / Demo
Created on: September 24, 2021
Made with: HTML, CSS
35. Duotone Filtering W/ CSS Variables
See the Pen
Duotone filtering w/ CSS variables ???????? by Jhey (@jh3y)
on CodePen.
Author: Jhey @jh3y
Links: Source Code / Demo
Created on: July 12, 2018
Made with: HTML(Pug), CSS(Stylus), JS(Babel)
36. Google Material Design Sass Color Palette
See the Pen
Google Material Design Sass Color Palette by Jon Rohan (@jonrohan)
on CodePen.
Author: Jon Rohan @jonrohan
Links: Source Code / Demo
Created on: March 5, 2016
Made with: HTML(Haml), CSS(SCSS)
37. Color Palette
See the Pen
Color Palettes ???? by Roden (@RodenKerthin)
on CodePen.
Author: Roden @RodenKerthin
Links: Source Code / Demo
Created on: June 16, 2021
Made with: HTML(Pug), CSS(SCSS)
38. Color Palette
See the Pen
color palette by Philipp (@phbo)
on CodePen.
Author: Philipp @phbo
Links: Source Code / Demo
Created on: January 8, 2016
Made with: HTML, CSS, JS
39. Flat Design Color Palette
See the Pen
Flat Design Color Palette by Lucas Cobb (@cobblucas)
on CodePen.
Author: Lucas Cobb @cobblucas
Links: Source Code / Demo
Created on: March 6, 2013
Made with: HTML, CSS
40. Bootstrap 4 Color Palette Generator
See the Pen
Bootstrap 4 Color Palette Generator by Gilles Migliori (@migli)
on CodePen.
Author: Gilles Migliori @migli
Links: Source Code / Demo
Created on: December 23, 2017
Made with: HTML(Haml), CSS(SCSS)
41. Color Palette
See the Pen
Color Palette by Kyle Mensch (@Kyle-Mensch)
on CodePen.
Author: Kyle Mensch @Kyle-Mensch
Links: Source Code / Demo
Created on: April 11, 2020
Made with: HTML, CSS, JS
42. Flat UI Colors
See the Pen
Flat UI Colors by reimersjan (@reimersjan)
on CodePen.
Author: reimersjan @reimersjan
Links: Source Code / Demo
Created on: April 28, 2013
Made with: HTML, CSS
43. Simple Flat Colour Selector (Clipboard, various formats)
See the Pen
Simple Flat Colour Selector (Clipboard, various formats) by Zed Dash (@z-)
on CodePen.
Author: Zed Dash
Links: Source Code / Demo
Created on: May 7, 2016
Made with: HTML, CSS(SCSS), JS
44. Color palette
See the Pen
Color palette by Jeremy Karlsson (@enjikaka)
on CodePen.
Author: Jeremy Karlsson @enjikaka
Links: Source Code / Demo
Created on: September 12, 2014
Made with: HTML, CSS(SCSS), JS(Babel)
45. Color palette
See the Pen
Color Palette by Praveen Kumar Gorakala (@onlyveen)
on CodePen.
Author: Praveen Kumar Gorakala @onlyveen
Links: Source Code / Demo
Created on: July 4, 2017
Made with: HTML, CSS(SCSS), JS
46. Material Design Palette
See the Pen
Material Design Palette by Addy (@addyo)
on CodePen.
Author: Addy @addyo
Links: Source Code / Demo
Created on: July 30, 2014
Made with: HTML, CSS