Skip to main content

Color Channel Functions

Example:

@-from '@jesscss/fns' import (hue, hsl);

.box {
  value: hue(hsl(90, 100%, 50%));
}

hue​

Extracts the hue channel of a color object in the HSL color space.

Parameters: color - a color object.

Returns: integer 0-360

Example: hue(hsl(90, 100%, 50%))

Output: 90

saturation​

Extracts the saturation channel of a color object in the HSL color space.

Parameters: color - a color object.

Returns: percentage 0-100

Example: saturation(hsl(90, 100%, 50%))

Output: 100%

lightness​

Extracts the lightness channel of a color object in the HSL color space.

Parameters: color - a color object.

Returns: percentage 0-100

Example: lightness(hsl(90, 100%, 50%))

Output: 50%

hsvhue​

Extracts the hue channel of a color object in the HSV color space.

Parameters: color - a color object.

Returns: integer 0-360

Example: hsvhue(hsv(90, 100%, 50%))

Output: 90

hsvsaturation​

Extracts the saturation channel of a color object in the HSV color space.

Parameters: color - a color object.

Returns: percentage 0-100

Example: hsvsaturation(hsv(90, 100%, 50%))

Output: 100%

hsvvalue​

Extracts the value channel of a color object in the HSV color space.

Parameters: color - a color object.

Returns: percentage 0-100

Example: hsvvalue(hsv(90, 100%, 50%))

Output: 50%

red​

Extracts the red channel of a color object.

Parameters: color - a color object.

Returns: float 0-255

Example: red(rgb(10, 20, 30))

Output: 10

green​

Extracts the green channel of a color object.

Parameters: color - a color object.

Returns: float 0-255

Example: green(rgb(10, 20, 30))

Output: 20

blue​

Extracts the blue channel of a color object.

Parameters: color - a color object.

Returns: float 0-255

Example: blue(rgb(10, 20, 30))

Output: 30

alpha​

Extracts the alpha channel of a color object.

Parameters: color - a color object.

Returns: float 0-1

Example: alpha(rgba(10, 20, 30, 0.5))

Output: 0.5

luma​

Calculates the luma (perceptual brightness) of a color object.

Uses SMPTE C / Rec. 709 coefficients, as recommended in WCAG 2.0. This calculation is also used in the contrast function.

Parameters: color - a color object.

Returns: percentage 0-100%

Example: luma(rgb(100, 200, 30))

Output: 44%

luminance​

Calculates the value of the luma without gamma correction

Parameters: color - a color object.

Returns: percentage 0-100%

Example: luminance(rgb(100, 200, 30))

Output: 65%