Color | ngx3js

Class representing a color.

A Color can be initialised in any of the following ways: See the ngx3js docs page for details.

Examples

misc / exporter / collada | webgl / camera / logarithmicdepthbuffer | webgl / clipping / advanced | webgl / framebuffer / texture | webgl / geometry / colors

Code Example

// empty constructor - will default white
const color1 = new THREE.Color();
// Hexadecimal color (recommended)
const color2 = new THREE.Color( 0xff0000 );
// RGB string
const color3 = new THREE.Color("rgb(255, 0, 0)");
const color4 = new THREE.Color("rgb(100%, 0%, 0%)");
// X11 color name - all 140 color names are supported.
// Note the lack of CamelCase in the name
const color5 = new THREE.Color( 'skyblue' );
// HSL string
const color6 = new THREE.Color("hsl(0, 100%, 50%)");
// Separate RGB values between 0 and 1
const color7 = new THREE.Color( 1, 0, 0 );

example: const color = new THREE.Color( 0xff0000 );

Hierarchy

Color

Constructors

constructor

new Color(r?: I3JS.ColorRepresentation, g?: number, b?: number): I3JS.Color

- Defined in lib/threejs-library/types/three/math.ts:479
Note that standard method of specifying color in three.js is with a hexadecimal triplet, and that method is used throughout the rest of the documentation. When all arguments are defined then r is the red component, g is the green component and b is the blue component of the color. When only r is defined:

It can be a hexadecimal triplet representing the color (recommended). It can be an another Color instance. It can be a CSS-style string. For example:

'rgb(250, 0,0)', 'rgb(100%,0%,0%)', 'hsl(0, 100%, 50%)', '#ff0000', '#f00', 'red'

Parameters
- Optional r: I3JS.ColorRepresentation
  
  If arguments g and b are defined, the red component of the color. If they are not defined, it can be a hexadecimal triplet (recommended), a CSS-style string, or another Color instance.
- Optional g: number
  
  If it is defined, the green component of the color.
- Optional b: number
  
  If it is defined, the blue component of the color.
Returns I3JS.Color

Properties

NAMES

NAMES: Record<string, number>

List of X11 color names.

b

b: number

Blue channel value between 0 and 1. Default is 1.

g

g: number

Green channel value between 0 and 1. Default is 1.

Readonly isColor

isColor: true

r

r: number

Red channel value between 0 and 1. Default is 1.

Methods

add

add(color: I3JS.Color): I3JS.Color

- Defined in lib/threejs-library/types/three/math.ts:638
Adds the RGB values of color to the RGB values of this color.

Parameters
- color: I3JS.Color
Returns I3JS.Color

addColors

addColors(color1: I3JS.Color, color2: I3JS.Color): I3JS.Color

- Defined in lib/threejs-library/types/three/math.ts:643
Sets this color's RGB values to the sum of the RGB values of color1 and color2.

Parameters
- color1: I3JS.Color
- color2: I3JS.Color
Returns I3JS.Color

addScalar

addScalar(s: number): I3JS.Color

- Defined in lib/threejs-library/types/three/math.ts:648
Adds s to the RGB values of this color.

Parameters
- s: number
Returns I3JS.Color

clone

clone(): I3JS.Color

- Defined in lib/threejs-library/types/three/math.ts:553
Returns I3JS.Color
Returns a new Color with the same .r, .g and .b values as this one.

convertGammaToLinear

convertGammaToLinear(gammaFactor?: number): I3JS.Color

- Defined in lib/threejs-library/types/three/math.ts:578
Converts this color from gamma space to linear space by taking .r, .g and .b to the power of gammaFactor.

Parameters
- Optional gammaFactor: number
  
  Default is 2.0.
Returns I3JS.Color

convertLinearToGamma

convertLinearToGamma(gammaFactor?: number): I3JS.Color

- Defined in lib/threejs-library/types/three/math.ts:584
Converts this color from linear space to gamma space by taking .r, .g and .b to the power of 1 / gammaFactor.

Parameters
- Optional gammaFactor: number
  
  Default is 2.0.
Returns I3JS.Color

convertLinearToSRGB

convertLinearToSRGB(): I3JS.Color

- Defined in lib/threejs-library/types/three/math.ts:606
Converts this color from linear to sRGB space.

Returns I3JS.Color

convertSRGBToLinear

convertSRGBToLinear(): I3JS.Color

- Defined in lib/threejs-library/types/three/math.ts:601
Copies the given color into this color, and then converts this color from sRGB space to linear space.

Returns I3JS.Color

copy

copy(color: I3JS.Color): I3JS.Color

- Defined in lib/threejs-library/types/three/math.ts:558
Copies the .r, .g and .b parameters from color in to this color.

Parameters
- color: I3JS.Color
Returns I3JS.Color

copyGammaToLinear

copyGammaToLinear(color: I3JS.Color, gammaFactor?: number): I3JS.Color

- Defined in lib/threejs-library/types/three/math.ts:565
Copies the given color into this color, and then converts this color from gamma space to linear space by taking .r, .g and .b to the power of gammaFactor.

Parameters
- color: I3JS.Color
  
  Color to copy.
- Optional gammaFactor: number
  
  Default is 2.0.
Returns I3JS.Color

copyLinearToGamma

copyLinearToGamma(color: I3JS.Color, gammaFactor?: number): I3JS.Color

- Defined in lib/threejs-library/types/three/math.ts:572
Copies the given color into this color, and then converts this color from linear space to gamma space by taking .r, .g and .b to the power of 1 / gammaFactor.

Parameters
- color: I3JS.Color
  
  Color to copy.
- Optional gammaFactor: number
  
  Default is 2.0.
Returns I3JS.Color

copyLinearToSRGB

copyLinearToSRGB(color: I3JS.Color): I3JS.Color

- Defined in lib/threejs-library/types/three/math.ts:595
Copies the given color into this color, and then converts this color from linear space to sRGB space.

Parameters
- color: I3JS.Color
  
  Color to copy.
Returns I3JS.Color

copySRGBToLinear

copySRGBToLinear(color: I3JS.Color): I3JS.Color

- Defined in lib/threejs-library/types/three/math.ts:589
Converts this color from sRGB space to linear space.

Parameters
- color: I3JS.Color
Returns I3JS.Color

equals

equals(color: I3JS.Color): boolean

- Defined in lib/threejs-library/types/three/math.ts:694
Compares the RGB values of color with those of this object. Returns true if they are the same, false otherwise.

Parameters
- color: I3JS.Color
Returns boolean

fromArray

fromArray(array: ArrayLike<number> | number[], offset?: number): I3JS.Color

- Defined in lib/threejs-library/types/three/math.ts:701
Sets this color's components based on an array formatted like [ r, g, b ].

Parameters
- array: ArrayLike<number> | number[]
  
  Array of floats in the form [ r, g, b ].
- Optional offset: number
  
  An optional offset into the array.
Returns I3JS.Color

fromBufferAttribute

fromBufferAttribute(attribute: I3JS.BufferAttribute, index: number): I3JS.Color

- Defined in lib/threejs-library/types/three/math.ts:716
Sets this color's components from the attribute.

Parameters
- attribute: I3JS.BufferAttribute
  
  The source attribute.
- index: number
  
  index in the attribute.
Returns I3JS.Color

getHSL

getHSL(target: HSL): HSL

- Defined in lib/threejs-library/types/three/math.ts:622
Convert this Color's .r, .g and .b values to HSL format and returns an object of the form: { h: 0, s: 0, l: 0 }

Parameters
- target: HSL
  
  The result will be copied into this Object. Adds h, s and l keys to the object (if not already present).
Returns HSL

getHex

getHex(): number

- Defined in lib/threejs-library/types/three/math.ts:611
Returns number
Returns the hexadecimal value of this color.

getHexString

getHexString(): string

- Defined in lib/threejs-library/types/three/math.ts:616
Returns string
Returns the hexadecimal value of this color as a string (for example, 'FFFFFF').

getStyle

getStyle(): string

- Defined in lib/threejs-library/types/three/math.ts:627
Returns string
Returns the value of this color as a CSS style string. Example: 'rgb(255,0,0)'.

lerp

lerp(color: I3JS.Color, alpha: number): I3JS.Color

- Defined in lib/threejs-library/types/three/math.ts:672
Linearly interpolates this color's RGB values toward the RGB values of the passed argument. The alpha argument can be thought of as the ratio between the two colors, where 0.0 is this color and 1.0 is the first argument.

Parameters
- color: I3JS.Color
  
  color to converge on.
- alpha: number
Returns I3JS.Color

lerpColors

lerpColors(color1: I3JS.Color, color2: I3JS.Color, alpha: number): I3JS.Color

- Defined in lib/threejs-library/types/three/math.ts:680
Sets this color to be the color linearly interpolated between color1 and color2 where alpha is the percent distance along the line connecting the two colors - alpha = 0 will be color1, and alpha = 1 will be color2.

Parameters
- color1: I3JS.Color
  
  The starting Color.
- color2: I3JS.Color
  
  Color to interpolate towards.
- alpha: number
Returns I3JS.Color

lerpHSL

lerpHSL(color: I3JS.Color, alpha: number): I3JS.Color

- Defined in lib/threejs-library/types/three/math.ts:689
Linearly interpolates this color's HSL values toward the HSL values of the passed argument. It differs from the classic .lerp by not interpolating straight from one color to the other, but instead going through all the hues in between those two colors. The alpha argument can be thought of as the ratio between the two colors, where 0.0 is this color and 1.0 is the first argument.

Parameters
- color: I3JS.Color
  
  color to converge on.
- alpha: number
Returns I3JS.Color

multiply

multiply(color: I3JS.Color): I3JS.Color

- Defined in lib/threejs-library/types/three/math.ts:659
Multiplies this color's RGB values by the given color's RGB values.

Parameters
- color: I3JS.Color
Returns I3JS.Color

multiplyScalar

multiplyScalar(s: number): I3JS.Color

- Defined in lib/threejs-library/types/three/math.ts:664
Multiplies this color's RGB values by s.

Parameters
- s: number
Returns I3JS.Color

offsetHSL

offsetHSL(h: number, s: number, l: number): I3JS.Color

- Defined in lib/threejs-library/types/three/math.ts:633
Adds the given h, s, and l to this color's values. Internally, this converts the color's .r, .g and .b values to HSL, adds h, s, and l, and then converts the color back to RGB.

Parameters
- h: number
- s: number
- l: number
Returns I3JS.Color

set

set(color: I3JS.ColorRepresentation): I3JS.Color

- Defined in lib/threejs-library/types/three/math.ts:503
See the Constructor above for full details of what value can be. Delegates to .copy, .setStyle, or .setHex depending on input type.

Parameters
- color: I3JS.ColorRepresentation
  
  Value to set this color to.
Returns I3JS.Color

setColorName

setColorName(style: string): I3JS.Color

- Defined in lib/threejs-library/types/three/math.ts:548
Sets this color from a color name. Faster than .setStyle method if you don't need the other CSS-style formats. For convenience, the list of names is exposed in Color.NAMES as a hash: Color.NAMES.aliceblue // returns 0xF0F8FF

Parameters
- style: string
  
  color name ( from X11 color names ).
Returns I3JS.Color

setHSL

setHSL(h: number, s: number, l: number): I3JS.Color

- Defined in lib/threejs-library/types/three/math.ts:532
Sets color from HSL values.

Parameters
- h: number
  
  hue value between 0.0 and 1.0
- s: number
  
  saturation value between 0.0 and 1.0
- l: number
  
  lightness value between 0.0 and 1.0
Returns I3JS.Color

setHex

setHex(hex: number): I3JS.Color

- Defined in lib/threejs-library/types/three/math.ts:515
Sets this color from a hexadecimal value.

Parameters
- hex: number
  
  (https://en.wikipedia.org/wiki/Web_colors#Hex_triplet) format.
Returns I3JS.Color

setRGB

setRGB(r: number, g: number, b: number): I3JS.Color

- Defined in lib/threejs-library/types/three/math.ts:523
Sets this color from RGB values.

Parameters
- r: number
  
  Red channel value between 0.0 and 1.0.
- g: number
  
  Green channel value between 0.0 and 1.0.
- b: number
  
  Blue channel value between 0.0 and 1.0.
Returns I3JS.Color

setScalar

setScalar(scalar: number): I3JS.Color

- Defined in lib/threejs-library/types/three/math.ts:509
Sets all three color components to the value scalar.

Parameters
- scalar: number
  
  A value between 0.0 and 1.0.
Returns I3JS.Color

setStyle

setStyle(style: string): I3JS.Color

- Defined in lib/threejs-library/types/three/math.ts:540
Sets this color from a CSS-style string. For example, "rgb(250, 0,0)", "rgb(100%, 0%, 0%)", "hsl(0, 100%, 50%)", "#ff0000", "#f00", or "red" ( or any X11 color name - all 140 color names are supported ). Translucent colors such as "rgba(255, 0, 0, 0.5)" and "hsla(0, 100%, 50%, 0.5)" are also accepted, but the alpha-channel coordinate will be discarded. Note that for X11 color names, multiple words such as Dark Orange become the string 'darkorange'.

Parameters
- style: string
  
  color as a CSS-style string.
Returns I3JS.Color

sub

sub(color: I3JS.Color): I3JS.Color

- Defined in lib/threejs-library/types/three/math.ts:654
Subtracts the RGB components of the given color from the RGB components of this color. If this results in a negative component, that component is set to zero.

Parameters
- color: I3JS.Color
Returns I3JS.Color

toArray

toArray(array?: ArrayLike<number> | number[], offset?: number): number[]

- Defined in lib/threejs-library/types/three/math.ts:709
Returns an array [red, green, blue], or copies red, green and blue into the provided array.

Parameters
- Optional array: ArrayLike<number> | number[]
  
  An optional array to store the color to.
- Optional offset: number
  
  An optional offset into the array.
Returns number[]
Returns an array of the form [ r, g, b ].

Examples

Code Example

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Optional r: I3JS.ColorRepresentation

Optional g: number

Optional b: number

Returns I3JS.Color

Properties

NAMES

b

g

Readonly isColor

r

Methods

add

Parameters

color: I3JS.Color

Returns I3JS.Color

addColors

Parameters

color1: I3JS.Color

color2: I3JS.Color

Returns I3JS.Color

addScalar

Parameters

s: number

Returns I3JS.Color

clone

Returns I3JS.Color

convertGammaToLinear

Parameters

Optional gammaFactor: number

Returns I3JS.Color

convertLinearToGamma

Parameters

Optional gammaFactor: number

Returns I3JS.Color

convertLinearToSRGB

Returns I3JS.Color

convertSRGBToLinear

Returns I3JS.Color

copy

Parameters

color: I3JS.Color

Returns I3JS.Color

copyGammaToLinear

Parameters

color: I3JS.Color

Optional gammaFactor: number

Returns I3JS.Color

copyLinearToGamma

Parameters

color: I3JS.Color

Optional gammaFactor: number

Returns I3JS.Color

copyLinearToSRGB

Parameters

color: I3JS.Color

Returns I3JS.Color

copySRGBToLinear

Parameters

color: I3JS.Color

Returns I3JS.Color

equals

Parameters

color: I3JS.Color

Returns boolean

fromArray

Parameters

array: ArrayLike<number> | number[]

Optional offset: number

Returns I3JS.Color

fromBufferAttribute