Spectrum class
The Spectrum
class is a fundamental component of the library, representing
colors in HEX
, HSL
, and RGB
color spaces. Spectrum instances can be used
with various methods to convert between color spaces and access individual color
channels.
Constructor
Parameters
Name | Type | Description |
---|---|---|
colorSpace | 'hex' | 'hsl' | 'rgb' | CssNamedColor | The color space of the input value |
value | string | Array<string | number> | undefined | The color value. The format depends on the color space. See details. |
Value
The allowed input formats for each color space are as follows:
For hex
color space:
- The input can be only a string value with optional preceding
#
. - It also accepts shorthand HEX notation and alpha channel. See examples.
For hsl
and rgb
color spaces an input can be:
- A string of space-separated or comma-separated values.
- An array of values in a valid format.
For hsl
, the format is [hue, saturation, lightness, opacity]
.
For rgb
, the format is [red, green, blue, opacity]
.
You can also use a CSS named color as a first parameter. For example, 'red'
or
'blue'
. In this case, you should not provide a second parameter.
See examples.
Valid formats
For hsl
:
Value | Format | Example |
---|---|---|
hue | string | number without a unit | 180 , '180' |
saturation | Percentage string or a decimal point number in range [0; 1] | '25%' , 0.25 |
lightness | Percentage string or a decimal point number in range [0; 1] | '50%' , 0.5 |
opacity | Percentage string or a decimal point number in range [0; 1] | '90%' , 0.9 |
For rgb
:
Value | Format | Example |
---|---|---|
red | string | number | 255 , '255' |
green | string | number | '90' , 90 |
blue | string | number | '30' , 30 |
opacity | Percentage string or a decimal point number in range [0; 1] | '90%' , 0.9 |
Examples
With hex
With hsl
With rgb
With CSS named color
Static class methods
Apart from the constructor, you can also create a new Spectrum
instance: using
the class methods fromHslObj
and fromRgbObj
. These methods allow you to
create a new instance from the objects returned by hsl
and
rgb
instance properties or by providing a custom object of your own.
:::caution The objects passed to fromHslObj()
and fromRgbObj()
methods must
be numeric values. Thus, valid value for the saturation property is only
s: 0.7
. Setting it as s: '70%'
will result in an error. :::
fromHslObj()
Creates a new instance of the Spectrum
class using an
HSL object as an input. All properties of an HSL object
are required.
Usage
Parameters
Name | Type | Description |
---|---|---|
hslObj | HslObj | An object representing the HSL color values with properties h (hue), s (saturation), l (lightness), and a (alpha). |
Returns Spectrum
instance.
Examples
fromRgbObj()
Creates a new instance of the Spectrum
class using an
RGB object as an input. All properties of an RGB object
are required.
Usage
Parameters
Name | Type | Description |
---|---|---|
rgbObj | RgbObj | An object representing the RGB color values with properties r (red), g (green), b (blue), and a (alpha). |
Returns Spectrum
instance.
Examples
Instance properties
hex
The hex
property retrieves the hexadecimal representation of the color.
Returns: string
.
hsl
The hsl
property retrieves the HSL object of the color.
Returns HslObj
.
rgb
The rgb
property retrieves the RGB object of the color.
Returns RgbObj
.
alpha
The alpha
property retrieves the alpha channel value of the color.
Returns: number
.
red
The red
property retrieves the red channel value of the color.
Returns: number
.
green
The green
property retrieves the green channel value of the color.
Returns: number
.
blue
The blue
property retrieves the blue channel value of the color.
Returns: number
.
hue
The hue
property retrieves the hue value of the color.
Returns: number
.
saturation
The saturation
property retrieves the saturation value of the color.
Returns: number
.
lightness
The lightness
property retrieves the lightness value of the color.
Returns: number
.