Colors 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

    Generates a random hexadecimal color code.

    JavaScript, Math · Jan 7, 2021

  • RGB to hex

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

    JavaScript, String · Nov 3, 2020

  • Extend hex value

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

    JavaScript, String · Sep 15, 2020

  • Hex to RGB

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

    JavaScript, String · Oct 19, 2020

  • RGB to array

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

    JavaScript, String · Jun 13, 2021

  • RGB to object

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

    JavaScript, String · Oct 22, 2020

  • RGB to HSB

    Converts a RGB color tuple to HSB format.

    JavaScript, Math · Oct 22, 2020

  • HSB to RGB

    Converts a HSB color tuple to RGB format.

    JavaScript, Math · Sep 18, 2020

  • RGB to HSL

    Converts a RGB color tuple to HSL format.

    JavaScript, Math · Oct 4, 2020

  • HSL to RGB

    Converts a HSL color tuple to RGB format.

    JavaScript, Math · Oct 4, 2020

  • Change color lightness

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

    JavaScript, String · Oct 31, 2020

  • HSL to array

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

    JavaScript, String · Oct 22, 2020

  • HSL to object

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

    JavaScript, String · Oct 22, 2020