KC's Workspace
    Preparing search index...

    Class SassColor

    Sass's color type.

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

    Hierarchy (View Summary)

    Index
    constructor
    alpha asList blackness blue channels channelsOrNull green hasBrackets hue isLegacy isTruthy lightness realNull red saturation separator space whiteness
    assertBoolean assertCalculation assertColor assertFunction assertMap assertMixin assertNumber assertString change channel equals get hashCode interpolate isChannelMissing isChannelPowerless isInGamut sassIndexToListIndex toGamut toSpace tryMap

    • 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.

      Parameters

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

      Returns SassColor

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

    • 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.

      Parameters

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

      Returns SassColor

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

    • 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.

      Parameters

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

      Returns SassColor

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

    • Creates a Lab or Oklab color.

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

      Parameters

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

      Returns SassColor

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

    • Creates an LCH or Oklch color.

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

      Parameters

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

      Returns SassColor

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

    • Creates a color in a predefined RGB color space.

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

      Parameters

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

      Returns SassColor

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

    • Creates a color in a predefined XYZ color space.

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

      Parameters

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

      Returns SassColor

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

    • get alpha(): number

      This color's alpha channel, between 0 and 1.

      Returns number

    • get asList(): List<Value>

      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 List<Value>

      An immutable List from the immutable package.

    • get blackness(): number

      This color's blackness in the HWB color space.

      Returns number

      Use channel instead.

    • get blue(): number

      This color's blue channel in the RGB color space.

      Returns number

      Use channel instead.

    • get channels(): List<number>

      A list of this color's channel values (excluding alpha), with missing channels converted to 0.

      Returns List<number>

    • get channelsOrNull(): List<number | null>

      A list of this color's channel values (excluding alpha), with missing channels converted to null.

      Returns List<number | null>

    • get green(): number

      This color's green channel in the RGB color space.

      Returns number

      Use channel instead.

    • 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

    • get hue(): number

      This color's hue in the HSL color space.

      Returns number

      Use channel instead.

    • get isLegacy(): boolean

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

      Returns boolean

    • get isTruthy(): boolean

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

      Returns boolean

    • get lightness(): number

      This color's lightness in the HSL color space.

      Returns number

      Use channel instead.

    • get realNull(): Value | null

      Returns JavaScript's null value if this is sassNull, and returns this otherwise.

      Returns Value | null

    • get red(): number

      This color's red channel in the RGB color space.

      Returns number

      Use channel instead.

    • get saturation(): number

      This color's saturation in the HSL color space.

      Returns number

      Use channel instead.

    • 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

    • get whiteness(): number

      This color's whiteness in the HWB color space.

      Returns number

      Use channel instead.

    • Throws if this isn't a SassBoolean.

      Heads up! Functions should generally use isTruthy rather than requiring a literal boolean.

      Parameters

      • Optionalname: string

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

      Returns SassBoolean

    • Throws if this isn't a SassColor.

      Parameters

      • Optionalname: string

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

      Returns SassColor

    • Throws if this isn't a SassFunction.

      Parameters

      • Optionalname: string

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

      Returns SassFunction

    • Throws if this isn't a SassMap.

      Parameters

      • Optionalname: string

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

      Returns SassMap

    • Throws if this isn't a SassMixin.

      Parameters

      • Optionalname: string

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

      Returns SassMixin

    • Throws if this isn't a SassNumber.

      Parameters

      • Optionalname: string

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

      Returns SassNumber

    • Throws if this isn't a SassString.

      Parameters

      • Optionalname: string

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

      Returns SassString

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

      Parameters

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

      Returns SassColor

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

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

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

      Parameters

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

      Returns SassColor

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

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

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

      Parameters

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

      Returns SassColor

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

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

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

      Parameters

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

      Returns SassColor

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

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

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

      Parameters

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

      Returns SassColor

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

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

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

      Parameters

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

      Returns SassColor

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

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

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

      Parameters

      Returns number

      Error if channel is not alpha or a channel in this color's space.

    • 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.

      Parameters

      Returns number

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

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

      Parameters

      Returns number

      Error if channel is not alpha or a channel in this color's space.

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

      Parameters

      Returns number

      Error if channel is not alpha or a channel in this color's space.

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

      Parameters

      Returns number

      Error if channel is not alpha or a channel in this color's space.

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

      Parameters

      Returns number

      Error if channel is not alpha or a channel in this color's space.

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

      Parameters

      Returns number

      Error if channel is not alpha or a channel in this color's space.

    • Returns whether this represents the same value as other.

      Parameters

      Returns boolean

    • 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 Value | undefined

    • Returns a hash code that can be used to store this in a hash map.

      Returns number

    • 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

    • Returns a boolean indicating whether a given channel value is a missing channel.

      Parameters

      Returns boolean

    • 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

    • 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

    • 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

    • 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

    • 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

    • 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

    • 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

    • 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

    • 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.

      Parameters

      • sassIndex: Value

        The Sass-style index into this as a list.

      • Optionalname: string

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

      Returns number

      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.

    • Returns a copy of this color, modified so it is in-gamut for the specified space—or the current color space if space is not specified—using method to map out-of-gamut colors into the desired gamut.

      Parameters

      Returns SassColor

    • Returns this as a map if it counts as one (empty lists count as empty maps) or null if it doesn't.

      Returns SassMap | null

    Settings
    Member Visibility

    On This Page
    Constructors
    Accessors
    Methods