Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

colorizr

Package Overview
Dependencies
Maintainers
1
Versions
17
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

colorizr

Manipulate colors like a boss

  • 2.0.0-0
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

Colorizr

NPM version build status Maintainability Test Coverage

Color conversion, manipulation and comparison.

Highlights

  • 🏖 Easy to use: Works with most color models, including CSS strings
  • ♿️ Acessibility: Full WCAG analysis and comparison.
  • 🛠 Small: Less than 4k (gzipped) and zero dependencies.
  • 🟦 Modern: Written in Typescript.

Setup

Install

npm install --save colorizr

And import it:

import Colorizr from 'Colorizr';

Usage

const colorizr = new Colorizr('#ff0044');

colorizr.hex // #ff0044
colorizr.hsl // { h: 344, s: 100, l: 50 };
colorizr.rgb // { r: 255, g: 0, b: 68 };

API

Getters

colorizr.hex
returns the hex

colorizr.hsl
returns the hsl object

colorizr.rgb
returns the rgb object

colorizr.hue
returns the color hue, between 0 and 360

colorizr.saturation
returns the color saturation, between 0 and 100

colorizr.lightness
returns the color lightness, between 0 and 100

colorizr.red
returns the color red level, between 0 and 255

colorizr.green
returns the color green level, between 0 and 255

colorizr.blue
returns the color blue level, between 0 and 255

colorizr.luminance
returns the color luminance, between 0 and 1

colorizr.chroma
returns the color chroma, between 0 and 1

colorizr.textColor
returns a hex value with the contrasted color

Manipulation

colorizr.lighten(percentage: number = 10)
returns a hex value with the increased lightness

colorizr.darken(percentage: number = 10)
returns a hex value with the decreased lightness

colorizr.saturate(percentage: number = 10)
returns a hex value with the increased saturation

colorizr.saturate(percentage: number = 10)
returns a hex value with the decreased lightness

colorizr.invert()
returns a hex value with the inverted color

colorizr.fade(percentage: number = 10)
returns a css value with alpha

Comparison

colorizr.compareTo(color: string)
returns an object with the analysis

{
  brightnessDifference: 189.041,
  colorDifference: 595,
  compliant: 2,
  contrast: 10.67,
  largeAA: true,
  largeAAA: true,
  normalAA: true,
  normalAAA: true,
}

Helpers

brightnessDifference
get the brightness difference between 2 colors

colorDifference
get the color difference between 2 colors

contrast
get the color contrast between 2 colors

harmony
get the harmony scheme for a color

hex2hsl hex2rgb hsl2hex hsl2rgb hue2rgb luminance palette parse-css parse-hex random rgb2hex rgb2hsl rotate shift text-color valid-hex wcag

References

calculating-color-contrast
Colour Contrast Check
Contrast Checker

Keywords

FAQs

Package last updated on 28 Sep 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc