Fast, small color manipulation and conversion for JavaScript

Related tags

Color TinyColor
Overview

TinyColor

JavaScript color tooling

TinyColor is a small, fast library for color manipulation and conversion in JavaScript. It allows many forms of input, while providing color conversions and other color utility functions. It has no dependencies.

Build Status

Including in a browser

Download tinycolor.js or install it with bower:

bower install tinycolor

Then just include it in the page in a script tag:

<script type='text/javascript' src='tinycolor.js'></script>
<script type='text/javascript'>
var color = tinycolor("red");
</script>

Including in node

tinycolor may also be included as a node module like so:

npm install tinycolor2

Then it can be used in your script like so:

var tinycolor = require("tinycolor2");
var color = tinycolor("red");

Usage

Call tinycolor(input) or new tinycolor(input), and you will have an object with the following properties. See Accepted String Input and Accepted Object Input below for more information about what is accepted.

Accepted String Input

The string parsing is very permissive. It is meant to make typing a color as input as easy as possible. All commas, percentages, parenthesis are optional, and most input allow either 0-1, 0%-100%, or 0-n (where n is either 100, 255, or 360 depending on the value).

HSL and HSV both require either 0%-100% or 0-1 for the S/L/V properties. The H (hue) can have values between 0%-100% or 0-360.

RGB input requires either 0-255 or 0%-100%.

If you call tinycolor.fromRatio, RGB and Hue input can also accept 0-1.

Here are some examples of string input:

Hex, 8-digit (RGBA) Hex

tinycolor("#000");
tinycolor("000");
tinycolor("#369C");
tinycolor("369C");
tinycolor("#f0f0f6");
tinycolor("f0f0f6");
tinycolor("#f0f0f688");
tinycolor("f0f0f688");

RGB, RGBA

tinycolor("rgb (255, 0, 0)");
tinycolor("rgb 255 0 0");
tinycolor("rgba (255, 0, 0, .5)");
tinycolor({ r: 255, g: 0, b: 0 });
tinycolor.fromRatio({ r: 1, g: 0, b: 0 });
tinycolor.fromRatio({ r: .5, g: .5, b: .5 });

HSL, HSLA

tinycolor("hsl(0, 100%, 50%)");
tinycolor("hsla(0, 100%, 50%, .5)");
tinycolor("hsl(0, 100%, 50%)");
tinycolor("hsl 0 1.0 0.5");
tinycolor({ h: 0, s: 1, l: .5 });
tinycolor.fromRatio({ h: 1, s: 0, l: 0 });
tinycolor.fromRatio({ h: .5, s: .5, l: .5 });

HSV, HSVA

tinycolor("hsv(0, 100%, 100%)");
tinycolor("hsva(0, 100%, 100%, .5)");
tinycolor("hsv (0 100% 100%)");
tinycolor("hsv 0 1 1");
tinycolor({ h: 0, s: 100, v: 100 });
tinycolor.fromRatio({ h: 1, s: 0, v: 0 });
tinycolor.fromRatio({ h: .5, s: .5, v: .5 });

Named

tinycolor("RED");
tinycolor("blanchedalmond");
tinycolor("darkblue");

Accepted Object Input

If you are calling this from code, you may want to use object input. Here are some examples of the different types of accepted object inputs:

{ r: 255, g: 0, b: 0 }
{ r: 255, g: 0, b: 0, a: .5 }
{ h: 0, s: 100, l: 50 }
{ h: 0, s: 100, v: 100 }

Methods

getFormat

Returns the format used to create the tinycolor instance

var color = tinycolor("red");
color.getFormat(); // "name"
color = tinycolor({r:255, g:255, b:255});
color.getFormat(); // "rgb"

getOriginalInput

Returns the input passed into the constructor used to create the tinycolor instance

var color = tinycolor("red");
color.getOriginalInput(); // "red"
color = tinycolor({r:255, g:255, b:255});
color.getOriginalInput(); // "{r: 255, g: 255, b: 255}"

isValid

Return a boolean indicating whether the color was successfully parsed. Note: if the color is not valid then it will act like black when being used with other methods.

var color1 = tinycolor("red");
color1.isValid(); // true
color1.toHexString(); // "#ff0000"

var color2 = tinycolor("not a color");
color2.isValid(); // false
color2.toString(); // "#000000"

getBrightness

Returns the perceived brightness of a color, from 0-255, as defined by Web Content Accessibility Guidelines (Version 1.0).

var color1 = tinycolor("#fff");
color1.getBrightness(); // 255

var color2 = tinycolor("#000");
color2.getBrightness(); // 0

isLight

Return a boolean indicating whether the color's perceived brightness is light.

var color1 = tinycolor("#fff");
color1.isLight(); // true

var color2 = tinycolor("#000");
color2.isLight(); // false

isDark

Return a boolean indicating whether the color's perceived brightness is dark.

var color1 = tinycolor("#fff");
color1.isDark(); // false

var color2 = tinycolor("#000");
color2.isDark(); // true

getLuminance

Returns the perceived luminance of a color, from 0-1 as defined by Web Content Accessibility Guidelines (Version 2.0).

var color1 = tinycolor("#fff");
color1.getLuminance(); // 1

var color2 = tinycolor("#000");
color2.getLuminance(); // 0

getAlpha

Returns the alpha value of a color, from 0-1.

var color1 = tinycolor("rgba(255, 0, 0, .5)");
color1.getAlpha(); // 0.5

var color2 = tinycolor("rgb(255, 0, 0)");
color2.getAlpha(); // 1

var color3 = tinycolor("transparent");
color3.getAlpha(); // 0

setAlpha

Sets the alpha value on a current color. Accepted range is in between 0-1.

var color = tinycolor("red");
color.getAlpha(); // 1
color.setAlpha(.5);
color.getAlpha(); // .5
color.toRgbString(); // "rgba(255, 0, 0, .5)"

String Representations

The following methods will return a property for the alpha value, which can be ignored: toHsv, toHsl, toRgb

toHsv

var color = tinycolor("red");
color.toHsv(); // { h: 0, s: 1, v: 1, a: 1 }

toHsvString

var color = tinycolor("red");
color.toHsvString(); // "hsv(0, 100%, 100%)"
color.setAlpha(0.5);
color.toHsvString(); // "hsva(0, 100%, 100%, 0.5)"

toHsl

var color = tinycolor("red");
color.toHsl(); // { h: 0, s: 1, l: 0.5, a: 1 }

toHslString

var color = tinycolor("red");
color.toHslString(); // "hsl(0, 100%, 50%)"
color.setAlpha(0.5);
color.toHslString(); // "hsla(0, 100%, 50%, 0.5)"

toHex

var color = tinycolor("red");
color.toHex(); // "ff0000"

toHexString

var color = tinycolor("red");
color.toHexString(); // "#ff0000"

toHex8

var color = tinycolor("red");
color.toHex8(); // "ff0000ff"

toHex8String

var color = tinycolor("red");
color.toHex8String(); // "#ff0000ff"

toRgb

var color = tinycolor("red");
color.toRgb(); // { r: 255, g: 0, b: 0, a: 1 }

toRgbString

var color = tinycolor("red");
color.toRgbString(); // "rgb(255, 0, 0)"
color.setAlpha(0.5);
color.toRgbString(); // "rgba(255, 0, 0, 0.5)"

toPercentageRgb

var color = tinycolor("red");
color.toPercentageRgb() // { r: "100%", g: "0%", b: "0%", a: 1 }

toPercentageRgbString

var color = tinycolor("red");
color.toPercentageRgbString(); // "rgb(100%, 0%, 0%)"
color.setAlpha(0.5);
color.toPercentageRgbString(); // "rgba(100%, 0%, 0%, 0.5)"

toName

var color = tinycolor("red");
color.toName(); // "red"

toFilter

var color = tinycolor("red");
color.toFilter(); // "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff0000,endColorstr=#ffff0000)"

toString

Print to a string, depending on the input format. You can also override this by passing one of "rgb", "prgb", "hex6", "hex3", "hex8", "name", "hsl", "hsv" into the function.

var color1 = tinycolor("red");
color1.toString(); // "red"
color1.toString("hsv"); // "hsv(0, 100%, 100%)"

var color2 = tinycolor("rgb(255, 0, 0)");
color2.toString(); // "rgb(255, 0, 0)"
color2.setAlpha(.5);
color2.toString(); // "rgba(255, 0, 0, 0.5)"

Color Modification

These methods manipulate the current color, and return it for chaining. For instance:

tinycolor("red").lighten().desaturate().toHexString() // "#f53d3d"

lighten

lighten: function(amount = 10) -> TinyColor. Lighten the color a given amount, from 0 to 100. Providing 100 will always return white.

tinycolor("#f00").lighten().toString(); // "#ff3333"
tinycolor("#f00").lighten(100).toString(); // "#ffffff"

brighten

brighten: function(amount = 10) -> TinyColor. Brighten the color a given amount, from 0 to 100.

tinycolor("#f00").brighten().toString(); // "#ff1919"

darken

darken: function(amount = 10) -> TinyColor. Darken the color a given amount, from 0 to 100. Providing 100 will always return black.

tinycolor("#f00").darken().toString(); // "#cc0000"
tinycolor("#f00").darken(100).toString(); // "#000000"

desaturate

desaturate: function(amount = 10) -> TinyColor. Desaturate the color a given amount, from 0 to 100. Providing 100 will is the same as calling greyscale.

tinycolor("#f00").desaturate().toString(); // "#f20d0d"
tinycolor("#f00").desaturate(100).toString(); // "#808080"

saturate

saturate: function(amount = 10) -> TinyColor. Saturate the color a given amount, from 0 to 100.

tinycolor("hsl(0, 10%, 50%)").saturate().toString(); // "hsl(0, 20%, 50%)"

greyscale

greyscale: function() -> TinyColor. Completely desaturates a color into greyscale. Same as calling desaturate(100).

tinycolor("#f00").greyscale().toString(); // "#808080"

spin

spin: function(amount = 0) -> TinyColor. Spin the hue a given amount, from -360 to 360. Calling with 0, 360, or -360 will do nothing (since it sets the hue back to what it was before).

tinycolor("#f00").spin(180).toString(); // "#00ffff"
tinycolor("#f00").spin(-90).toString(); // "#7f00ff"
tinycolor("#f00").spin(90).toString(); // "#80ff00"

// spin(0) and spin(360) do nothing
tinycolor("#f00").spin(0).toString(); // "#ff0000"
tinycolor("#f00").spin(360).toString(); // "#ff0000"

Color Combinations

Combination functions return an array of TinyColor objects unless otherwise noted.

analogous

analogous: function(, results = 6, slices = 30) -> array<TinyColor>.

var colors = tinycolor("#f00").analogous();

colors.map(function(t) { return t.toHexString(); }); // [ "#ff0000", "#ff0066", "#ff0033", "#ff0000", "#ff3300", "#ff6600" ]

monochromatic

monochromatic: function(, results = 6) -> array<TinyColor>.

var colors = tinycolor("#f00").monochromatic();

colors.map(function(t) { return t.toHexString(); }); // [ "#ff0000", "#2a0000", "#550000", "#800000", "#aa0000", "#d40000" ]

splitcomplement

splitcomplement: function() -> array<TinyColor>.

var colors = tinycolor("#f00").splitcomplement();

colors.map(function(t) { return t.toHexString(); }); // [ "#ff0000", "#ccff00", "#0066ff" ]

triad

triad: function() -> array<TinyColor>.

var colors = tinycolor("#f00").triad();

colors.map(function(t) { return t.toHexString(); }); // [ "#ff0000", "#00ff00", "#0000ff" ]

tetrad

tetrad: function() -> array<TinyColor>.

var colors = tinycolor("#f00").tetrad();

colors.map(function(t) { return t.toHexString(); }); // [ "#ff0000", "#80ff00", "#00ffff", "#7f00ff" ]

complement

complement: function() -> TinyColor.

tinycolor("#f00").complement().toHexString(); // "#00ffff"

Color Utilities

tinycolor.equals(color1, color2)
tinycolor.mix(color1, color2, amount = 50)

random

Returns a random color.

var color = tinycolor.random();
color.toRgb(); // "{r: 145, g: 40, b: 198, a: 1}"

Readability

TinyColor assesses readability based on the Web Content Accessibility Guidelines (Version 2.0).

readability

readability: function(TinyColor, TinyColor) -> Object. Returns the contrast ratio between two colors.

tinycolor.readability("#000", "#000"); // 1
tinycolor.readability("#000", "#111"); // 1.1121078324840545
tinycolor.readability("#000", "#fff"); // 21

Use the values in your own calculations, or use one of the convenience functions below.

isReadable

isReadable: function(TinyColor, TinyColor, Object) -> Boolean. Ensure that foreground and background color combinations meet WCAG guidelines. Object is optional, defaulting to {level: "AA",size: "small"}. level can be "AA" or "AAA" and size can be "small" or "large".

Here are links to read more about the AA and AAA requirements.

tinycolor.isReadable("#000", "#111", {}); // false
tinycolor.isReadable("#ff0088", "#5c1a72",{level:"AA",size:"small"}); //false
tinycolor.isReadable("#ff0088", "#5c1a72",{level:"AA",size:"large"}), //true

mostReadable

mostReadable: function(TinyColor, [TinyColor, Tinycolor ...], Object) -> Boolean. Given a base color and a list of possible foreground or background colors for that base, returns the most readable color. If none of the colors in the list is readable, mostReadable will return the better of black or white if includeFallbackColors:true.

tinycolor.mostReadable("#000", ["#f00", "#0f0", "#00f"]).toHexString(); // "#00ff00"
tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:false}).toHexString(); // "#112255"
tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).toHexString();  // "#ffffff"
tinycolor.mostReadable("#ff0088", ["#2e0c3a"],{includeFallbackColors:true,level:"AAA",size:"large"}).toHexString()   // "#2e0c3a",
tinycolor.mostReadable("#ff0088", ["#2e0c3a"],{includeFallbackColors:true,level:"AAA",size:"small"}).toHexString()   // "#000000",

See index.html in the project for a demo.

Common operations

clone

clone: function() -> TinyColor. Instantiate a new TinyColor object with the same color. Any changes to the new one won't affect the old one.

var color1 = tinycolor("#F00");
var color2 = color1.clone();
color2.setAlpha(.5);

color1.toString(); // "#ff0000"
color2.toString(); // "rgba(255, 0, 0, 0.5)"
Comments
  • tinycolor is not a function

    tinycolor is not a function

    I just upgraded [email protected] and code like this:

    const tinycolor = require('tinycolor2');
    tinycolor(color)
    

    It comes tinycolor is not a function error, plz take a look.

    opened by Babyfaceqian 37
  • feat: v2

    feat: v2

    A working build can be seen/installed at the hard fork at https://github.com/TypeCtrl/tinycolor

    updated docs: https://typectrl.github.io/tinycolor/ api docs: https://typectrl.github.io/tinycolor/docs/ breaking changes: see notes

    on travis this would need a few new tokens

    • GH_TOKEN: is a github personal access token https://github.com/settings/tokens
    • NPM_TOKEN: run npm token create used with semantic release to publish from CI. If you want to publish manually i can remove this.

    notes

    • reformatted into TypeScript / es2015 and requires node >= 8
      • tree shakeable "module" export and no package sideEffects
    • tinycolor is now exported as a class called TinyColor
    • new random, an implementation of randomColor by David Merfield that returns a TinyColor object, the old one is still available as legacyRandom
    • several functions moved out of the tinycolor class and are no longer TinyColor.<function>. See updated docs for use examples.
      • readability, fromRatio moved out
      • random moved out and renamed to legacyRandom
      • toFilter has been moved out and renamed to toMsFilter
    • mix, equals use the current TinyColor object as the first parameter
    • added polyad colors tinycolor PR #126
    • color wheel values (360) are allowed to over or under-spin and still return valid colors tinycolor PR #108
    • added tint() and shade() tinycolor PR #159
    • isValid, format are now properties instead of functions

    closes #151

    opened by scttcper 18
  • WCAG version 2.0 #76

    WCAG version 2.0 #76

    Incorporate processing, tests and documentation for Web Content Accessibility Guidelines Version 2.0 (http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef)

    opened by jladbury 17
  • chaining manipulation methods

    chaining manipulation methods

    would be very useful to do something like this:

    tinycolor.lighten('#FF0000', 20).desaturate(20); // and so on
    

    so the color manipulation functions should check the this, and if it's a tinycolor object, then work with it. make all methods a prototype of the object instance, so they will be available. now they are not..

    opened by yairEO 16
  • Option to restrict hex to require '#' char (or as validation option)

    Option to restrict hex to require '#' char (or as validation option)

    This library is great, using it to validate and preview user-entered colors in a theming UI.

    One issue I ran into:

    • we write the theming input values straight out into the css as strings.
    • TinyColor will parse 'fff' or 'ffffff' as valid colors (no '#' char). This is great for ease of use, but when written out as strings into css, the browser doesn't parse these as colors.

    A possible solution for me would be to post-process these when the form is saved. I'd prefer to restrict the input to valid values though. I had a read of TinyColor js to see if I had missed any obvious options for this, but didn't spot any.

    Is there an option I'm missing? Or would you consider providing these, either for TinyColour object init, or for the isValid() function. NP if this is a weird use case and the answer is no. Workarounds would be found :)

    -- EDIT -- I wrote additional validation using the private _format property of TinyColor object. Using the private var might break in future, but it was a lightweight solution that works nicely.

            var color_is_valid = false;
            if (color.isValid() == true) {
                if (color._format == 'hex') {
                    if (input_value.charAt(0) == '#') {
                        color_is_valid = true;
                    }
                } else if (color._format == 'rgb' || color._format == 'rgba') {
                    if (input_value.charAt(input_value.length-1) == ')') {
                        color_is_valid = true;
                    }
                } else {
                    color_is_valid = true;
                }
            }
    
    opened by andythenorth 13
  • umd exports

    umd exports

    here's what this looks like when loaded in browser https://jsbin.com/noqufepofi/edit?html,js,console

    keeps all compatibility for current CDN users. People using node or js with webpack/rollup will get the advantage of a lighter bundle by keeping the static methods out of the TinyColor class.

    cdn users get what they expect, webpack users get what they want.

    opened by scttcper 12
  • window.tinycolor is not defined if JS loader is used

    window.tinycolor is not defined if JS loader is used

    When a loader like SystemJS or RequireJS is found, tinycolor skips registering the window.tinycolor variable. This breaks other modules that don't use a loader and depend on window.tinycolor.

    opened by olee 11
  • Potential toString vs getOriginalInput confusion

    Potential toString vs getOriginalInput confusion

    In having adobe/brackets#9596 reviewed, @redmunds brought out an interesting observation:

    (Me) tinycolor.toString() actually works as the author intended. It does not ignore the original case, but rather normalizes (to lowercase) it before returning it. There was actually no way to get the original input (it wasn't even stored) until I suggested it and sent a patch in the form of tinycolor.getOriginalInput().

    Yes, but since you added tinycolor.getOriginalInput(), I think it changes expectations. I would expect that method to be called something like toNormalizedString().

    I am wondering what your thoughts are on this, @bgrins. I know toString() is a long-standing method and removing/renaming it would be a huge breaking change, but would it be possible to better document the normalization it performs and/or rename getOriginalInput() to something that better describes it's actions vs toString()? I mention renaming as it is a very recent edition to TinyColor and probably isn't used much yet.

    opened by le717 10
  • Uniform full length hex input like #ffffff is not preserved on output from .toHexString()

    Uniform full length hex input like #ffffff is not preserved on output from .toHexString()

    If you create a new tinycolor('#ffffff'), the result of .toHexString() is '#fff' and does not match the input. See this fiddle for an example: http://jsfiddle.net/2va59/3/

    This causes problems if you happened to be keying an object by hex value, for example, and depend on the output of TinyColor (via the Spectrum color picker, btw) to look up the correct values.

    {"#e55731":{"field":"9","detail":"386"},"#ffffff":{"field":"15","detail":"387"})

    The simple solution is to disable this if() statement entirely, but I could see an argument for an alternative .toFullHexString() method or an passing an optional argument (in pseudo-code) along the lines of .toHexString(bool shortenHexIfPossible = false) as well.

    opened by beporter 9
  • Don't mutate input objects

    Don't mutate input objects

    Currently the tinycolor constructor actually modifies input objects:

    var hsv = {h: 100, s: 0.5, v: 0.5};
    tinycolor(hsv);
    console.log(hsv);  // Object {h: 100, s: "50%", v: "50%"}
    

    I spent a while trying to figure out why I was getting NaNs in my app :)

    opened by benekastah 8
  • toRgbString doc is missleading (misses alpha)

    toRgbString doc is missleading (misses alpha)

    Is toRgbString but your doc seems to not support it

    toRgbString
    var color = tinycolor("red");
    color.toRgbString(); // "rgb(255, 0, 0)"
    

    please add another example

    toRgbString
    var color = tinycolor("red").setAlpha(0.5);
    color.toRgbString(); // "rgba(255, 0, 0, 0.5)"
    
    docs 
    opened by bitplanets 8
  • Task: Publish 1.6.0 to npm

    Task: Publish 1.6.0 to npm

    • [x] Move CDN assets into the npm dir: https://github.com/bgrins/TinyColor/pull/253
    • [x] Figure out what to do about https://github.com/bgrins/TinyColor/issues/249
    • [ ] Remove the warning about ESM: https://github.com/bgrins/TinyColor/blob/0cbf54ce85c9475b3d0e3744b358fb6cefc16e47/README.md#esm (#261)
    • [ ] Document polyad https://github.com/bgrins/TinyColor/pull/250
    opened by bgrins 0
  • Octal literal in strict mode

    Octal literal in strict mode

    Octal literal are not permitted n strict mode

    tinycolor.js:2:17 1: var styles = { 2: 'bold': ['\033[1m', '\033[22m'], ^ 3: 'italic': ['\033[3m', '\033[23m'], 4: 'underline': ['\033[4m', '\033[24m'],

    opened by leoplaw 0
  • Replace deprecated String.prototype.substr()

    Replace deprecated String.prototype.substr()

    opened by CommanderRoot 0
Releases(1.0.0)
  • 1.0.0(Jul 6, 2014)

    This release changes the API, adding the modification and combination functions onto the instance of the object.

    Instead of tinycolor.desaturate(tinycolor.lighten('red')), now you can run tinycolor("red").lighten().desaturate().

    All changes for this release: https://github.com/bgrins/TinyColor/compare/0.11.2...1.0.0

    Source code(tar.gz)
    Source code(zip)
:rainbow: Javascript color conversion and manipulation library

color JavaScript library for immutable color conversion and manipulation with support for CSS color strings. var color = Color('#7743CE').alpha(0.5).l

Qix 4.5k Jan 3, 2023
Color2k - a color parsing and manipulation lib served in roughly 2kB

color2k a color parsing and manipulation lib served in roughly 2kB or less (2.8kB to be more precise) color2k is a color parsing and manipulation libr

Rico Kahler 506 Dec 31, 2022
A simple Discord bot that will listen for HEX, RGB(a), and HSL(a) colors in a message, and provide a small image of that color.

Pigment For the teams of designers and developers out there - Pigment will listen for messages containing a HEX, RGB(a), or HSL(a) color, and provide

Conrad Crawford 17 Dec 8, 2022
Create your own complete Web color system fast and easy!

Simpler Color Create your own complete Web color system fast and easy, from as little as one base color! Color is at the heart of every UI design syst

Arnel Enero 278 Dec 20, 2022
JavaScript Library for creating random pleasing colors and color schemes

#PleaseJS www.checkman.io/please Please.js is a polite companion that wants to help you make your projects beautiful. It uses HSV color space to creat

Jordan Checkman 2.3k Dec 22, 2022
Coloris - A lightweight and elegant JavaScript color picker. Written in vanilla ES6, no dependencies. Accessible.

Coloris A lightweight and elegant JavaScript color picker written in vanilla ES6. Convert any text input field into a color field. View demo Features

Momo Bassit 126 Dec 27, 2022
JavaScript library for all kinds of color manipulations

Chroma.js Chroma.js is a tiny small-ish zero-dependency JavaScript library (13.5kB) for all kinds of color conversions and color scales. Usage Initiat

Gregor Aisch 9.2k Jan 4, 2023
A simple color picker application written in pure JavaScript, for modern browsers.

Color Picker A simple color picker application written in pure JavaScript, for modern browsers. Has support for touch events. Touchy… touchy… Demo and

Taufik Nurrohman 207 Dec 14, 2022
A tool for creating and maintaining cohesive, consistent, and accessible color palettes

Primer Prism Primer Prism is a tool for creating and maintaining cohesive, consistent, and accessible color palettes. ?? primer.style/prism ?? Read th

Primer 517 Jan 3, 2023
A TypeScript package to calculate WCAG 2.0/3.0 and APCA color contrasts

a11y-color-contrast A simple utility package for working with WCAG 2.2/3.0 color contrasts a11y: Built for checking how readable colors are together S

Sondre Aasemoen 10 Oct 10, 2022
A CLI utility to calculate/verify accessible magic numbers for a color palette.

A11y Contrast A CLI utility to calculate/verify accessible magic numbers for a color palette. Read my blog post for some more information. Installatio

Darek Kay 23 Nov 13, 2022
A dependency-free image color extraction library

Color mage A dependency-free image color extraction library. The extraction consists of using K-Means algorithm. It has a few utility functions as wel

Gilmar Quinelato 4 Mar 11, 2022
A array with color name -> decimal rgbs.

colors-named-decimal A array with color name -> decimal rgbs. Based on https://www.w3.org/TR/css-color-4/#colors-named Installation This package is ES

小弟调调™ 4 Jul 20, 2022
Node Terminal Colors. Fast!

Tcol npm package to add colors to your terminal Installation # npm npm install tcol # pnpm pnpm install tcol Usage import { c } from "tcol"; console.

Posandu 4 May 13, 2022
This repo contains resources & practice of project and files , while learning to master JS

Resources to learn JavaScript and conquer the world? Tutorials and Books JavaScript For Cats (http://jsforcats.com/) is a dead simply introduction for

abdulkareem alabi 1 Jan 6, 2022
Tints and shades generator in React.

Reactry's shades goals add option to enter hexColor by hand add option to get hexColor from clipboard add option to set one of the shades or tints as

null 9 May 26, 2022
Colormath.js - a color conversion and color manipulation library written in typescript for Node.js, Deno and Browser

Colormath.js - a color conversion and color manipulation library written in typescript for Node.js, Deno and Browser

TheSudarsanDev 8 Feb 8, 2022
:rainbow: Javascript color conversion and manipulation library

color JavaScript library for immutable color conversion and manipulation with support for CSS color strings. var color = Color('#7743CE').alpha(0.5).l

Qix 4.5k Jan 3, 2023
A NodeJS package to convert any RGB color to HEX color or viceversa. Also supports HSL conversion.

Unhex ?? A NodeJS package to convert any RGB color to HEX, HSL color or viceversa. Example div { color: #fff; background-color: #0070f3; } After r

Arnau Espin 2 Oct 1, 2022
A small javascript DOM manipulation library based on Jquery's syntax. Acts as a small utility library with the most common functions.

Quantdom JS Quantdom is a very small (about 600 bytes when ran through terser & gzipped) dom danipulation library that uuses a Jquery like syntax and

Sean McQuaid 7 Aug 16, 2022