css-color-extractor - JS lib to extract colors from CSS.

  •        48

Extract colors (named, hex, rgb, rgba, hsl, and hsla) from CSS. This tool is useful if you are re-skinning a site with a new color scheme and need a starting point for a new stylesheet.



array-unique : ^0.2.1
color : ^0.10.1
postcss : ^5.0.2



Related Projects

mustard-ui - A starter CSS framework that actually looks good.

  •    CSS

Mustard is a starter CSS framework that actually looks good. You can start configuring the colors to suit your needs by first changing the $brand-color variable located in src/scss/base/base.scss from $color-green-500 to $color-indigo-500 or any other color you'd like. There are lots of colors that can be found in the src/scss/vars/colors.scss file.

scss-blend-modes - Using standard color blending functions in SASS.

  •    CSS

CSS doesn't natively support color blending the way that Photoshop does. This library attempts to fake that by allowing you to blend a foreground color with a background color in order to approximate color blending. This is not a dynamic blend; you can't use this to blend a color with an image. This was originally intended for use with the Compass Photoshop Drop Shadow Plugin but it proved impractical to integrate. Adobe has been working on a W3C spec to add blend modes to CSS3. However, CSS blend modes have extremely limited support in browsers, as of September 2013. This library is not a polyfill for those blend modes. A polyfill for dynamic blend modes will require something like SVG and JavaScript and would likely be quite complicated (or impossible).

css-colorguard - Keep a watchful eye on your css colors.

  •    Javascript

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. Colorguard uses the CIEDE2000 algorithm to determine the similarity of each of the colors in your CSS file. This algorithm is quite complex, but is used in the broadcasting community as the best approximation of human ability to discern differences in color. RGB on the other hand, is pretty bad at representing differences in color purely based on the numerical difference of the hex values.

open-color - Color scheme for UI design.

  •    CSS

Open color is an open-source color scheme optimized for UI like font, background, border, etc. Import the file to your project and use the variables.

color - :rainbow: Javascript color conversion and manipulation library

  •    Javascript

JavaScript library for immutable color conversion and manipulation with support for CSS color strings. Convert a color to a different space (hsl(), cmyk(), etc.).

colorme - Visualize The CSS Color Function

  •    Javascript

Visualize The CSS Color Function. ColorMe.io is built using Create React App. See that project for detailed documentation.

polychrome - 🎨 Easy color manipulation in ~2kb (gzipped)

  •    TypeScript

colorString can be a hex (3 or 6 digit), rgb(a), or hsl(a) string. Returns a polychrome object.

color-schemer - A sassy way to build color schemes

  •    CSS

Color schemer is a robust color toolset for Sass. It expands on the existing Sass color functions and adds things like RYB manipulation, * set-hue, * set-lightness, tint, shade and more. It also leverages these tools adding a full-featured color scheming tool that allows you to set one primary color and create whole color schemes around it. gem install color-schemer in your terminal.

crayon - Crayon.css is a list of css variables linking color names to hex values.

  •    CSS

Crayon.css is a list of css variables linking color names to hexadecimal values, usable with postCSS or with your favourite CSS preprocessor, being it Stylus, Sass or Less. Read more on http://riccardoscalco.github.io/crayon/.

zxx.lib.css - a css library for quick layout, especially for flow layout

  •    CSS

As you known, some CSS styles are used very frequently. For example, display:none - the most commonly used method for hiding elements, visibility:hidden - a very useful method for hiding elements, and so on. Actually, zxx.lib.css is a collection of these styles. It includes display, margin, padding, color(web safe color), font refer, vertical-align, float, ..., and many other common styles. In addition to these styles, some group styles that I think useful are also in.

corpus - Yet another CSS toolkit. Basically the stuff I use for most projects.

  •    CSS

Corpus is yet another CSS toolkit. It’s basically a collection of the things I find myself returning to for each new project. It uses Flexbox for the grid system, viewport-based heights and percentage-based widths, is heavily influenced by Basscss’s White Space module, and has a few useful greyscale color utilities. For syntax highlighting I'm using Prism.js and my own Predawn color scheme, with code set in Office Code Pro. Styles are written in SCSS. The docs currently live here: https://github.com/jamiewilson/corpus-site, and is kept in a separate repo (rather than a branch) in order to make it possible to symlink the .scss files into other projects. This makes it easier to make revisions back into the Corpus source files within the context of the docs site and also requires less git pulling to keep separate projects up to date.

stackicons - Icon font and Sass-based construction kit for Stackicons-Social, which supports multiple button shapes and a unique "multi-color" option in CSS for over 60 social brands

  •    CSS

Icon font and Sass-based construction kit for Stackicons-Social, which supports multiple button shapes and a unique "multi-color" option in CSS for over 60 social brands.

FlexiColorPicker - A pure JavaScript color picker - no images, external libraries, CSS or 1px divs.

  •    Javascript

FlexiColorPicker is based on HSV color model. The only two parts of the color picker are therefore the slider for selecting hue value and the picker for selecting saturation and value. Both the slider and picker are HTML elements (usually <div>'s) that serve as wrappers for SVG/VML gradient rectangles. The slider gradient rectangle represents the hue value (gradient with 9 stop-colors). The two overlapping black and white gradient rectangles of the picker represent the saturation and value values. The top level elements (<svg> in case of SVG enabled browser and <div> in case of VML enabled browser) that wrap each of the slider and picker gradient rectangles have set width and height to 100% which means that the color picker components (slider and picker) adjust themselfs automatically to the dimensions of the slider and picker HTML elements. This is the no-hassle form of creating the color picker. This is the recommended call.

styled-components-theme - Defines themes via flexible color selectors for use with styled-components

  •    Javascript

styled-components-theme generates selectors for colors in your styled-components theme that allows color manipulation, using the color library via calls on the selectors themselves. A selector, in this context, is defined as a function that looks like (props) => props.theme.myColor that the styled-components library accepts as a template variable.

nord - An arctic, north-bluish color palette.

  •    CSS

An arctic, north-bluish color palette. Created for the clean- and minimal flat design pattern to achieve a optimal focus and readability for code syntax highlighting and UI. It consists of a total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful ambiance.

sweep - :rainbow: A JavaScript library for smooth color transitions

  •    Javascript

A JavaScript library for smoother color transitions. Project page lives here. sweep.js is a small JavaScript library (5kb zipped) that enables proper color transitions through the HSL and HSLuv spaces. Ordinary CSS transitions or existing frameworks convert HSL colors to RGB before transitioning. sweep.js addresses this by letting you transition through the color spectrum.

FlexiColorPicker - A pure JavaScript color picker - no images, external libraries, CSS or 1px divs.

  •    Javascript

A pure JavaScript color picker - no images, external libraries, CSS or 1px divs.

atom-pigments - An Atom package to display colors in project and files.

  •    CoffeeScript

Pigments will scan source files in your project directories looking for colors and will build a palette with all of them. Then for each opened file, it will use the palette to evaluate the value of a given color. The legible source paths can be defined through various settings either at the global or per project level. By default colors in every file will be highlighted, to limit the display of colors to the desired filetype only please see the Defining Where Pigments Applies below. Pigments supports out of the box most of the color transformations functions and expressions of the three biggest CSS pre-processors out there, namely LESS, Sass and Stylus. However, it doesn't mean pigments is able to parse and understand all of these languages constructs. For the moment, Pigments' aim is to support the widest range of usage, even if it implies reducing its ability to parse certain complex constructs. You can refer to the parser specs for an exhaustive list of the supported expressions.