Class Color

Class representing a color.

A Color instance is represented by RGB components in the linear working color space, which defaults to LinearSRGBColorSpace. Inputs conventionally using SRGBColorSpace (such as hexadecimals and CSS strings) are converted to the working color space automatically.

// converted automatically from SRGBColorSpace to LinearSRGBColorSpace
const color = new THREE.Color().setHex( 0x112233 );

Source color spaces may be specified explicitly, to ensure correct conversions.

// assumed already LinearSRGBColorSpace; no conversion
const color = new THREE.Color().setRGB( 0.5, 0.5, 0.5 );

// converted explicitly from SRGBColorSpace to LinearSRGBColorSpace
const color = new THREE.Color().setRGB( 0.5, 0.5, 0.5, SRGBColorSpace );

If THREE.ColorManagement is disabled, no conversions occur. For details, see Color management.

Iterating through a Color instance will yield its components (r, g, b) in the corresponding order.

Constructors

constructor

Properties

b g isColor r NAMES

Methods

[iterator] add addColors addScalar applyMatrix3 clone convertLinearToSRGB convertSRGBToLinear copy copyLinearToSRGB copySRGBToLinear equals fromArray fromBufferAttribute getHex getHexString getHSL getRGB getStyle lerp lerpColors lerpHSL multiply multiplyScalar offsetHSL set setColorName setFromVector3 setHex setHSL setRGB setScalar setStyle sub toArray toJSON

Constructors

constructor

  • new Color(color?): Color

  • Parameters

    Returns Color

  • new Color(r, g, b): Color

  • Parameters

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

    Returns Color

Properties

b

b: number

Blue channel value between 0.0 and 1.0. Default is 1.

Default

1

g

g: number

Green channel value between 0.0 and 1.0. Default is 1.

Default

1

ReadonlyisColor

isColor

r

r: number

Red channel value between 0.0 and 1.0. Default is 1.

Default

1

StaticNAMES

NAMES: {
    aliceblue: 15792383;
    antiquewhite: 16444375;
    aqua: 65535;
    aquamarine: 8388564;
    azure: 15794175;
    beige: 16119260;
    bisque: 16770244;
    black: 0;
    blanchedalmond: 16772045;
    blue: 255;
    blueviolet: 9055202;
    brown: 10824234;
    burlywood: 14596231;
    cadetblue: 6266528;
    chartreuse: 8388352;
    chocolate: 13789470;
    coral: 16744272;
    cornflowerblue: 6591981;
    cornsilk: 16775388;
    crimson: 14423100;
    cyan: 65535;
    darkblue: 139;
    darkcyan: 35723;
    darkgoldenrod: 12092939;
    darkgray: 11119017;
    darkgreen: 25600;
    darkgrey: 11119017;
    darkkhaki: 12433259;
    darkmagenta: 9109643;
    darkolivegreen: 5597999;
    darkorange: 16747520;
    darkorchid: 10040012;
    darkred: 9109504;
    darksalmon: 15308410;
    darkseagreen: 9419919;
    darkslateblue: 4734347;
    darkslategray: 3100495;
    darkslategrey: 3100495;
    darkturquoise: 52945;
    darkviolet: 9699539;
    deeppink: 16716947;
    deepskyblue: 49151;
    dimgray: 6908265;
    dimgrey: 6908265;
    dodgerblue: 2003199;
    firebrick: 11674146;
    floralwhite: 16775920;
    forestgreen: 2263842;
    fuchsia: 16711935;
    gainsboro: 14474460;
    ghostwhite: 16316671;
    gold: 16766720;
    goldenrod: 14329120;
    gray: 8421504;
    green: 32768;
    greenyellow: 11403055;
    grey: 8421504;
    honeydew: 15794160;
    hotpink: 16738740;
    indianred: 13458524;
    indigo: 4915330;
    ivory: 16777200;
    khaki: 15787660;
    lavender: 15132410;
    lavenderblush: 16773365;
    lawngreen: 8190976;
    lemonchiffon: 16775885;
    lightblue: 11393254;
    lightcoral: 15761536;
    lightcyan: 14745599;
    lightgoldenrodyellow: 16448210;
    lightgray: 13882323;
    lightgreen: 9498256;
    lightgrey: 13882323;
    lightpink: 16758465;
    lightsalmon: 16752762;
    lightseagreen: 2142890;
    lightskyblue: 8900346;
    lightslategray: 7833753;
    lightslategrey: 7833753;
    lightsteelblue: 11584734;
    lightyellow: 16777184;
    lime: 65280;
    limegreen: 3329330;
    linen: 16445670;
    magenta: 16711935;
    maroon: 8388608;
    mediumaquamarine: 6737322;
    mediumblue: 205;
    mediumorchid: 12211667;
    mediumpurple: 9662683;
    mediumseagreen: 3978097;
    mediumslateblue: 8087790;
    mediumspringgreen: 64154;
    mediumturquoise: 4772300;
    mediumvioletred: 13047173;
    midnightblue: 1644912;
    mintcream: 16121850;
    mistyrose: 16770273;
    moccasin: 16770229;
    navajowhite: 16768685;
    navy: 128;
    oldlace: 16643558;
    olive: 8421376;
    olivedrab: 7048739;
    orange: 16753920;
    orangered: 16729344;
    orchid: 14315734;
    palegoldenrod: 15657130;
    palegreen: 10025880;
    paleturquoise: 11529966;
    palevioletred: 14381203;
    papayawhip: 16773077;
    peachpuff: 16767673;
    peru: 13468991;
    pink: 16761035;
    plum: 14524637;
    powderblue: 11591910;
    purple: 8388736;
    rebeccapurple: 6697881;
    red: 16711680;
    rosybrown: 12357519;
    royalblue: 4286945;
    saddlebrown: 9127187;
    salmon: 16416882;
    sandybrown: 16032864;
    seagreen: 3050327;
    seashell: 16774638;
    sienna: 10506797;
    silver: 12632256;
    skyblue: 8900331;
    slateblue: 6970061;
    slategray: 7372944;
    slategrey: 7372944;
    snow: 16775930;
    springgreen: 65407;
    steelblue: 4620980;
    tan: 13808780;
    teal: 32896;
    thistle: 14204888;
    tomato: 16737095;
    turquoise: 4251856;
    violet: 15631086;
    wheat: 16113331;
    white: 16777215;
    whitesmoke: 16119285;
    yellow: 16776960;
    yellowgreen: 10145074;
}

List of X11 color names.

Methods

[iterator]

  • [iterator](): Generator<number, void, unknown>

  • Returns Generator<number, void, unknown>

add

  • add(color): this

  • Parameters

    Returns this

addColors

  • addColors(color1, color2): this

  • Parameters

    Returns this

addScalar

  • addScalar(s): this

  • Parameters

    • s: number

    Returns this

applyMatrix3

  • applyMatrix3(m): this

  • Applies the transform m to this color's RGB components.

    Parameters

    Returns this

clone

  • clone(): this

  • Clones this color.

    Returns this

convertLinearToSRGB

  • convertLinearToSRGB(): Color

  • Converts this color from LinearSRGBColorSpace to SRGBColorSpace.

    Returns Color

convertSRGBToLinear

  • convertSRGBToLinear(): Color

  • Converts this color from SRGBColorSpace to LinearSRGBColorSpace.

    Returns Color

copy

  • copy(color): this

  • Copies given color.

    Parameters

    • color: Color

      Color to copy.

    Returns this

copyLinearToSRGB

  • copyLinearToSRGB(color): Color

  • Copies given color making conversion from LinearSRGBColorSpace to SRGBColorSpace.

    Parameters

    • color: Color

      Color to copy.

    Returns Color

copySRGBToLinear

  • copySRGBToLinear(color): Color

  • Copies given color making conversion from SRGBColorSpace to LinearSRGBColorSpace.

    Parameters

    • color: Color

      Color to copy.

    Returns Color

equals

  • equals(color): boolean

  • Parameters

    Returns boolean

fromArray

  • fromArray(array, offset?): this

  • Sets this color's red, green and blue value from the provided array or array-like.

    Parameters

    • array: ArrayLike<number> | number[]

      the source array or array-like.

    • Optionaloffset: number

      (optional) offset into the array-like. Default is 0.

    Returns this

fromBufferAttribute

getHex

  • getHex(colorSpace?): number

  • Returns the hexadecimal value of this color.

    Parameters

    • OptionalcolorSpace: string

    Returns number

getHexString

  • getHexString(colorSpace?): string

  • Returns the string formated hexadecimal value of this color.

    Parameters

    • OptionalcolorSpace: string

    Returns string

getHSL

  • getHSL(target, colorSpace?): HSL

  • Parameters

    • target: HSL
    • OptionalcolorSpace: string

    Returns HSL

getRGB

  • getRGB(target, colorSpace?): RGB

  • Parameters

    • target: RGB
    • OptionalcolorSpace: string

    Returns RGB

getStyle

  • getStyle(colorSpace?): string

  • Returns the value of this color in CSS context style. Example: rgb(r, g, b)

    Parameters

    • OptionalcolorSpace: string

    Returns string

lerp

  • lerp(color, alpha): this

  • Parameters

    • color: Color
    • alpha: number

    Returns this

lerpColors

  • lerpColors(color1, color2, alpha): this

  • Parameters

    Returns this

lerpHSL

  • lerpHSL(color, alpha): this

  • Parameters

    • color: Color
    • alpha: number

    Returns this

multiply

  • multiply(color): this

  • Parameters

    Returns this

multiplyScalar

  • multiplyScalar(s): this

  • Parameters

    • s: number

    Returns this

offsetHSL

  • offsetHSL(h, s, l): this

  • Parameters

    • h: number
    • s: number
    • l: number

    Returns this

set

  • set(...args): this

  • Parameters

    Returns this

setColorName

  • setColorName(style, colorSpace?): Color

  • Sets this color from a color name. Faster than .setStyle() method if you don't need the other CSS-style formats.

    Parameters

    • style: string

      Color name in X11 format.

    • OptionalcolorSpace: string

    Returns Color

setFromVector3

  • setFromVector3(vector): this

  • Sets this color's r, g and b components from the x, y, and z components of the specified vector.

    Parameters

    Returns this

setHex

  • setHex(hex, colorSpace?): Color

  • Parameters

    • hex: number
    • OptionalcolorSpace: string

    Returns Color

setHSL

  • setHSL(h, s, l, colorSpace?): Color

  • Sets this color from HSL values. Based on MochiKit implementation by Bob Ippolito.

    Parameters

    • h: number

      Hue channel value between 0 and 1.

    • s: number

      Saturation value channel between 0 and 1.

    • l: number

      Value channel value between 0 and 1.

    • OptionalcolorSpace: string

    Returns Color

setRGB

  • setRGB(r, g, b, colorSpace?): Color

  • Sets this color from RGB values.

    Parameters

    • r: number

      Red channel value between 0 and 1.

    • g: number

      Green channel value between 0 and 1.

    • b: number

      Blue channel value between 0 and 1.

    • OptionalcolorSpace: string

    Returns Color

setScalar

  • setScalar(scalar): Color

  • Parameters

    • scalar: number

    Returns Color

setStyle

  • setStyle(style, colorSpace?): Color

  • Sets this color from a CSS context style string.

    Parameters

    • style: string
    • OptionalcolorSpace: string

    Returns Color

sub

  • sub(color): this

  • Parameters

    Returns this

toArray

  • toArray(array?, offset?): number[]

  • Returns an array [red, green, blue], or copies red, green and blue into the provided array.

    Parameters

    • Optionalarray: number[]

      (optional) array to store the color to. If this is not provided, a new array will be created.

    • Optionaloffset: number

      (optional) optional offset into the array.

    Returns number[]

    The created or provided array.

  • toArray(xyz, offset?): ArrayLike<number>

  • Copies red, green and blue into the provided array-like.

    Parameters

    • xyz: ArrayLike<number>
    • Optionaloffset: number

      (optional) optional offset into the array-like.

    Returns ArrayLike<number>

    The provided array-like.

toJSON

  • toJSON(): number

  • This method defines the serialization result of Color.

    Returns number

    The color as a hexadecimal value.

Settings

Member Visibility

On This Page

Constructors
Properties
Methods