SassColor

Sass's color type.

No matter what representation was originally used to create this color, all of its channels are accessible.

Hierarchy

Constructors

constructor

Accessors

alpha asList blackness blue channels channelsOrNull green hasBrackets hue isLegacy isTruthy lightness realNull red saturation separator space whiteness

Methods

assertBoolean assertCalculation assertColor assertFunction assertMap assertMixin assertNumber assertString change channel equals get hashCode interpolate isChannelMissing isChannelPowerless isInGamut sassIndexToListIndex toGamut toSpace tryMap

Constructors

constructor

  • Creates an RGB color.

    If space is missing, only undefined should be used to indicate that alpha isn't passed. If null is used instead, it will be treated as a missing component. See breaking changes for details.

    If space is defined and null is passed for any component, it will be treated as a missing component.

    Throws

    Error if alpha is set and isn't null or a number between 0 and 1.

    Parameters

    • options: {
          alpha?: null | number;
          blue: null | number;
          green: null | number;
          red: null | number;
          space?: "rgb";
      }
      • Optional alpha?: null | number
      • blue: null | number
      • green: null | number
      • red: null | number
      • Optional space?: "rgb"

    Returns SassColor

constructor

  • Creates an HSL color.

    If space is missing, only undefined should be used to indicate that alpha isn't passed. If null is used instead, it will be treated as a missing component. See breaking changes for details.

    If space is defined and null is passed for any component, it will be treated as a missing component.

    Throws

    Error if alpha is set and isn't null or a number between 0 and 1.

    Parameters

    • options: {
          alpha?: null | number;
          hue: null | number;
          lightness: null | number;
          saturation: null | number;
          space?: "hsl";
      }
      • Optional alpha?: null | number
      • hue: null | number
      • lightness: null | number
      • saturation: null | number
      • Optional space?: "hsl"

    Returns SassColor

constructor

  • Creates an HWB color.

    If space is missing, only undefined should be used to indicate that alpha isn't passed. If null is used instead, it will be treated as a missing component. See breaking changes for details.

    If space is defined and null is passed for any component, it will be treated as a missing component.

    Throws

    Error if alpha is set and isn't null or a number between 0 and 1.

    Parameters

    • options: {
          alpha?: null | number;
          blackness: null | number;
          hue: null | number;
          space?: "hwb";
          whiteness: null | number;
      }
      • Optional alpha?: null | number
      • blackness: null | number
      • hue: null | number
      • Optional space?: "hwb"
      • whiteness: null | number

    Returns SassColor

constructor

  • Creates a Lab or Oklab color.

    If null is passed for any component, it will be treated as a missing component.

    Throws

    Error if alpha is set and isn't null or a number between 0 and 1.

    Parameters

    • options: {
          a: null | number;
          alpha?: null | number;
          b: null | number;
          lightness: null | number;
          space: ColorSpaceLab;
      }
      • a: null | number
      • Optional alpha?: null | number
      • b: null | number
      • lightness: null | number
      • space: ColorSpaceLab

    Returns SassColor

constructor

  • Creates an LCH or Oklch color.

    If null is passed for any component, it will be treated as a missing component.

    Throws

    Error if alpha is set and isn't null or a number between 0 and 1.

    Parameters

    • options: {
          alpha?: null | number;
          chroma: null | number;
          hue: null | number;
          lightness: null | number;
          space: ColorSpaceLch;
      }
      • Optional alpha?: null | number
      • chroma: null | number
      • hue: null | number
      • lightness: null | number
      • space: ColorSpaceLch

    Returns SassColor

constructor

  • Creates a color in a predefined RGB color space.

    If null is passed for any component, it will be treated as a missing component.

    Throws

    Error if alpha is set and isn't null or a number between 0 and 1.

    Parameters

    • options: {
          alpha?: null | number;
          blue: null | number;
          green: null | number;
          red: null | number;
          space: "display-p3" | "srgb" | "rec2020" | "a98-rgb" | "prophoto-rgb" | "srgb-linear";
      }
      • Optional alpha?: null | number
      • blue: null | number
      • green: null | number
      • red: null | number
      • space: "display-p3" | "srgb" | "rec2020" | "a98-rgb" | "prophoto-rgb" | "srgb-linear"

    Returns SassColor

constructor

  • Creates a color in a predefined XYZ color space.

    If null is passed for any component, it will be treated as a missing component.

    Throws

    Error if alpha is set and isn't null or a number between 0 and 1.

    Parameters

    • options: {
          alpha?: null | number;
          space: ColorSpaceXyz;
          x: null | number;
          y: null | number;
          z: null | number;
      }
      • Optional alpha?: null | number
      • space: ColorSpaceXyz
      • x: null | number
      • y: null | number
      • z: null | number

    Returns SassColor

Accessors

alpha

asList

blackness

blue

channels

channelsOrNull

green

hasBrackets

  • get hasBrackets(): boolean

  • Whether this value as a list has brackets.

    All SassScript values can be used as lists. Maps count as lists of pairs, and all other values count as single-value lists.

    Returns boolean

hue

isLegacy

  • get isLegacy(): boolean

  • A boolean indicating whether this color is in a legacy color space (rgb, hsl, or hwb).

    Returns boolean

isTruthy

  • get isTruthy(): boolean

  • Whether the value counts as true in an @if statement and other contexts.

    Returns boolean

lightness

realNull

red

saturation

separator

  • get separator(): ListSeparator

  • The separator for this value as a list.

    All SassScript values can be used as lists. Maps count as lists of pairs, and all other values count as single-value lists.

    Returns ListSeparator

space

whiteness

Methods

assertBoolean

assertCalculation

assertColor

assertFunction

assertMap

assertMixin

assertNumber

assertString

change

  • Returns a new color that's the result of changing one or more of this color's HSL channels.

    Throws

    Error if space is missing and this color is not in a legacy color space (rgb, hsl, or hwb).

    Throws

    Error if alpha is set and isn't null or a number between 0 and 1.

    Parameters

    • options: {
          alpha: undefined | null | number;
          hue: undefined | null | number;
          lightness: undefined | null | number;
          saturation: undefined | null | number;
      } & {
          space?: "hsl";
      }

    Returns SassColor

change

  • Returns a new color that's the result of changing one or more of this color's HWB channels.

    Throws

    Error if space is missing and this color is not in a legacy color space (rgb, hsl, or hwb).

    Throws

    Error if alpha is set and isn't null or a number between 0 and 1.

    Parameters

    • options: {
          alpha: undefined | null | number;
          blackness: undefined | null | number;
          hue: undefined | null | number;
          whiteness: undefined | null | number;
      } & {
          space?: "hwb";
      }

    Returns SassColor

change

  • Returns a new color that's the result of changing one or more of this color's Lab channels.

    Throws

    Error if space is missing and this color is not in the Lab or Oklab color spaces.

    Throws

    Error if alpha is set and isn't null or a number between 0 and 1.

    Parameters

    • options: {
          a: undefined | null | number;
          alpha: undefined | null | number;
          b: undefined | null | number;
          lightness: undefined | null | number;
      } & {
          space?: ColorSpaceLab;
      }

    Returns SassColor

change

  • Returns a new color that's the result of changing one or more of this color's LCH channels.

    Throws

    Error if space is missing and this color is not in the LCH or Oklch color spaces.

    Throws

    Error if alpha is set and isn't null or a number between 0 and 1.

    Parameters

    • options: {
          alpha: undefined | null | number;
          chroma: undefined | null | number;
          hue: undefined | null | number;
          lightness: undefined | null | number;
      } & {
          space?: ColorSpaceLch;
      }

    Returns SassColor

change

  • Returns a new color that's the result of changing one or more of this color's RGB channels.

    Throws

    Error if space is missing and this color is not in a legacy color space (rgb, hsl, or hwb).

    Throws

    Error if alpha is set and isn't null or a number between 0 and 1.

    Parameters

    • options: {
          alpha: undefined | null | number;
          blue: undefined | null | number;
          green: undefined | null | number;
          red: undefined | null | number;
      } & {
          space?: ColorSpaceRgb;
      }

    Returns SassColor

change

  • Returns a new color that's the result of changing one or more of this color's XYZ channels.

    Throws

    Error if space is missing and this color is not in an XYZ color space.

    Throws

    Error if alpha is set and isn't null or a number between 0 and 1.

    Parameters

    • options: {
          alpha: undefined | null | number;
          x: undefined | null | number;
          y: undefined | null | number;
          z: undefined | null | number;
      } & {
          space?: ColorSpaceXyz;
      }

    Returns SassColor

channel

channel

  • Returns the value of a single specified channel of this color after converting this color to the specified space, with missing channels converted to 0.

    Throws

    Error if channel is not alpha or a channel in space.

    Parameters

    • channel: ChannelNameHsl
    • options: {
          space: "hsl";
      }
      • space: "hsl"

    Returns number

channel

channel

channel

channel

channel

equals

get

  • Returns the value at index index in this value as a list, or undefined if index isn't valid for this list.

    All SassScript values can be used as lists. Maps count as lists of pairs, and all other values count as single-value lists.

    This is a shorthand for this.asList.get(index), although it may be more efficient in some cases.

    ⚠️ Heads up!

    This method uses the same indexing conventions as the immutable package: unlike Sass the index of the first element is 0, but like Sass negative numbers index from the end of the list.

    Parameters

    • index: number

    Returns undefined | Value

hashCode

interpolate

  • Returns a color partway between this color and color2 according to method, as defined by the CSS Color 4 color interpolation procedure.

    If method is missing and this color is in a rectangular color space (Lab, Oklab, RGB, and XYZ spaces), method defaults to the color space of this color. Otherwise, method defaults to a space separated list containing the color space of this color and the string "shorter".

    The weight is a number between 0 and 1 that indicates how much of this color should be in the resulting color. If omitted, it defaults to 0.5.

    Parameters

    Returns SassColor

isChannelMissing

isChannelPowerless

  • Returns a boolean indicating whether a given channel is powerless in this color. This is a special state that's defined for individual color spaces, which indicates that a channel's value won't affect how a color is displayed.

    Parameters

    Returns boolean

isChannelPowerless

isChannelPowerless

isChannelPowerless

isChannelPowerless

isChannelPowerless

isChannelPowerless

isInGamut

  • Returns a boolean indicating whether this color is in-gamut (as opposed to having one or more of its channels out of bounds) for the specified space, or its current color space if space is not specified.

    Parameters

    Returns boolean

sassIndexToListIndex

  • Converts sassIndex into a JavaScript-style index into the list returned by asList.

    Sass indexes are one-based, while JavaScript indexes are zero-based. Sass indexes may also be negative in order to index from the end of the list.

    Throws

    Error If sassIndex isn't a number, if that number isn't an integer, or if that integer isn't a valid index for asList.

    Parameters

    • sassIndex: Value

      The Sass-style index into this as a list.

    • Optional name: string

      The name of the function argument sassIndex came from (without the $) if it came from an argument. Used for error reporting.

    Returns number

toGamut

toSpace

tryMap