HueFree - Library for Color Vision Simulations

Global

Members

constant

visionsObject.<string, ColorVision>

This object defines several types of color vision simulations.

Definitions for different color vision types.

Each vision type is represented as a frozen object containing:

  • Description: Explanation of the vision type and its effects.
  • TransMatrix: Transformation matrix for color space conversion.
  • UseMap: Indicates if a color mapping function is applied.
  • MapColor: Function to transform colors based on the vision type.

Type

Source

Methods

applyFilter(target, visionType, objopt) → {HTMLImageElement}

Applies an SVG filter to an image element to simulate color vision deficiency. (Currently not available to public)

Parameters

  • target HTMLImageElement

    The image element to apply the filter to.

  • visionType string

    The type of color vision simulation to apply.

  • obj Object <optional>
     visions

    Optional parameter specifying the object containing color vision definitions.

Returns

  • HTMLImageElement
    • The image element with the SVG filter applied.

Source

changeVision(target, visionType, objopt) → {string|Element|undefined}

Applies color vision simulation transformation to a target element or CSS color string.

Parameters

  • target string | Element

    The CSS color string or DOM element to apply the color vision simulation.

  • visionType string

    The type of color vision simulation to apply.

  • obj Object <optional>
     visions

    Optional parameter specifying the object containing color vision definitions.

Returns

  • string Element undefined
    • The transformed CSS color string, DOM element with applied styles, or undefined if the target cannot be processed.

Source

changeVisionRecursive(target, visionType, objopt) → {Element|string|undefined}

Recursively applies color vision simulation transformation to all child elements and CSS color strings of a target element.

Parameters

  • target string | Element

    The CSS color string or DOM element to apply the color vision simulation recursively.

  • visionType string

    The type of color vision simulation to apply.

  • obj Object <optional>
     visions

    Optional parameter specifying the object containing color vision definitions.

Returns

  • Element string undefined
    • The transformed DOM element with applied styles, the transformed CSS color string, or undefined if the target cannot be processed.

Source

colorTransform(transMat, rgbMat) → {Array.<number>}

Applies a color transformation matrix to an RGB color array.

Parameters

  • transMat Array.<Array.<number>>

    The transformation matrix, a 3x3 array of numbers.

  • rgbMat Array.<number>

    An array containing the RGB components [red, green, blue, alpha].

Returns

  • Array.<number>

    An array containing the transformed RGB components.

Source

deLinearize(color) → {Array.<number>|undefined}

De-linearizes an RGB color array from linear to gamma-corrected sRGB values.

Parameters

  • color string | Array.<number>

    The CSS color string or an array containing the linearized RGB components [red, green, blue, alpha].

Returns

  • Array.<number> undefined
    • An array containing the de-linearized sRGB components [red, green, blue, alpha], or undefined if the input is invalid.

Source

getCustomVisions(…arguments) → {Object}

Creates a custom visions object with specified vision types. The user can then operate elements on this custom object containing user-defined transformations.

Parameters

  • arguments string <repeatable>

    Vision types to include in the custom visions object.

Returns

  • Object
    • Custom visions object containing specified vision types with default settings.

Source

getVisionDetail(vision, objopt) → {Object|undefined}

Retrieves detailed information about a specific color vision simulation.

Parameters

  • vision string

    The name of the color vision simulation.

  • obj Object <optional>
     visions

    Optional parameter specifying the object containing color vision definitions.

Returns

  • Object undefined
    • An object containing detailed information about the specified color vision simulation, or undefined if the vision name is not found.

Source

getVisions(objopt) → {Array.<string>}

Retrieves the names of color vision simulations supported by the library or the custom vision object provided by the user.

Parameters

  • obj Object <optional>
     visions

    Optional parameter specifying the object containing color vision definitions.

Returns

  • Array.<string>
    • An array containing the names of the color vision simulations.

Source

linearize(color) → {Array.<number>|undefined}

Linearizes an sRGB color array by applying a gamma correction formula.

Parameters

  • color string | Array.<number>

    The CSS color string or an array containing the RGB components [red, green, blue, alpha].

Returns

  • Array.<number> undefined
    • An array containing the linearized RGB components [red, green, blue, alpha], or undefined if the input is invalid.

Source

processPixels(target, visionType, objopt) → {HTMLImageElement|null}

Processes each pixel of an image element to simulate color vision deficiency. (Currently not available to public)

Parameters

  • target HTMLImageElement

    The image element to process.

  • visionType string

    The type of color vision simulation to apply.

  • obj Object <optional>
     visions

    Optional parameter specifying the object containing color vision definitions.

Returns

  • HTMLImageElement null
    • The processed image element with simulated color vision deficiency applied, or null if an error occurs.

Source

rgbToString(color) → {string}

Converts an array of RGB or RGBA values to a CSS color string. If invalid format is provided then the array is returned without any modifications.

Parameters

  • color Array.<number>

    An array containing the RGB components [red, green, blue] or [red, green, blue, alpha].

Returns

  • string
    • The CSS color string in the format 'rgb(r, g, b)' or 'rgba(r, g, b, a)'.

Source

stringToRgb(color) → {Array.<number>|undefined}

Converts a CSS color string to an array of RGB values. Supports rgb(x,x,x) and rgba(x,x,x,x) formats. If rgb(x,x,x,x) is provided then input is percieved as rgba type. Similarly if rgba(x,x,x) is provided then input is percieved as rgb type.

Parameters

  • color string

    The CSS color string to convert, e.g., 'rgb(255, 23, 45)'.

Returns

  • Array.<number> undefined
    • An array containing the RGB components [red, green, blue], or undefined if the input string is invalid, e.g., [255, 23, 45].

Source

Type Definitions

ColorVision

Object containing definition for various color vision properties and its transformation.

Each color vision is represented by an object containing a description, transformation matrix for color conversion, and additional properties.

Type

  • Object

Properties

  • description string

    Description of the color vision type.

  • transMatrix Array.<Array.<number>>

    Transformation matrix for color conversion (Used to convert original sRGB to vision based sRGB).

  • useMap boolean

    Indicates if a color mapping function is used.

  • mapColor function

    Function to map colors based on the vision type. User can provide custom functions for color conversions.

Source