WebAppers

/ best free open source web resources /

Shopify

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

Twitter Bootstrap Colorpicker and Datepicker

Posted · Category: Calendar, Color Schemes

Twitter Bootstrap is getting very popular recently. Stefan Petre has developed two really useful plugins for Bootstrap in order to enhance the experience. They are Colorpicker for Bootstrap and Datepicker for Bootstrap.

Colorpicker for Bootstrap can let you add color picker to text field or to any other element. It can be used as a component on Bootstrap. It supports multiple formats: hex, rgb, rgba, hsl, hsla.

Datepicker for Bootstrap can let you add datepicker picker to field or to any other element. It supports formats: dd, d, mm, m, yyyy, yy, with separators: -, /, .

bootstrap-datepicker-calendar

Requirements: Bootstrap Framework
Demo: http://www.eyecon.ro/bootstrap-colorpicker/
Demo: http://www.eyecon.ro/bootstrap-datepicker/
License: Apache 2.0 License

Generate Consistent Color Palette with Colllor

Posted · Category: Color Schemes, License Free

With Colllor it is much easier to generate a consistent color palette with just a few clicks. You should use colors consistently, so you have a common look and feel throughout your design. All the alternative proposals produced by Colllor derive from the same color and they all have a common denominator sharing hue, lightness or saturation values.

Colllor will let you find the exact value of darker shades of any color, not just something that ‘looks darker’. That will be a huge step towards professionally looking color combinations. And also, you can use plain English or Hex color names.

colllor2

Requirements: -
Demo: http://colllor.com
License: License Free

Grab the Dominant Color or Color Palette from Images

Posted · Category: CC License, Color Schemes

Color Thief is a script for grabbing the dominant color or color palette from an image. Uses Javascript and the canvas tag to make it happen. This script could be useful for sites that sort and search by color.

With Color Thief you can also build a UI that adapts to the colors of an image. For example, you could add color accents to the UI by changing the font or border color depending on what image is currently being displayed in your portfolio.

A recent example of a color adapting UI is seen on Google Chrome’s new home tab. The dominant color of the favicon is used as the bottom border color on the screenshot.

color-thief

Requirements: JavaScript and Canvas
Demo: http://lokeshdhakar.com/projects/color-thief/
License: Creative Commons 2.5 License

CSS Prism – A CSS Color Spectrum Inspector

Posted · Category: Color Schemes, License Free

CSS Prism is a CSS color spectrum inspector. Input the path to any .css file, and it will output an easy to scan display of all hex colors from the file. Unwanted colors can be edited via a Photoshop-like color picker and the resulting .css file can be downloaded for your convenience.

The CSS Prism Bookmarklet will insert links to any webpage’s linked .css files just inside the body tag. CSS Prism will be quite helpful to you if you are building more sites at work.

css-prism

Requirements: -
Demo: http://cssprism.com/
License: License Free

Page 1 of 3123»
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons