Colorify.css is a Open Source toolkit for developing with HTML, and CSS. Colorify makes your web developing life smooth by reducing the stress you put in searching for various colors and their hexcode. All colors you can think of in one place.you can get probably all the colours. Choose your colour to make your application colorfull.
V1.0 is under development.
Want to get Colorify directly into your project? Use Colorify directly using one of the CDN servers provided below.
Copy-paste the stylesheet into your before all other stylesheets to load our CSS.
Or use the CDN provided by jsDelivr to load our CSS. Starter Template Are you starting a new project? Or, maybe just a new web page. Why not jump right into new things and skip the part of adding everything from scratch!<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Colorify CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/raxraj/colorify/src/minified/colorify.min.css">
<!--link rel="stylesheet" href="https://cdn.global.colorify.tech/src/minified/colorify.min.css"-->
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>Let's jump right into coloring your Webpage using our built-in classes.
The Material Design color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors. They’ve been designed to work harmoniously with each other.
A single material design color is made up of a hue such as "red", and shade, such as "500".
You may add a Background color with "red" hue and "500" shade by adding .cy-bg-mt-red500 class in your HTML Element.
<div class="cy-bg-mt-red500">Hello World</div>You may change your Text color to "red" hue and "500" shade by adding .cy-text-mt-red500 class in your HTML Element.
<div class="cy-text-mt-red500">Hello World</div>Curious, How many Material colors does Colorify supports. Explore the Complete Material Pallete.
Decided to stick to the traditional HTML Colors? No Problem. We got you covered. All 140 HTML Colors are supported by all the Modern Browsers.
You can add an HTML background color by simply using the name in Camel-Case of the HTML color you want to add in the Colorify class styling Option(cy-bg-colorName). To add HTML Background color of "ForestGreen" color add .cy-bg-forestGreen
<div class="cy-bg-forestGreen">Hello World</div>You can add an HTML text color by simply using the name in Camel-Case of the HTML color you want to add in the Colorify class styling Option(cy-text-colorName). To add HTML text color of "DeepPink" color add .cy-text-deepPink
<div class="cy-text-deepPink">Hello World</div>Do you really have a Color Picker Extension in your browser for picking up the colors of Social Media and using them in your Web Page? Consider this! We have 36 Social Colors including the top notch to the one you use in hiding. Hop over to Social Colors Pallete for a complete list of Social Colors supported.
You can add a Social Color background to any of your element by adding the Social Color name in camelCase. For instance : You can add "Reddit" Social Color by adding .cy-bg-sc-reddit class in your HTML element.
<div class="cy-bg-sc-reddit">Hello World</div>You can add Social Colors to your text by adding the .cy-text-sc-socialName class in the element. To add a Facebook social color to your text add .cy-text-sc-facebook class in the element.
<div class="cy-text-sc-facebook">Hello World</div>Searching for gradient online could get messy if you don't have the right type of resource. Kuddos! You got lucky Colorify have a set of standard Gradients which are very well supported by most of the modern browser.
You can add a Gradient background to any of your element by adding the name of the gradient in camelCase. For instance : You can add "Azure Lane" Color gradient by adding .cy-bg-gd-azureLane class in your HTML element.
<div class="cy-bg-gd-jshine">Hello World</div>
<div class="cy-bg-gd-jshine gd-tl">Hello World</div>
<div class="cy-bg-gd-jshine gd-tb">Hello World</div>
<div class="cy-bg-gd-jshine gd-tt">Hello World</div>Gradients are amazing, aren't they? Have a Look on the list of Gradients supported by Colorify.
If you have a patch or have stumbled upon an issue with Colorify, you can contribute this back to the code. Please read our contributor guidelines for more information how you can do this.