WebAppers

/ best free open source web resources /

Shopify

Find Image Colors and Create Responsive CSS Gradient

Posted · Category: Color Schemes, MIT License

The delay between HTTP objects being requested/recieved leaves a timeframe where a webpage can look incomplete. Inspired by Soundclouds’s use of random gradients, Gradify can analyse an image for the 4 most common colors and create a gradient (or solid color) to act as a placeholder image. Gradify is a module which finds the most prominent colors in any image, and produces a scalable, responsive CSS gradient. This can provide a less jarring experience as image placeholders.

graident-background

Requirements: –
Demo: http://gradifycss.com/
License: MIT License

Color Extraction Experiment using Vibrant.js

Posted · Category: Color Schemes, License Free

Codrops has shared a fun little color extraction experiment with us. The idea is to create a color palette from an image with a subtle effect on the image itself and some fanciness on the palette.

They are using Vibrant.js by Jari Zwarts to extract the colors from the images, and CSS Filters to transition the image to a black and white version. They also implemented a simple slider with a special “curtain” effect. Please note that this experiment uses some CSS properties that might not work in older browsers (CSS Animations, CSS Filters) though.

coloring

Requirements: –
Demo: http://tympanus.net/Development/ColorExtraction/
License: License Free

An Interactive Drag and Drop Coloring Experiment

Posted · Category: Color Schemes, License Free

Interactive Drag and Drop Coloring Concept is a little fun experiment where you can color a website mockup by dragging and dropping a color droplet from a palette. The idea is to simply drag a color from a color palette to a website mockup and color designated areas of it like sections or texts. You might have encountered customization tools before, but Codrops wanted to add some fun to this idea and make it enjoyable to use.

You can drag a color from the color palette and drop it on any area that lights up with a blue outline, including text elements. Once the droplet that you are dragging gets dropped on a content area, a fun little Google Material like animation happens and the whole area gets filled with a colored circle. For that effect we use an SVG element that we create on the fly and then scale it up and fade it in with a CSS transition.

coloring

Requirements: –
Demo: http://tympanus.net/Development/InteractiveColoringConcept/
License: License Free

Discover New Fonts and Colors with Every Tab

Posted · Category: Color Schemes, Tools

Palletab is a Chrome extension which uses Google fonts and amazing ColourLovers palettes to inspire you with fresh and clean inspiration every time you hit that new tab button. It’s a great tool for finding the suitable fonts for your websites or web applications.

palettab

Requirements: Chrome
Demo: http://palettab.com/
License: License Free

Avoid Using Similar Colors with CSS Colorguard

Posted · Category: Color Schemes

Every CSS project starts out with good intentions, but inevitably, one too many people eye-dropper colors into nooks and crannies that you never knew existed. CSS Colorguard helps you maintain the color set that you want, and warns you when colors you’ve added are too similar to ones that already exist. Naturally, it’s all configurable to your tastes.

colors-css

Requirements: –
Demo: https://github.com/SlexAxton/css-colorguard
License: Apache License 2.0

RandomColor.js – Random Color Generator for JavaScript

Posted · Category: Color Schemes, MIT License

There are lots of clever one-liners for generating random colors. Unfortunately, They usually produces lots of greys and browns and murky greens.

RandomColor generates attractive colors by default. More specifically, randomColor produces bright colors with a reasonably high saturation. This makes randomColor particularly useful for data visualizations and generative art. RandomColor is a color generator for JavaScript.

similar-colors

Requirements: JavaScript Framework
Demo: http://llllll.li/randomColor/
License: MIT License

Find Daily Colorful Inspiration with The Day’s Color

Posted · Category: Color Schemes, License Free

Everything you see contains a palette. Some beautiful. Some ‘ugly’. Some dark. Some light. Some hot. Some cold. But they are all inspiring. They are all engaging. Color can adjust our perception. It can effect the way our food tastes. It can increase the emotional and intuitive level of an experience.

The goal of The Day’s Color is to find colorful inspiration from things that surround us. These colors have inspired thought, art, music, memories. Everything. These colors have conjured thoughts outside ourselves. Tapped into things that we may not understand, at first. But, in a sense, make things so much clearer.

the-days-color

Requirements: –
Demo: http://www.thedayscolor.com/
License: License Free

Pictaculous – A Color Palette Generator via Email

Posted · Category: Color Schemes, License Free

Ever wondered what colors to use with an image? Just email a picture to Pictaculous, and they’ll send back some color suggestions. Simple as that.

There are many tools out there that will analyze the colors of an uploaded picture, but the beautiful thing about Pictaculous is you can snap pictures from your mobile device, then get your results within minutes. All while you’re on the go. Think about it. When are you always inspired? When you’re out hiking, shopping, at the bookstore, on vacation, etc.

email-palette

Requirements: –
Demo: http://www.pictaculous.com/
License: License Free

jQuery.Swatches Turns Div into a Sweet Color Swatch

Posted · Category: Color Schemes, MIT License

jQuery.swatches is a free to use that turns a one-line div into a sweet color swatch. You can customize the class as you want. Using different classes would allow you to render groups of swatches at individual times by calling swatchify() on a different selector.

color-swatches

Requirements: jQuery Framework
Demo: http://maxmackie.com/jquery.swatches/
License: MIT License

Web Safe Colors Reference Guide for Web Designers

Posted · Category: Color Schemes

There are still a lot of web developers that like to design with a simple palette – the hex values are easy to memorize and the palette is still large enough for typical stuff like link colors and borders. Web Safe Colors was created for those who like to keep things simple.

A lot of web designers still use web safe colors in their designs so here is a little responsive website as a visual and quick reference guide. It’s great cause you can have it open on your tablet or mobile device while you design.

web-safe-colors

Requirements: –
Demo: http://websafecolors.info/
License: License Free

Page 1 of 41234»
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons