Trendy Web Color Palettes and Material Design Color Schemes & Tools
The latest web design trends have brought to light the fierce rivalry between Color and Typography to dominate the visual experience. Everybody is happy to admire shiny and vibrant colour palettes 🌈, they stimulate the senses, and their qualities go beyond simply being visual.
As we discussed in our article Color Exploration in Web Design, Design systems contributed to the trend of the importance of color, and took the palette even further than it was before, (palettes previously only consisting of the principal color of the brand with a highlight color and a few neutrals). Now color palettes contain more elements and are often not just a visual study but a semiotic one, being much more complex and leading us to explore concepts such as strong contrasts, chromatic sequences, colored backgrounds, colors modulated by neutrals, hyper saturated palettes, acid colors, etc
In this article we’ve picked the latest vibrant color schemes from Awwwards sites and a selection of elements from our collection Color Exploration. Enjoy!
1. Sites of the Day with Great Color Schemes
In the second part of this article, we’ve done a list of the color palettes which have been the most present over the last few months. #0054dbcb #fffb91 #f44b37 #bfe6d4 Goliath Entertainment By Ronin161 #c1f20f #ff00a1 #252626 #0b30fb MyLinkIsYourLink By Andre Mezzomo, Bernardo Tavares, Rodrigo Rocha & Marco Correa ##F7f639 #fd92a6 #f267a0 #1b1464 Unleashed By WorkSmiths & Enjoythis #507844 #253022 #ae4f2f #ffffff Michael McManus Architects By Grafik #3d6d79 #d69d66 #e0e2ee #ffffff Swab The World By Locomotive #e1b493 #d49b4a #99a98f #5c82a6 Album Colors Of The Year 2020 By José Gasparian, Marcos Rodrigues & Edgard Kozlowski #ed7b49 #f6bde8 #b8afff #8cc1a7 Wild Souls By Big Horror Athens & No Matter #607262 #e5b9b0 #f4e3d1 #faf9f4 Enid By Nathan Taylor #f1b6d4 #006450 #ff4a50 #f2d832 Notorious Nooch Co. By Wildish & Co. #1d1d1d #0053e1 #fef335 #ff4617 POLA By mount #d0d1ad #84c53 #f7ea49 #104de9 Hauska By Hauska #f9c5d1 #f46e6f #148c8a #2e3359 Bennett Tea By Tubik Studio #cea5ad #cbff00 #000000 #72aabb Rouser By ED. #aea2f0 #fed040 #1bb476 #0b43dc #fc3f21 #000000 LM Chabot By Pier-Luc Cossette, Deven Caron & Demande Spéciale △ 🌈 △ 🌈 △ 🌈 △
2. Color Palettes Generators and Useful Tools
We’re lucky to have access to numerous Color Palette Generators and other tools that help us to play with all the color variations and Color Schemes. These tools help us to start with a random color or pick a primary color, and obtain secondary combinations, complementary colors, shades, etc. We can understand and modify the physical properties of color, apply variations of tone, brightness, or even generate gradient palettes.
Coming up we’ll show you the most interesting tools out there, and if you like these, don’t forget to check in with our collection Handy Tools and Apps for Designers on a regular basis where you can find new apps with great ideas to help your creative process.
Coolors is a super fast color schemes generator to create your palettes, share palettes, export them to different formats like SVG, PDF, or SCSS and get inspired by thousands of color schemes.
Hue Snap is a color palette generator which allows you to use an existing collection of pallet colors, or make your own by uploading an image and using the color picker to create a customized color palette.
MATERIAL DESIGN – COLOR TOOL
This tool lets you create, share and apply color pallets to your UI designs, and see how colors picked by you would look on real project examples.
See real world examples of how color palette options would work on a website. This tool is for those who are not sure about colors on their project and want to see examples of colors being used in a design project. Happy Hues also has information about psychology of color and color terminology.
HAIL PIXEL – COLOR
This simple tool is a fun way to create a complimentary palette of colors, you simply move the cursor up and down to select the color, click to save then move horizontally to the next color, eventually creating a full pallet.
KRHOMA: THE AI COLOR TOOL
Khroma is an AI color tool for designers that learns from your preferences in order to create unlimited palettes.
PIGMENT BY SHAPE FACTORY
Generate your favorite colors by using two settings of pigment and lighting. Pigment also gives you the hex code, RGB values and Pantone code of each color you want, also it’s easy to use and free.
- Pigment by Shape Factory – Colors library selected by pigments and lighting In Handy Tools and Apps for Designers
This remapping and editing color palette tool, designed by Gabriel Adorf, allows you to create a basic palette for UI Design, with a smooth dragging feature to increase or decrease the hue, it also allows you to import, analyze and edit existing color schemes.
Move your mouse around the screen, and simply click to start building your own palettes of colour. This tool allows you to save your colour in several formats such as Less, SCSS, PNG, etc.
HTML COLOR CODES
Features Hex color codes, RGB and HSL values with their color picker, a color chart and a full list of the 140 HTML color names.
A tool useful for choosing text and background colors for your designs. You can play around with the settings or just click the “random” button to get good ready made color compositions.
A free and open platform for anyone looking for color inspiration, containing over a thousand trendy, hand-picked color palettes.
A classic tool to create color schemes with the color wheel or browse thousands of color combinations from the Adobe community.
Another classic tool for creating color combinations. Paletton is a great learning tool helping us to understand the fundamentals of Color Theory.
A color palette generator with playful settings, which allows you to really experiment when you’re looking for your color schemes.
COLOR DESIGNER – COLOR TOOLS