JavaScript 中的随机颜色生成器

颜色是网站外观和感觉不可或缺的一部分。无论是在线还是离线，颜色都能让网站看起来美丽而吸引人。在 JavaScript 和 HTML 元素中，颜色应用于背景、文本和其他元素。颜色非常重要，因为有许多网站仅基于调色板和渐变进行设计。现在，在本文中，让我们看看如何使用 JavaScript 的不同方法生成随机颜色。

颜色表示

在 CSS 中，颜色可以用其直接数字表示，格式化为 RGB（红、绿、蓝）颜色。有时也用十六进制值和 HSL 特定符号表示。因此，颜色表示的类型有：

1. RGB 值
2. HSL 符号
3. 十六进制值

Math.random() 方法

为了生成随机数，我们在 JavaScript 中使用 Math.random() 方法函数。该函数主要负责随机生成伪浮点数。这些伪浮点数小于 1 且大于 0。我们可以通过两种情况生成数字，例如从 0 到 100 或从 100 到 255。

生成随机颜色

现在，让我们使用 JavaScript 和 CSS 中提供的不同技术生成随机数，然后将其表示为颜色格式。让我们看看我们可以实现随机颜色生成的三个主要场景。任何数字增加 0 都将得到 0，乘以 1 将得到相同的数字。因此，将我们最理想的极限值——例如 255——乘以 0 到 1 之间的任何值都将得到 0 到 255 之间的数字。尽管如此，由于 Math.random() 永远不会精确地得到 1，因此我们需要使用另一个技巧来获得 255。这可以通过在最大极限值加 1 来实现。

1. 十六进制值

要使用十六进制值生成随机颜色，我们可以利用 Math.random() 和 Math.floor() 来获取 0 到 255 之间的整数值。然后为红色、绿色、蓝色和其他组件的颜色生成随机值。然后，我们可以将这些整数值转换为两位十六进制字符串类型，使其成为两位数。然后，通过连接的过程，将两个字符串类型的十六进制连接起来形成颜色代码，并将其作为随机颜色返回。

示例

代码

输出

2. RGB 颜色

在 RGB 值中，RGB 表示红色、绿色和蓝色的值。并且，该值范围为 0 到 255。RGB 生成与生成绿色、红色和蓝色组件的十六进制方法相同。这里使用的方法是模板字面量，它们被构建并作为 RGB 颜色字符串返回。

示例

代码

输出

3. HSL 颜色

HSL 的符号包含三个数字。这三个数字决定了三种不同的颜色。第一个值决定颜色的色相，由角度值决定。第二个值是颜色的饱和度百分比，第三个值是颜色的亮度百分比。这里百分比的值范围是 0 到 100，角度值范围是 0 到 360。在下面的逻辑中，使用模板字面量构建字符串并返回 HSL 颜色字符串。

示例

代码

输出

现在，让我们使用 HTML 和 CSS 在 JavaScript 中实现随机颜色生成器的最终实现。在下面提到的逻辑中，使用 Math.floor() 函数和上述技术之一来生成随机颜色。即使用十六进制颜色生成。

逻辑

通过使用上述逻辑以及 HTML 标签，我们将在下面的程序中实现完整的代码。还添加了 CSS 样式，以提高随机颜色生成器整体外观和感觉的视觉吸引力。

完整代码实现

代码

输出

结论

这就是我们使用十六进制值、RGB 颜色方案和 HSL 颜色符号等不同策略在 JavaScript 中生成随机颜色的方法。所有方法都易于实现，并提供了 CSS 的实践机会，以及对网站视觉外观重要性的理解。随机颜色生成器最重要的收获是了解 **Math.random() 函数** 的工作原理，以及如何将不同的浮点值转换为字符串类型的字面量，从而生成颜色，这是该练习的关键部分。