Spice Up Your Website with These Color-Related Functions

The Back Story

Colors are a crucial aspect of web design, and they play a significant role in attracting visitors and conveying emotions. In this article, we will introduce you to a set of color-related functions that can help you add more personality to your website.

The javascript Story!

Are you looking to add some more color to your website? Do you want to create a more visually appealing site that captures your audience's attention? Look no further than these five color-related functions. Btw, i use this function for labeling data in my Metaphor Story - React Table

Converting Hex Color Codes to RGB Values

/**
 * Converts a hex color code to an object containing its RGB values.
 *
 * @param {string} hex - The hex color code to convert.
 * @returns {Object} An object containing the red, green, and blue values of the hex color code.
 */
function hexToRgb(hex) {
    const r = parseInt(hex.slice(1, 3), 16);
    const g = parseInt(hex.slice(3, 5), 16);
    const b = parseInt(hex.slice(5, 7), 16);
    return { r, g, b };
}

If you're not familiar with the concept, a hex color code is a six-digit code that represents a color in hexadecimal format. However, sometimes you may need to convert this code to RGB values to achieve a specific effect or use in some calculations. With our hexToRgb function, you can do just that. Simply input your hex color code, and the function will return an object with the red, green, and blue values of that color.

Converting RGB Color Values to Hex Color Codes

/**
 * Converts RGB color values to hex color code.
 *
 * @param {number} r - The red color value (0-255).
 * @param {number} g - The green color value (0-255).
 * @param {number} b - The blue color value (0-255).
 * @returns {string} The hex color code.
 */
function rgbToHex(r, g, b) {
    const hexR = r.toString(16).padStart(2, '0');
    const hexG = g.toString(16).padStart(2, '0');
    const hexB = b.toString(16).padStart(2, '0');
    return `#${hexR}${hexG}${hexB}`;
}

On the flip side, if you have an RGB color value, you may need to convert it to a hex color code. This is where our rgbToHex function comes in handy. Input the red, green, and blue values, and the function will return the hex color code for that color.

Generating Shades of a Color

/**
 * Generate color shades
 * @param {string} hex color string
 * @param {number} numShades the number of color shades
 * @param {null|number} onlyShade the number is accourding from numShades with index start from 0
 * @returns {array|string} colors array or string
 */
export function generateShades(hex, numShades, onlyShade = null) {
    // Convert the hex color to RGB
    const rgb = hexToRgb(hex);
    // Initialize the shades array
    const shades = [];
    // Determine the color step
    const step = Math.round(255 / (numShades - 1));
    // Generate the shades of the color
    for (let i = 0; i < numShades; i++) {
        const r = Math.max(Math.min(rgb.r + i * step, 255), 0);
        const g = Math.max(Math.min(rgb.g + i * step, 255), 0);
        const b = Math.max(Math.min(rgb.b + i * step, 255), 0);
        // Convert the RGB color back to hex
        const shade = rgbToHex(r, g, b);
        shades.push(shade);
    }
    return onlyShade !== null ? shades[onlyShade] : shades;
}

Looking to add more depth to your website by creating a gradient effect? Our generateShades function can help you create multiple shades of a color, giving your site a more dynamic appearance. Simply input the hex code of the color you want to use, and the number of shades you want to create. You can even generate only one specific shade by inputting the index of the shade you want.

Generating Hex Color Codes from Strings

/**
 * Generates a hex color code from a string using a simple hash function.
 * @param {string} anyString - The input string to generate the hex color code from.
 * @returns {string} The generated hex color code.
 */
export function generateHexColor(anyString) {
    // Use a simple hash function to generate a number from the anyString
    let hash = 0;
    for (let i = 0; i < anyString.length; i++) {
        hash = anyString.charCodeAt(i) + ((hash << 5) - hash);
    }

    // Generate a 24-bit color from the hash
    let color = (hash & 0x00FFFFFF).toString(16).toUpperCase();

    // Pad the color code with zeros if necessary
    while (color.length < 6) {
        color = "0" + color;
    }

    // Prepend a hash symbol to the color code
    return "#" + color;
}

Sometimes you may want to generate a color based on a specific string, such as a user's name or username. With our generateHexColor function, you can do just that. Simply input any string, and the function will use a simple hash function to generate a 24-bit color from that string. The result is a unique hex color code that you can use to add more personality to your website.

Calculating the Opposite Color of a Hexadecimal Color

/**
 * Calculates the opposite color of the given hexadecimal color.
 *
 * @param {string} hexColor - The hexadecimal color to calculate the opposite of.
 * @returns {string} The opposite color in hexadecimal format.
 */
export function getOppositeColor(hexColor) {
    // Remove the "#" character if present
    hexColor = hexColor.replace("#", "");

    // Convert the hex color to RGB
    const red = parseInt(hexColor.substr(0, 2), 16);
    const green = parseInt(hexColor.substr(2, 2), 16);
    const blue = parseInt(hexColor.substr(4, 2), 16);

    // Calculate the opposite color
    const oppositeRed = 255 - red;
    const oppositeGreen = 255 - green;
    const oppositeBlue = 255 - blue;

    // Convert the opposite color to hex
    const oppositeHex = "#" +
        oppositeRed.toString(16).padStart(2, "0") +
        oppositeGreen.toString(16).padStart(2, "0") +
        oppositeBlue.toString(16).padStart(2, "0");

    return oppositeHex;
}

Finally, if you're looking to create more contrast on your website, our getOppositeColor function can help you achieve just that. Input a hex color code, and the function will return the opposite color in hexadecimal format. This can help you create a more visually appealing site that stands out to your visitors.

Conclusion

Adding more color to your website doesn't have to be difficult or time-consuming. With these five functions, you can easily create unique colors and gradients that give your site more personality and appeal.

That's it! Thank for reading my Metaphor Story...