---
title: "Color | JavaScript maps SDK"
description: "Documentation for MapTiler SDK"
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Class Color

Color representation used by WebGL. Defined in sRGB color space and pre-blended with alpha.

#### Private[](#private)

##### Index

### Constructors[](#constructors)

[constructor](#constructor)

### Properties[](#properties)

[a](#a) [b](#b) [g](#g) [r](#r) [black](#black) [red](#red) [transparent](#transparent) [white](#white)

### Accessors[](#accessors)

[hcl](#hcl) [lab](#lab) [rgb](#rgb)

### Methods[](#methods)

[toString](#tostring) [interpolate](#interpolate) [parse](#parse)

## Constructors[](#constructors-1)

### constructor[](#constructor)

-   new Color(  
        r: number,  
        g: number,  
        b: number,  
        alpha?: number,  
        premultiplied?: boolean,  
    ): Color[](#constructorcolor)
    
    #### Parameters
    
    -   r: number
        
        Red component premultiplied by `alpha` 0..1
        
    -   g: number
        
        Green component premultiplied by `alpha` 0..1
        
    -   b: number
        
        Blue component premultiplied by `alpha` 0..1
        
    -   `Optional`alpha: number
        
        Alpha component 0..1
        
    -   `Optional`premultiplied: boolean
        
        Whether the `r`, `g` and `b` values have already been multiplied by alpha. If `true` nothing happens if `false` then they will be multiplied automatically.
        
    
    #### Returns Color
    

## Properties[](#properties-1)

### `Readonly`a[](#a)

a: number

### `Readonly`b[](#b)

b: number

### `Readonly`g[](#g)

g: number

### `Readonly`r[](#r)

r: number

### `Static`black[](#black)

black: Color

### `Static`red[](#red)

red: Color

### `Static`transparent[](#transparent)

transparent: Color

### `Static`white[](#white)

white: Color

## Accessors[](#accessors-1)

### hcl[](#hcl)

-   get hcl(): [HCLColor](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.HCLColor/)
    
    Used in color interpolation.
    
    #### Returns [HCLColor](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.HCLColor/)
    
    Gien color, with reversed alpha blending, in HCL color space.
    

### lab[](#lab)

-   get lab(): [LABColor](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.LABColor/)
    
    Used in color interpolation.
    
    #### Returns [LABColor](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.LABColor/)
    
    Gien color, with reversed alpha blending, in LAB color space.
    

### rgb[](#rgb)

-   get rgb(): [RGBColor](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.RGBColor/)
    
    Used in color interpolation and by 'to-rgba' expression.
    
    #### Returns [RGBColor](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.RGBColor/)
    
    Gien color, with reversed alpha blending, in sRGB color space.
    

## Methods[](#methods-1)

### toString[](#tostring)

-   toString(): string[](#tostring-1)
    
    Used by 'to-string' expression.
    
    #### Returns string
    
    Serialized color in format `rgba(r,g,b,a)` where r,g,b are numbers within 0..255 and alpha is number within 1..0
    
    #### Example[](#example)
    
    ```typescript
    var purple = new Color.parse('purple');
    purple.toString; // = "rgba(128,0,128,1)"
    var translucentGreen = new Color.parse('rgba(26, 207, 26, .73)');
    translucentGreen.toString(); // = "rgba(26,207,26,0.73)"
    ```
    

### `Static`interpolate[](#interpolate)

-   interpolate(  
        from: Color,  
        to: Color,  
        t: number,  
        spaceKey?: [InterpolationColorSpace](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.InterpolationColorSpace/),  
    ): Color[](#interpolate-1)
    
    #### Parameters
    
    -   from: Color
    -   to: Color
    -   t: number
    -   `Optional`spaceKey: [InterpolationColorSpace](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.InterpolationColorSpace/)
    
    #### Returns Color
    

### `Static`parse[](#parse)

-   parse(input: string | Color | null | undefined): Color | undefined[](#parse-1)
    
    Parses CSS color strings and converts colors to sRGB color space if needed. Officially supported color formats:
    
    -   keyword, e.g. 'aquamarine' or 'steelblue'
    -   hex (with 3, 4, 6 or 8 digits), e.g. '#f0f' or '#e9bebea9'
    -   rgb and rgba, e.g. 'rgb(0,240,120)' or 'rgba(0%,94%,47%,0.1)' or 'rgb(0 240 120 / .3)'
    -   hsl and hsla, e.g. 'hsl(0,0%,83%)' or 'hsla(0,0%,83%,.5)' or 'hsl(0 0% 83% / 20%)'
    
    #### Parameters
    
    -   input: string | Color | null | undefined
        
        CSS color string to parse.
        
    
    #### Returns Color | undefined
    
    A `Color` instance, or `undefined` if the input is not a valid color string.