Giter VIP home page Giter VIP logo

loose-rgb's Introduction

Icon

Loose RGB

Normalizes RGB color data types to a certain format

npm version check status minified + gzip bundle size license: MIT

Description

Working with different color libraries gets cumbersome when they use different RGB value formats. Now you can normalize the outputs and convert your inputs.

Features

  • Normalize any RGB format to {r, g, b, [a]}
  • Convert {r, g, b, [a]} to any RGB format
  • RGBA support
  • Hex support

Installation

npm install loose-rgb

Usage

import looseRGB from "loose-rgb";

// Convert any type to `{r, g, b, [a]}`
looseRGB.normalize({red: 1, green: 2, blue: 3}) // ? {r: 1, g: 2, b: 3}
looseRGB.normalize("FFBB00AA") // ? {r: 255, g: 187, b: 0, a: 0.66796875}

// Convert `{r, g, b, [a]}` to any type
looseRGB.convert.toCSSValue({r: 255, g: 187, b: 0, a: 0.66796875}) // ? rgba(255, 187, 0, 0.66796875)
looseRGB.convert.toUpperKeys({r: 1, g: 2, b: 3}) // ? {R: 1, G: 2, B: 3}

// Composing the above methods
import {convert, normalize} from "loose-rgb";

const anyToHex = (rgba) => convert.toHex(normalize(rgba));
anyToHex([1, 2, 3, 0.4]) // ? #01020366

Normalize

looseRGB.normalize(color: RGBUnkown)

Input any color value as color (see convert).

Convert

looseRGB.convert[to{ColorType}](color: RGBLowerKeys)

Input an {r, g, b, [a]} color to get a reformatted value. See supported formats for methods.

Supported Formats

  • .toLowerKeys()
    • {r: 1, g: 2, b: 3}
    • {r: 1, g: 2, b: 3, a: 0.4}
  • .toUpperKeys()
    • {R: 1, G: 2, B: 3}
    • {R: 1, G: 2, B: 3, A: 0.4}
  • .toFullKeys()
    • {red: 1, green: 2, blue: 3}
    • {red: 1, green: 2, blue: 3, alpha: 0.4}
  • .toArray()
    • [1, 2, 3]
    • [1, 2, 3, 0.4]
  • .toCSSValue() โ€” Supports with and without spacing between commas, leading zero on decimal
    • "rgb(0, 213, 34)"
    • "rgba(0, 213, 34,.12)"
  • .toHex() โ€” Supports with and without pound, case insensitive, with shorthand
    • "#fff"
    • "#000000"
    • "#FFBB00AA"
    • "123"
    • "FFFF"

License

Copyright Evelyn Hathaway, MIT License

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.