Hello everyone, let me introduce myself first.

My name is Michael Andreuzza, and I working on Colors & Fonts & Wicked Templates.

Right now I am redesigning Wicked Templates to something cooler. I am also sending a newsletter for devs & UI/UX designers on Tuesdays, TUF.

About the promised colours.

When I was learning how to make websites I started by working on Colors & Fonts. I wanted to give back to the community because that's how I learned, with free resources around the web.

This is Colors & Fonts.

And it has some tools that you can use for colour and typography. The site is used by a lot of users, from 400 to 700 users daily.

Also, I am no one, but I curated the colours myself.

Color Tools

This tools will allow you to copy-paste the CSS straight into your project.

• Colour palettes.
• Gradient Patterns by Jordan.
• Gradients.
• Contrast.
• Material UI Colors.
• Tailwind CSS colours.
• Colour Converter.
• Web Safe Colors.

For example, the colours come as a Hex colour, just like this.

#F9DC5C

Then for the Gradient, you will get the CSS Code with fallback, just like this.

background: #FF149D;
/* fallback for old browsers */
background: -webkit-linear-gradient(223.88deg, #FF149D 8.89%, #620F32 94.31%);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(223.88deg, #FF149D 8.89%, #620F32 94.31%);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

If you do not want complete snippet fallbacks you get this code by clicking on it.

linear-gradient(223.88deg, #FF149D 8.89%, #620F32 94.31%)

Typography Tools

On the typography tools, you can download, copy-paste, edit and preview variable fonts from Google fonts and PangramPangram, font pairings with Google Fonts and also copy glyphs.

• Variable Fonts
• Font Pairings.
• Glyphs.

On the Variable fonts, you can copy-paste a whole @font-face declaration ( I hope no one has the handle @font-face) into your project too, and it looks like this.

@font-face {
    font-family: 'MyFontName';
    src: url('../fonts/myfont.eot'); /* IE9 Compat Modes */
    src: url('../fonts/myfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/myfont.woff2') format('woff2'), /* Modern Browsers */
        url('../fonts/myfont.woff') format('woff'), /* Modern Browsers */
        url('../fonts/myfont.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../fonts/myfont.svg') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}

cool bananas, right?

On the font pairings, you can also copy-paste the import, and it looks like this.

@import url('https://fonts.googleapis.com/css?family=EB+Garamond|Paytone+One&display=swap')

I will be redesigning the site very soon.

Yeah, the site is built with Bulma and Vue and, to be honest, I want to make it with Tailwind.

At the same time, I will learn Next.js or Alpine.js while redesigning it, I am pretty impatient for this happen, is going to be fun.

Any question? Aks me, and I will answer.

You can comment here or reach me out on Twitter.

have a great day.

/Mike