본문 바로가기

자료실/UX ㅣ UI Design

UX l UI & Web Color

UX  l  UI & Web Color 


20 CSS Color Palettes

Collection of hand-picked free HTML and CSS color palette code examples. Update of May 2018 collection. 6 new items.

Related Articles

  1. jQuery Color Pickers

Demo image: Color Palettes

Author

  • Linda Labancz

Made with

  • HTML / CSS

About the code

Color Palettes

Color palettes with Flexbox.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

  • Olivia Ng

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

Author

  • Jhey

Made with

  • HTML (Pug) / CSS (Stylus) / JavaScript

About the code

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Color Palette

Author

  • Joshua Ward

Made with

  • HTML / CSS (SCSS)

About the code

Color Palette

Color palette using CSS Grid.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Auto Color Palette Formatting

Author

  • Tony Banik

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

Demo image: Bootstrap 4 Color Palette Generator

Author

  • Gilles Migliori

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.

Demo image: Color Palette

Author

  • Joshua Ward

Made with

  • HTML
  • CSS/SCSS

About the code

Color Palette

Pure CSS color palette.

Demo image: Color Palette

Author

  • Diana Choi

Made with

  • HTML
  • CSS

About the code

Color Palette

Color palette with CSS flexbox.

Demo Image: Color Wheel
Demo Image: Color Wheel

Color Wheel

Color wheel with HTML, CSS and JavaScript.
Made by thepheer
March 7, 2017

Demo Image: Color Palette Circles
Demo Image: Color Palette Circles

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

Demo Image: Color Palettes With Shades
Demo Image: Color Palettes With Shades

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

Demo Image: Pantone Color Search + Clipboard
Demo Image: Pantone Color Search + Clipboard

Pantone Color Search + Clipboard

Pantone color search with clipboard in HTML, CSS and JavaScript.
Made by Mike Weaver
November 3, 2016

Demo Image: Random Color Palette Generator
Demo Image: Random Color Palette Generator

Random Color Palette Generator

Added ability to toggle between light and dark background colors.
Made by Giana
March 20, 2016

Demo Image: Color Palettes
Demo Image: Color Palettes

Color Palettes

Click on the button to view a random color palette.
Made by Screeny
February 6, 2016

Demo Image: Color Palette
Demo Image: Color Palette

Color Palette

Click the color code to change the color!
Made by Philipp
January 8, 2016

Demo Image: Generate Palettes From An Image
Demo Image: Generate Palettes From An Image

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

Demo Image: Color Palette
Demo Image: Color Palette

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

Demo Image: Flattastic Pro Color Palette
Demo Image: Flattastic Pro Color Palette

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

Author

  • Felix Rilling

Made with

  • HTML / CSS (SCSS)

About the code

Color Swatch

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo Image: Color Palette
Demo GIF: Color Palette

Color Palette

Color swatches with hex values on click, actively selected and available to copy.
Made by Louis Coyle
June 11, 2013