Online Color Generator

You can get a random color online. We use Javascript code to show you quick results. When you click on the “Generate Color” button, you will get any of the 16 million available colors. For your convenience, we show this color on the screen and duplicate its HEX and RGB values. This will help you to use this color in other online generators or in your CSS or HTML.

How to use generated color in HTML

In HTML, you can use generated colors in several ways, primarily through CSS (Cascading Style Sheets) or inline styles. Here are a few methods:

Using Inline Styles: You can specify colors directly within HTML elements using the style attribute:

<p style="color: #ff0000;">This is a random text.</p>

Using Internal CSS: You can define CSS rules within a <style> tag in the <head> section of your HTML document.

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: #00ff00;
        }
    </style>
</head>
<body>
    <p>This is a random text.</p>
</body>
</html>

Using External CSS: You can also define CSS rules in an external CSS file and link it to your HTML document using the <link> tag in the <head> section.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p>This is a text with color from an external CSS file.</p>
</body>
</html>

And in your styles.css file:

p {
    color: #0000ff;
}

How to embed a random number generator on the site

You can use the Iframe tag to embed our already prepared page:

<iframe src="https://allcolorscreen.com/random-color-generator#generator" width="600" height="460" frameborder="0" scrolling="no"></iframe>

This option is suitable for those who do not want to worry about their design and the functionality of our generator fully satisfies you.

If you want to embed a random color generator in your application, here are examples (functions) that will help you to implement it in different programming languages.

JavaScript random color generator:

function generateRandomColor() {
    const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
    return randomColor;
}

PHP random color generator:

function generateRandomColor() {
    $randomColor = '#' . dechex(mt_rand(0, 16777215));
    return $randomColor;
}

Python random color generator:

import random

def generate_random_color():
    random_color = '#' + format(random.randint(0, 16777215), 'x')
    return random_color

Swift color generator:

func generateRandomColor() -> String {
    let randomColor = String(format: "#%06X", arc4random_uniform(16777215))
    return randomColor
}

To implement a random color generator in any programming language, you can follow these steps:

Define Color Format: Determine the format in which you want to represent colors (e.g., RGB, hexadecimal).
Generate Random Numbers: Use a random number generator to generate random values for each component of the color format. For example:
- For RGB format: Generate random values for red, green, and blue components within the valid range (0-255).
- For hexadecimal format: Generate a random number within the valid range (0-16777215 for a 24-bit color), representing the combined RGB values.
Convert to Color Format: Convert the generated random values into the desired color format. For example:
- For RGB format: Concatenate the red, green, and blue values to form the color.
- For hexadecimal format: Convert the combined RGB value into a hexadecimal string and prepend ‘#’ to represent a valid hexadecimal color.
Return Color: Return the generated color in the chosen format.
Optional Enhancement: Optionally, you can add constraints or customize the generation process based on specific requirements, such as limiting the color range, adjusting brightness or saturation, or ensuring a minimum contrast ratio for accessibility.

Random Color Generator