Color¶

Overview¶

A color with RGBA values, assuming the sRGB color space is used.

See http://www.w3.org/TR/css3-color/

TODO: make a getHue, getSaturation, getLightness. we can then expose them via ES5! https://github.com/phetsims/scenery/issues/1581

@author Jonathan Olson <jonathan.olson@colorado.edu>

Class Color¶

import { Color } from 'scenerystack/scenery';

Constructor¶

new Color( color : Color )¶

Instance Methods¶

copy() : Color¶

Returns a copy of this color.

set( r : number | Color | string | null, g? : number, b? : number, a? : number ) : this¶

Sets the values of this Color. Supported styles:

• set( color ) is a copy constructor
• set( string ) will parse the string assuming it's a CSS-compatible color, e.g. set( 'red' )
• set( r, g, b ) is equivalent to setRGBA( r, g, b, 1 ), e.g. set( 255, 0, 128 )
• set( r, g, b, a ) is equivalent to setRGBA( r, g, b, a ), e.g. set( 255, 0, 128, 0.5 )
• set( hex ) will set RGB with alpha=1, e.g. set( 0xFF0000 )
• set( hex, alpha ) will set RGBA, e.g. set( 0xFF0000, 1 )
• set( null ) will be transparent

@param r - See above for the possible overloaded values @param [g] - If provided, should be the green value (or the alpha value if a hex color is given) @param [b] - If provided, should be the blue value @param [a] - If provided, should be the alpha value

getRed() : number¶

Returns the red value as an integer between 0 and 255

setRed( value : number ) : this¶

Sets the red value.

@param value - Will be clamped to an integer between 0 and 255

getGreen() : number¶

Returns the green value as an integer between 0 and 255

setGreen( value : number ) : this¶

Sets the green value.

@param value - Will be clamped to an integer between 0 and 255

getBlue() : number¶

Returns the blue value as an integer between 0 and 255

setBlue( value : number ) : this¶

Sets the blue value.

@param value - Will be clamped to an integer between 0 and 255

getAlpha() : number¶

Returns the alpha value as a floating-point value between 0 and 1

setAlpha( value : number ) : this¶

Sets the alpha value.

@param value - Will be clamped between 0 and 1

setRGBA( red : number, green : number, blue : number, alpha : number ) : this¶

Sets the value of this Color using RGB integral between 0-255, alpha (float) between 0-1.

blend( otherColor : Color, ratio : number ) : Color¶

A linear (gamma-corrected) interpolation between this color (ratio=0) and another color (ratio=1).

@param otherColor @param ratio - Not necessarily constrained in [0, 1]

toCSS() : string¶

Returns the value of this Color as a CSS string.

setCSS( cssString : string ) : this¶

Sets this color for a CSS color string.

toNumber() : number¶

Returns this color's RGB information in the hexadecimal number equivalent, e.g. 0xFF00FF

setImmutable() : this¶

Allow setting this Color to be immutable when assertions are disabled. any change will throw an error

getCanvasStyle() : string¶

Returns an object that can be passed to a Canvas context's fillStyle or strokeStyle.

setHSLA( hue : number, saturation : number, lightness : number, alpha : number ) : this¶

Sets this color using HSLA values.

TODO: make a getHue, getSaturation, getLightness. we can then expose them via ES5! https://github.com/phetsims/scenery/issues/1581

@param hue - integer modulo 360 @param saturation - percentage @param lightness - percentage @param alpha

equals( color : Color ) : boolean¶

withAlpha( alpha : number ) : Color¶

Returns a copy of this color with a different alpha value.

brighterColor( factor? : number ) : Color¶

Matches Java's Color.brighter()

colorUtilsBrighter( factor? : number ) : Color¶

Brightens a color in RGB space. Useful when creating gradients from a single base color.

@param [factor] - 0 (no change) to 1 (white) @returns - (closer to white) version of the original color.

darkerColor( factor? : number ) : Color¶

Matches Java's Color.darker()

colorUtilsDarker( factor? : number ) : Color¶

Darken a color in RGB space. Useful when creating gradients from a single base color.

@param [factor] - 0 (no change) to 1 (black) @returns - darker (closer to black) version of the original color.

colorUtilsBrightness( factor : number ) : Color¶

Like colorUtilsBrighter/Darker, however factor should be in the range -1 to 1, and it will call: colorUtilsBrighter( factor ) for factor > 0 this for factor == 0 colorUtilsDarker( -factor ) for factor < 0

@param factor from -1 (black), to 0 (no change), to 1 (white)

toString() : string¶

Returns a string form of this object

toHexString() : string¶

Convert to a hex string, that starts with "#".

toStateObject() : { r: number; g: number; b: number; a: number }¶

Instance Properties¶

r : number¶

RGBA values

g : number¶

b : number¶

a : number¶

changeEmitter : TEmitter¶

(readonly)

Fires when the color is changed

Static Methods¶

hueToRGB( m1 : number, m2 : number, h : number ) : number¶

Utility function, see http://www.w3.org/TR/css3-color/

toColor( colorSpec : TColor ) : Color¶

Convenience function that converts a color spec to a color object if necessary, or simply returns the color object if not.

Please note there is no defensive copy when a color is passed in unlike PaintDef.

interpolateRGBA( color1 : Color, color2 : Color, distance : number ) : Color¶

Interpolates between 2 colors in RGBA space. When distance is 0, color1 is returned. When distance is 1, color2 is returned. Other values of distance return a color somewhere between color1 and color2. Each color component is interpolated separately.

@param color1 @param color2 @param distance distance between color1 and color2, 0 <= distance <= 1

supersampleBlend( colors : Color[] ) : Color¶

Returns a blended color as a mix between the given colors.

fromStateObject( stateObject : { r: number; g: number; b: number; a: number } ) : Color¶

hsla( hue : number, saturation : number, lightness : number, alpha : number ) : Color¶

checkPaintString( cssString : string )¶

checkPaint( paint : TPaint )¶

A Paint of the type that Paintable accepts as fills or strokes

getLuminance( color : Color | string ) : number¶

Gets the luminance of a color, per ITU-R recommendation BT.709, https://en.wikipedia.org/wiki/Rec._709. Green contributes the most to the intensity perceived by humans, and blue the least. This algorithm works correctly with a grayscale color because the RGB coefficients sum to 1.

@returns - a value in the range [0,255]

toGrayscale( color : Color | string ) : Color¶

Converts a color to grayscale.

isDarkColor( color : Color | string, luminanceThreshold ) : boolean¶

Determines whether a color is 'dark'.

@param color - colors with luminance < this value are dark, range [0,255], default 186 @param luminanceThreshold - colors with luminance < this value are dark, range [0,255], default 186

isLightColor( color : Color | string, luminanceThreshold? : number ) : boolean¶

Determines whether a color is 'light'.

@param color @param [luminanceThreshold] - colors with luminance >= this value are light, range [0,255], default 186

grayColor( rgb : number, a? : number ) : Color¶

Creates a Color that is a shade of gray. @param rgb - used for red, blue, and green components @param [a] - defaults to 1

isCSSColorString( cssString : string ) : boolean¶

Whether the specified CSS string is a valid CSS color string

Static Properties¶

formatParsers : FormatParser[]¶

basicColorKeywords : Record<string, string>¶

colorKeywords : Record<string, string>¶

BLACK : Color¶

BLUE : Color¶

CYAN : Color¶

DARK_GRAY : Color¶

GRAY : Color¶

GREEN : Color¶

LIGHT_GRAY : Color¶

MAGENTA : Color¶

ORANGE : Color¶

PINK : Color¶

RED : Color¶

WHITE : Color¶

YELLOW : Color¶

TRANSPARENT : Color¶

black : Color¶

blue : Color¶

cyan : Color¶

darkGray : Color¶

gray : Color¶

green : Color¶

lightGray : Color¶

magenta : Color¶

orange : Color¶

pink : Color¶

red : Color¶

white : Color¶

yellow : Color¶

transparent : Color¶

ColorIO : IOType¶

Type ColorState¶

import type { ColorState } from 'scenerystack/scenery';

• r: number
• g: number
• b: number
• a: number

Source Code¶

See the source for Color.ts in the scenery repository.