BB.Color

Defined in: src/BB.Color.js:10

A module for creating color objects, color schemes and doing color maths.

Index

Properties

Methods

Constructor

BB.Color
(
  • [r]
  • [g]
  • [b]
  • [a]
)

Defined in src/BB.Color.js:10

Parameters:

  • [r] Number optional

    optional parameter for setting the red value (0-255)

  • [g] Number optional

    optional parameter for setting the green value (0-255)

  • [b] Number optional

    optional parameter for setting the blue value (0-255)

  • [a] Number optional

    optional parameter for setting the alpha value (0-255)

Example:

 var color = new BB.Color(255,0,0);

Properties

a (alpha) Number default:255

Defined in src/BB.Color.js:145

the alpha value between 0 - 255

b (blue) Number default:119

Defined in src/BB.Color.js:125

the blue value between 0 - 255

g (green) Number default:4

Defined in src/BB.Color.js:105

the green value between 0 - 255

h (hue) Number default:0

Defined in src/BB.Color.js:165

the hue value between 0 - 359

hex String default:"#e40477"

Defined in src/BB.Color.js:306

the base color's hex string

r (red) Number default:228

Defined in src/BB.Color.js:85

the red value between 0 - 255

rgb String default:"rgb(228,4,119)"

Defined in src/BB.Color.js:226

the base color's rgb string

rgba String default:"rgba(228,4,119,1)"

Defined in src/BB.Color.js:265

the base color's rgba string

s (saturation) Number default:0

Defined in src/BB.Color.js:185

the saturation value between 0 - 100

schemes Object

Defined in src/BB.Color.js:66

object with properties ( named after different color schemes ) for holding arrays of new BB.Color objects generated with the createScheme() method.

v (value) Number default:0

Defined in src/BB.Color.js:205

the brightness/lightness value between 0 - 100

There are no properties that match your current filter settings. You can change your filter settings in the index section on this page. index

Methods

clone () BB.Color

Defined in src/BB.Color.js:372

creates a new color object that is a copy of itself

Returns: BB.Color

a new color object copied from this one

Example:

  var x = new color(0,255,0);
  var y = x.clone();
  y.rgb; // returns 'rgb(0,255,0)';

copy
(
  • color
)
BB.Color chainable

Defined in src/BB.Color.js:348

sets color value to match another color object's value

Parameters:

  • color BB.Color

    another color object to copy from

Returns: BB.Color

this color

Example:

  var x = new color(0,255,0);
  var y = new color(100,100,100);
  y.copy( x );
  y.rgb; // returns 'rgb(0,255,0)';

createScheme
(
  • scheme
  • optional
)

Defined in src/BB.Color.js:714

generates a color scheme ( array of additional color values ) from the base color.

the colors are stored in an array in the .schemes property ( object ) and can be accessed by querying the key ( name ) of the color scheme you generated like so: .schemes.triadic , which will return an array of BB.Color objects

Parameters:

  • scheme String

    name of the color scheme you want to generate. can be either "monochromatic", "analogous", "complementary", "splitcomplementary", "triadic", "tetradic" or "random"

  • optional Object

    config object with properties for angle (Number) for hue shift ( for schemes other than "complimentary" or "triadic" which have fixed angles ), tint (Array of Floats) and shade (Array of Floats), which are used to create aditional monochromatic colors ( tint for light variations of the base color and shade for dark ) in relation to the base colors of each scheme

    the "random" scheme takes an entirely different config object with values for hue, saturation and value. when no config is sent it generates entirely random colors. when a { hue: 200 } is passed than you'd get random shades of blue, etc.

    if you need a color scheme/theory refersher: check this out

Example:


  color.createScheme("complementary"); // creates single complementary color

  // creates two analogous colors
  // as well as 2 shades and 2 tints for each of the two analogous colors
  // so color.schemes.analogous.length will be 10
  color.createScheme("analogous",{
     angle: 30,
     tint:[ 0.4, 0.8 ],
     shade:[ 0.3, 0.6 ]
  });

  color.createScheme("random",{
     hue: 200,
  });

  color.schemes.analogous[0] // returns first analogous color
  color.schemes.analogous[1] // returns second analogous color
  color.schemes.random[0] // returns first random blue shade

hsv2rgb
(
  • [hsv]
  • [s]
  • [v]
)
Object

Defined in src/BB.Color.js:560

converts hsv values into rgb values, you can pass it an instance of BB.Color as a single parameter or pass it three individual parameters ( for h, s and v ) and it returns an object with r,g,b properties.

if you don't pass it any parameters it takes its own internal values as arguments and updates it's own internal rgb automatically ( that functionality is used internally, for ex. by the getters && setters )

Parameters:

  • [hsv] Number optional

    either an instance of BB.Color or a h value between 0 - 359

  • [s] Number optional

    a saturation value between 0 - 100

  • [v] Number optional

    a brightness/lightness value value between 0 - 100

Returns: Object

an object with r, g, b properties

isEqual
(
  • color
  • excludeAlpha
)
Boolean

Defined in src/BB.Color.js:475

checks if another color object is equal to itself

Parameters:

  • color BB.Color

    another color object to compare to

  • excludeAlpha Boolean

    Whether or not to exlude Alpha property. True by default.

Returns: Boolean

true if it's equal, false if it's not

rgb2hsv
(
  • [rgb]
  • [g]
  • [b]
)
Object

Defined in src/BB.Color.js:509

converts rgb values into hsv values, you can pass it an instance of BB.Color as a single parameter or pass it three individual parameters ( for r, g and b ) and it returns an object with h,s,v properties.

if you don't pass it any parameters it takes its own internal values as arguments and updates it's own internal hsv automatically ( that functionality is used internally, for ex. by the getters && setters )

Parameters:

  • [rgb] Number optional

    either an instance of BB.Color or a red value between 0 - 255

  • [g] Number optional

    a green value between 0 - 255

  • [b] Number optional

    a blue value value between 0 - 255

Returns: Object

an object with h, s, v properties

setHSVA
(
  • h
  • s
  • v
  • a
)
BB.Color chainable

Defined in src/BB.Color.js:430

sets the h(hue) s(saturation) v(value) of the color

Parameters:

  • h Number

    sets the hue value from 0 - 359

  • s Number

    sets the saturation value from 0 - 100

  • v Number

    sets the light/bright value from 0 - 100

  • a Number

    sets the alpha value from 0 - 255

Returns: BB.Color

this color

setRGBA
(
  • r
  • g
  • b
  • a
)
BB.Color chainable

Defined in src/BB.Color.js:389

sets the rgba value of the color

Parameters:

  • r Number

    sets the red value from 0 - 255

  • g Number

    sets the green value from 0 - 255

  • b Number

    sets the blue value from 0 - 255

  • a Number

    sets the alpha value from 0 - 255

Returns: BB.Color

this color

shade
(
  • percentage
)
BB.Color chainable

Defined in src/BB.Color.js:688

changes the color by darkening it by a certain percentage

Parameters:

  • percentage Number

    float between 0 and 1

Returns: BB.Color

this color

shift
(
  • degrees
  • [hue]
)
BB.Color chainable

Defined in src/BB.Color.js:627

changes the color by shifting current hue value by a number of degrees, also chainable ( see example )

can also take an additional hue parameter when used as a utility ( see example ), used this way internally by .createScheme

Parameters:

  • degrees Number

    number of degress to shift current hue by ( think rotating a color wheel )

  • [hue] Number optional

    The hue parameter to use. Including this parameter changes the behavior of this function to act as a utility function.

Returns: BB.Color

this color

Example:

  color.shift( 10 ); // shifts by 10 degrees
  var comp = color.clone().shift( 180 ); // new complementary color obj

  // as a utility ( without changing the color )
  color.shift( 180, color.h ); // returns the complementary hue ( in degrees )

tint
(
  • percentage
)
BB.Color chainable

Defined in src/BB.Color.js:663

changes the color by lightening it by a certain percentage

Parameters:

  • percentage Number

    float between 0 and 1

Returns: BB.Color

this color

There are no methods that match your current filter settings. You can change your filter settings in the index section on this page. index