45+ CSS Color Palettes

Last Updated on by in CSS Examples
CSS Color Palettes

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

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.