Working with color in JavaScript

Working with color in JavaScript requires some understanding of color formats and conversions. This snippet collection covers a lot of those needs from generating random color hex codes to converting between hex and RGB values and even some more advanced tricks like using the HSL format to alter the lightness of a color.

  • Random hex color code

    JavaScript, Math

    Generates a random hexadecimal color code.

  • RGB to hex

    JavaScript, String

    Converts the values of RGB components to a hexadecimal color code.

  • Extend hex value

    JavaScript, String

    Extends a 3-digit color code to a 6-digit color code.

  • Hex to RGB

    JavaScript, String

    Converts a color code to an rgb() or rgba() string if alpha value is provided.

  • RGB to array

    JavaScript, String

    Converts an rgb() color string to an array of values.

  • RGB to object

    JavaScript, String

    Converts an rgb() color string to an object with the values of each color.

  • RGB to HSB

    JavaScript, Math

    Converts a RGB color tuple to HSB format.

  • HSB to RGB

    JavaScript, Math

    Converts a HSB color tuple to RGB format.

  • RGB to HSL

    JavaScript, Math

    Converts a RGB color tuple to HSL format.

  • HSL to RGB

    JavaScript, Math

    Converts a HSL color tuple to RGB format.

  • Change color lightness

    JavaScript, String

    Changes the lightness value of an hsl() color string.

  • HSL to array

    JavaScript, String

    Converts an hsl() color string to an array of values.

  • HSL to object

    JavaScript, String

    Converts an hsl() color string to an object with the values of each color.