- 20 CSS Color Palettes for Web Developers
- 1.GRADIENTS COLLECTION PREVIEW
- Made with
- Author
- Demo
- 2.COLOR PALETTES
- Made with
- Author
- Demo
- 3.CSS GRID: COLOR PALETTE
- Made with
- Author
- Demo
- 4.GRADIENT COLLECTION
- Made with
- Author
- Demo
- 5.DUOTONE FILTERING WITH CSS VARIABLES
- Made with
- Author
- Demo
- 6.COLOR PALETTE
- Made with
- Author
- Demo
- 7.AUTO COLOR PALETTE FORMATTING
- Made with
- Author
- Demo
- 8.BOOTSTRAP 4 COLOR PALETTE GENERATOR. INCLUDING COLOR VARIANTS
- Made with
- Author
- 26 CSS Color Palettes
- Related Articles
- Author
- Links
- Made with
- About a code
- Colour Palette Condensed
- Author
- Links
- Made with
- About a code
- Color Palettes
- Author
- Links
- Made with
- About a code
- Color Palette
- Author
- Links
- Made with
- About a code
- Gradients Collection Preview
- Author
- Links
- Made with
- About the code
- Color Palettes
- Author
- Links
- Made with
- About the code
- CSS Grid: Color Palette
- Author
- Links
- Made with
- About a code
- Gradient Collection
- Author
- Links
- Made with
- About the code
- Duotone Filtering with CSS Variables
- Author
- Links
- Made with
- Handy colors
20 CSS Color Palettes for Web Developers
Color is an essential part of design. And choosing the perfect color scheme is a step all web designers, must go through.
Below are 20 CSS Color Palettes for Web Developers.
1.GRADIENTS COLLECTION PREVIEW
Used CSS variables and flexbox.
Made with
Author
Demo
2.COLOR PALETTES
Color palettes with Flexbox.
Made with
Author
Demo
3.CSS GRID: COLOR PALETTE
Color palette that can be used in a real use case.
Made with
Author
Demo
4.GRADIENT COLLECTION
A small collection of gradients.
Made with
Author
Demo
See the Pen Gradient Collection by Tamino Martinius (@Zaku) on CodePen.
5.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.
Made with
HTML (Pug) / CSS (Stylus) / JavaScript
Author
Demo
6.COLOR PALETTE
Color palette using CSS Grid.
Made with
Author
Demo
7.AUTO COLOR PALETTE FORMATTING
Add/Edit/Remove Hex Colors from the array to update the palette.
Made with
Author
Demo
8.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.
Made with
Author
26 CSS Color Palettes
Collection of hand-picked free HTML and CSS color palette code examples from codepen and other resources. Update of February 2020 collection. 4 new items.
Related Articles
- jQuery Color Palettes
Author
Links
Made with
About a code
Colour Palette Condensed
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Color Palettes
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Color Palette
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Gradients Collection Preview
Used CSS variables and flexbox.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Color Palettes
Color palettes with Flexbox.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
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
Author
Links
Made with
About a code
Gradient Collection
A small collection of gradients.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
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
Author
Links
Made with
Handy colors
mistyrose mistyrose lavenderblush lavenderblush seashell seashell floralwhite floralwhite oldlace oldlace linen linen pink pink lightpink lightpink lightcoral lightcoral palevioletred palevioletred mediumvioletred mediumvioletred darkmagenta darkmagenta purple purple deeppink deeppink hotpink hotpink fuchsia fuchsia magenta magenta violet violet rosybrown rosybrown saddlebrown saddlebrown sienna sienna indianred indianred peru peru darksalmon darksalmon sandybrown sandybrown lightsalmon lightsalmon burlywood burlywood tan tan wheat wheat peachpuff peachpuff navajowhite navajowhite moccasin moccasin bisque bisque blanchedalmond blanchedalmond antiquewhite antiquewhite papayawhip papayawhip cornsilk cornsilk ivory ivory beige beige lightgoldenrodyellow lightgoldenrodyellow palegoldenrod palegoldenrod goldenrod goldenrod darkgoldenrod darkgoldenrod chocolate chocolate maroon maroon darkred darkred brown brown firebrick firebrick crimson crimson red red orangered orangered tomato tomato salmon salmon coral coral darkorange darkorange orange orange gold gold yellow yellow lemonchiffon lemonchiffon lightyellow lightyellow khaki khaki darkkhaki darkkhaki olive olive darkolivegreen darkolivegreen olivedrab olivedrab yellowgreen yellowgreen greenyellow greenyellow lawngreen lawngreen chartreuse chartreuse lime lime limegreen limegreen forestgreen forestgreen green green darkgreen darkgreen seagreen seagreen mediumseagreen mediumseagreen darkseagreen darkseagreen springgreen springgreen mediumspringgreen mediumspringgreen lightgreen lightgreen palegreen palegreen honeydew honeydew mintcream mintcream azure azure aquamarine aquamarine turquoise turquoise mediumturquoise mediumturquoise mediumaquamarine mediumaquamarine darkturquoise darkturquoise lightseagreen lightseagreen cadetblue cadetblue darkcyan darkcyan teal teal darkslategray darkslategray darkslategrey darkslategrey steelblue steelblue dodgerblue dodgerblue deepskyblue deepskyblue aqua aqua cyan cyan lightcyan lightcyan aliceblue aliceblue paleturquoise paleturquoise powderblue powderblue lightblue lightblue lightsteelblue lightsteelblue skyblue skyblue lightskyblue lightskyblue cornflowerblue cornflowerblue royalblue royalblue blue blue mediumblue mediumblue darkblue darkblue navy navy midnightblue midnightblue darkslateblue darkslateblue slateblue slateblue mediumslateblue mediumslateblue indigo indigo rebeccapurple rebeccapurple mediumpurple mediumpurple blueviolet blueviolet darkviolet darkviolet darkorchid darkorchid mediumorchid mediumorchid orchid orchid plum plum thistle thistle lavender lavender ghostwhite ghostwhite white white snow snow whitesmoke whitesmoke gainsboro gainsboro lightgray lightgray lightgrey lightgrey silver silver darkgray darkgray darkgrey darkgrey lightslategrey lightslategrey lightslategray lightslategray slategrey slategrey slategray slategray gray gray grey grey dimgray dimgray dimgrey dimgrey black black