Got the winter blues? Feeling uninspired? Or just looking for a fun, bright color palette to add some life to your projects? We’ve put together a free, trendy color scheme for you to use in any of your upcoming projects. Check it out below:
Featuring a subdued pink, a neutral creme, a bright green, a soft lilac, and an electric yellow/green, this palette has something for every kind of project. Working on something fun and exciting? Try mixing the green, creme, and yellow. If your current project requires a palette that’s a little more subtle, the pink and creme, pink and purple, or some combo of the three will work for you.
However you mix and match them, all combos of these colors look great together and will add a fresh, springy look to any of your sites. If you want to use them in any upcoming projects, see below for the hex and RGB codes.
- Pink: #ffc0cb // rgb(255, 192, 203);
- Creme: #fff4e6 // rgb(255, 244, 230);
- Green: #30f2c6 // rgb(48, 242, 198);
- Lilac: #ebd8f9 // rgb(235, 216, 249);
- Yellow: eff066 // rgb(230, 240, 102);
Remember, to use rgba instead of rgb, just add a fourth value within the parentheses at the end of the rgb numbers, and remember to write rgba instead of rgb. The value should be between 0 and 1 depending on how opaque you want the color to be — 1 for completely opaque, 0 for completely transparent.
Using CSS, it’s pretty easy to style a whole bunch of different elements of the same element type in different ways by assigning them different classes. However, if you want to get technical, this can also be achieved by using attribute selectors. Attribute selectors are used in CSS to select different HTML elements to style based […]
Don’t feel like creating a website from scratch for your next project? Check out any of these responsive HTML5 frameworks that’ll help you get going quickly and easily. 1. Bootstrap Bootstrap is a really popular framework brought to us by the people over at Twitter. It’s fully responsive and mobile friendly, uses two CSS preprocessors […]
Here’s a fun little CSS snippet that allows you to create text that looks like it’s on FIRE. It’s achieved using text-shadow and is a super easy effect to add to any of your projects. First you’ll need some HTML: <div id=“fire”>FIRE</div> That’s the easy part. Now for the CSS. Here’s what your styling should […]
When it comes to styling buttons, the possibilities are endless. Check out some of these snippets and tutorials to get some ideas for your next button creations! 1. Flat UI Buttons These colorful buttons have a flat design, hover effects, and push transitions. 2. Minimalist Hover Effect Buttons The button designs from this tutorial are […]
CSS’s word-wrap property can be used to break a really long word so that it continues on the next line rather than having the word extend beyond its potential boundaries so that it all stays on one line. Let’s say you had a really long word that was taking up way too much space, like […]