rygb

    0.1.5 • Public • Published

    RYGB

    RYGB color notation is a syntactical abstraction over the HSV color model. Specifically, it provides an intuitive and analogous approach to expressing hue by way of additive, proportional mixing of adjacent primary colors.

    The RYGB chromatic model is based on the opponent process color theory, first theorized by physiologist Ewald Hering in 1892. This model consists of two opposing color axioms - red/green and yellow/blue. The orthogonal arrangement of these axioms results in 4 adjacent color pairs, each a binary set:


     

    Any desired hue can be expressed by determining the appropriate pair, then mixing the two associated primaries in relative parts. For example, the notation 'r2y3' results in a reddish-yellow hue that is exactly 2 parts red and 3 parts yellow.

    RYGB was created for coding-centric design/development workflows. It is intended for rapid prototyping, graphic design, illustration, animation, and scenarios when experimental color choices may happen frequently. In such cases, the repeated context-switching inherent with the use of traditional GUI color-selection tools may be both cumbersome and undesirable.


    Usage

    In node.js (after npm install rygb):

    var rygb = require('rygb')

    Equal parts blue and red will produce magenta:

    rygb('br').hex()  // '#ff00ff'

    Equal parts red and yellow will produce orange:

    rygb('ry').hex()  // '#ff8000'

    1 part red, 2 parts yellow:

    rygb('ry2').hex()  // '#ffaa00'

    3 parts red, 7 parts yellow:

    rygb('r3y7').hex()  // 'ffb300'

    Order is reversible, although ry, yg, gb, and br is idiomatic.

    rygb('y7r3').hex() === rygb('r3y7').hex()  // true

    When using a single part of a primary, the 1 is optional. Although its omission is idiomatic, it's inclusion is occasionally useful for readability in certain ratios:

    rygb('r1y2').hex() === rygb('ry2').hex()  // true
     
    rygb('br').hex() === rygb('b1r1').hex()  // true
     
    rygb('b23r1').hex() === rygb('b23r').hex()  // true

    Saturation, value, and alpha are each expressed using an integer [0-100], representing a percentage. The default value for each is 100.

    3 parts red, 7 parts yellow, with 50% saturation:

    rygb('r3y7-s50').hex()  // '#ffd980'

    3 parts red, 7 parts yellow, with 50% saturation and 33% value:

    rygb('r3y7-s50-v33').hex()  // '#f4482a'

    3 parts red, 7 parts yellow, with 50% saturation, 33% value, and 66% alpha:

    rygb('r3y7-s50-v33-a66').hexa()  // '#f4482aa8'

    Primary colors can be expressed using a single character.

    rygb('r').hex()  // '#ff0000' ← red
     
    rygb('y').hex()  // '#ffff00' ← yellow
     
    rygb('g').hex()  // '#00ff00' ← green
     
    rygb('b').hex()  // '#0000ff' ← blue

    White, black, and neutral grays can be expressed by limiting input to the value syntax.

    rygb('v100').hex()  // '#ffffff' ← white
     
    rygb('v0').hex()  // '#000000' ← black
     
    rygb('v50').hex()  // '#808080' ← 50% gray

    More examples with various colors:

    rygb('gb-s21-v83').hex()  // '#a7d4d4' ← robin's egg blue
     
    rygb('g2b5-s31-v47').hex()  // '#536878' ← payne's gray
     
    rygb('g21b1-s24-v88').hex()  // '#abe0af' ← celadon
     
    rygb('r1y3-s80-v96').hex()  // '#f5c431' ← saffron
     
    rygb('b9r4-s31').hex()  // '#e1b0ff' ← mauve
     
    rygb('yg').hex()  // '#80ff00' ← chartreuse
     
    rygb('y-s6').hex()  // '#fffff0' ← ivory
     
    rygb('v20').hex()  // '#333333' ← jet


    API

    First, a quick overview by example:

    rygb('gb-s21-v83').hex() // '#a7d4d4' 
     
    rygb('gb-s21-v83').hexa() // '#a7d4d4ff'
     
    rygb('gb-s21-v83').int24() // 10998739 
     
    rygb('gb-s21-v83').rgb().dec() // [ 0.6557, 0.83, 0.83 ] 
     
    rygb('gb-s21-v83').rgb().bit() // [ 167, 212, 212 ] 
     
    rygb('gb-s21-v83').rgb().css() // 'rgb(167, 212, 212)' 
     
    rygb('gb-s21-v83').rgba().dec() // [ 0.6557, 0.83, 0.83, 1 ] 
     
    rygb('gb-s21-v83').rgba().bit() // [ 167, 212, 212, 255 ] 
     
    rygb('gb-s21-v83').rgba().css() // 'rgba(167, 212, 212, 1)' 
     
    rygb('gb-s21-v83').argb().dec() // [ 1, 0.6557, 0.83, 0.83 ] 
     
    rygb('gb-s21-v83').argb().bit() // [ 255, 167, 212, 212]
     
    rygb('gb-s21-v83').json() // {h: {g: 1, b: 1}, s: 0.21, v: 0.83} 
     
    const obj = {
      h: { g: 1, b: 1 },
      s: 0.21,
      v: 0.83
    }
    rygb(obj).string() // 'gb-s21-v83' 

    Parser

    The rygb parser will accept either a string or an object literal. When passing an object, the h property represents the hue, and must be an object with either one or two keys. Unlike the string notation, the s, v, and a values in the object notation must be decimal fractions [0-1]:

    // Equivalent to 'g2b5-s31-v47-a88'
    rygb({h: {g: 2, b: 5}, s: 0.31, v: 0.47, a: 0.88})
     
    // Equivalent to 'r'
    rygb({h: {r: 1}})

    Serialization methods

    .hex() is a perhaps the most immediately useful method when using RYGB notation for rapid prototyping.

    rygb('yg').hex()  // '#80ff00'

    .hexa() will give you hex code with alpha-channel information (supported in some browsers).

    rygb('yg-a88').hex()  // '#80ff00e0'

    rgb, rgba, and argb tuples with values as decimal fractions [0-1]:

    rygb('g2b3-s31-v47').rgb().dec()  // [0.3243, 0.44086, 0.47]
    rygb('g2b3-s31-v47').rgba().dec()  // [0.3243, 0.44086, 0.47, 1]
    rygb('g2b3-s31-v47').argb().dec()  // [1, 0.3243, 0.44086, 0.47]

    Or with 8-bit unsigned integers[0-255]:

    rygb('g2b3-s31-v47').rgb().bit()  // [83, 112, 120]
    rygb('g2b3-s31-v47').rgba().bit()  // [83, 112, 120, 255]
    rygb('g2b3-s31-v47').argb().bit()  // [255, 83, 112, 120]

    A packed integer representing an rgb color:

    rygb('g2b3-s31-v47').int24()  // 5402743

    Turn a JSON representation into RYGB string notation:

    rygb({h: {g: 2, b: 3}, s: 31, v: 47}).string()  // 'g2b3-s31-v47'

    Turn RYGB notation into a JSON representation:

    rygb('g2b3-s31-v47').json()  // '{h: {g: 2, b: 3}, s: 31, v: 47}'

    Usage with other tools

    rygb will work with almost any JS library or framework whose constructors and/or color methods accept hex codes or css color strings. Most of them do.

    In some scenarios, it may be desirable to make use of an rgb(a) tuple, or even a packed integer. For example, the .int24() method works nicely for defining a color as recommended in three.js:

    import * as THREE from 'three';
    import rygb from 'rygb';
     
    var color = new THREE.Color( rygb('g2b3-s31-v47').int24() );

    Although color conversions and manipulations are outside the scope of this utility, rygb can be used to supply parsable input to other packages that provide a vast array of such functionality. Popular, well-supported JS color libraries include color, one-color, chroma.js, and TinyColor.


    License

    MIT. See LICENSE.

    Install

    npm i rygb

    DownloadsWeekly Downloads

    13

    Version

    0.1.5

    License

    MIT

    Unpacked Size

    22.5 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar