Skip to main content

Color Spaces in color-core

color-core supports a wide range of color spaces, allowing you to work with colors in the format that best suits your needs. Each color space has its own unique properties and use cases. Let's explore the supported color spaces and how to convert between them.

Supported Color Spaces​

color-core supports the following color spaces:

  1. RGB (Red, Green, Blue)
  2. sRGB (Standard RGB)
  3. HSL (Hue, Saturation, Lightness)
  4. HSV (Hue, Saturation, Value)
  5. CMYK (Cyan, Magenta, Yellow, Key)
  6. LAB (CIELAB)
  7. LCH (Lightness, Chroma, Hue)
  8. XYZ
  9. YUV
  10. Oklab
  11. Oklch
  12. HSLuv
  13. HPLuv
  14. CIE xyY
  15. CIE Luv
  16. HSI (Hue, Saturation, Intensity)
  17. HWB (Hue, Whiteness, Blackness)
  18. Adobe RGB

Additionally, color-core supports different white points for some color spaces:

  • XYZ D50 and D65
  • LAB D50 and D65

Let's explore some of these color spaces in detail:

RGB (Red, Green, Blue)​

RGB is an additive color model where red, green, and blue light are added together to reproduce a broad array of colors. It's commonly used in digital displays.

const rgbColor = new Color({ r: 255, g: 0, b: 0 });

Adjust the RGB values:

RGB: {"r":255,"g":0,"b":0,"a":1}

Hex: #ff0000

HSL (Hue, Saturation, Lightness)​

HSL represents colors using hue, saturation, and lightness. This model is often more intuitive for humans to understand and manipulate than RGB.

  • Hue: The base color (0-360 degrees)
  • Saturation: The intensity of the color (0-100%)
  • Lightness: The brightness of the color (0-100%)
const hslColor = new Color({ h: 0, s: 100, l: 50 });

Adjust the HSL values:

HSL: {"h":0,"s":100,"l":50}

Hex: #ff0000

LAB (CIELAB)​

The LAB color space is designed to approximate human vision. It's particularly useful for predicting visual uniformity.

  • L: Lightness (0-100)
  • a: Green-Red component (-128 to +127)
  • b: Blue-Yellow component (-128 to +127)
const labColor = new Color({ l: 53.24, a: 80.09, b: 67.20 });

Adjust the LAB values:

LAB: {"l":53.240794,"a":80.09246,"b":67.203197}

Hex: #ff0000

XYZ​

The XYZ color space is a device-independent color space that represents all colors visible to the human eye. It's often used as an intermediate color space for converting between other color spaces.

const xyzColor = new Color({ x: 41.24, y: 21.26, z: 1.93 });

Adjust the XYZ values:

XYZ: {"x":0.412456,"y":0.212673,"z":0.019334,"whitePoint":"D65"}

Hex: #ff0000

Converting Between Color Spaces​

color-core makes it easy to convert between different color spaces:

const color = new Color('#ff0000');

console.log(color.toRgb());     // { r: 255, g: 0, b: 0 }
console.log(color.toHsl());     // { h: 0, s: 100, l: 50 }
console.log(color.toCmyk());    // { c: 0, m: 100, y: 100, k: 0 }
console.log(color.toLab());     // { l: 53.24, a: 80.09, b: 67.20 }
console.log(color.toXyz());     // { x: 41.24, y: 21.26, z: 1.93 }
console.log(color.toXyzD50());  // { x: 37.95, y: 20.69, z: 1.88 }
console.log(color.toLabD50());  // { l: 52.53, a: 75.02, b: 65.36 }

Note that for XYZ and LAB color spaces, you can specify the white point (D50 or D65) using the appropriate method.

These are just a few examples of the color spaces supported by color-core. Each color space has its own unique properties and use cases. For instance, CMYK is commonly used in printing, while HSL and HSV are often used in color pickers due to their intuitive nature.

Explore the API documentation to learn about all available color spaces and conversion methods, and how to best utilize them in your projects.