Color Generator: Random Colors, Hex Codes and Palettes
Draw a random color or paste a hex code to get its RGB and HSL values, see whether white or black text reads on it, and build a matching palette.
Press Random color to draw one of the 16,777,216 colors a 6-digit hex code can name, each equally likely. The page shows that color as hex, RGB and HSL, then scores white and black text on it as a background. The default #2A9D8F is rgb(42, 157, 143): white text on it scores 3.32:1, enough only for large text, while black text scores 6.31:1 and clears the 4.5:1 level for body text.
Colors are computed in the sRGB space that web browsers use. How a color looks also depends on the screen, its brightness and the viewer's eyesight, and the contrast levels are a floor for readability, not a full accessibility review, so test real pages with real users before relying on a palette.
Your color
#2A9D8F
- RGB
- rgb(42, 157, 143)
- HSL
- hsl(173, 58%, 39%)
- White text
- 3.32:1, large text only (AA)
- Black text
- 6.31:1, passes AA
- Better text color
- Black
Palette from this color
- #2A9D8Frgb(42, 157, 143)
- #8F2A9Drgb(143, 42, 157)
- #9D8F2Argb(157, 143, 42)
Click a swatch to make it the main color. Palettes turn the hue around the HSL color wheel and keep the saturation and lightness.
Embed this calculator on your site →
About the Color Generator
A hex code is three pairs of base-16 digits, one pair each for red, green and blue, so #2A9D8F means red 42, green 157 and blue 143 on a 0 to 255 scale. The 3-digit short form doubles each digit, which makes #3A9 the same color as #33AA99. HSL describes the same color as a hue angle on a 360-degree wheel plus saturation and lightness percentages, which is easier to reason about when you want a lighter or duller version. The random button draws from your browser's cryptographic generator so no part of the color space is favored. Below each color you get its contrast ratio against white and against black text, computed with the WCAG relative luminance formula, and the palette panel turns the hue around the wheel: 180 degrees for a complementary pair, 120 and 240 for a triadic set, 30 either side for analogous, and 150 and 210 for split complementary. Click any swatch to make it the main color and keep exploring.
Frequently asked questions
How is the contrast ratio worked out?+
Each channel is converted from its 0 to 255 value to linear light, the three are weighted into a relative luminance between 0 and 1, and the ratio is the lighter luminance plus 0.05 divided by the darker plus 0.05. Black on white gives the maximum, 21:1, and any color against itself gives 1:1.
What ratio does body text need?+
The WCAG AA level asks for at least 4.5:1 for normal text and 3:1 for large text, and the stricter AAA level asks for 7:1 and 4.5:1. Mid gray shows how sharp the line is: #767676 on white is 4.54:1 and passes, while #777777, one step lighter, is 4.47:1 and does not.
Why can HSL to hex come back one step off?+
The HSL values on the page are rounded to whole degrees and percents for reading. Typing those rounded numbers back in can land one unit away on a channel, because an RGB channel has 256 steps and a lightness percent has only 100. The hex and RGB values are exact.
Do palette colors keep the same contrast?+
No. A palette keeps saturation and lightness, but relative luminance weights green far more than blue, so a triadic partner can be much lighter or darker to the eye. Check each swatch on its own before you put text on it.
Embed this calculator
Free to use on your own site. Paste this snippet where you want the color generator to appear — it resizes itself automatically.
<iframe
src="https://manytools.co/embed/color-generator"
title="Color Generator by ManyTools"
data-manytools="color-generator"
width="100%"
height="640"
loading="lazy"
style="border:0;width:100%;max-width:720px"></iframe>
<script>
(function () {
window.addEventListener("message", function (e) {
if (e.origin !== "https://manytools.co") return;
var d = e.data || {};
if (d.type !== "manytools:embed:height" || d.slug !== "color-generator") return;
var f = document.querySelector('iframe[data-manytools="color-generator"]');
if (f && d.height) f.style.height = d.height + "px";
});
})();
</script><a href="https://manytools.co/dev/color-generator">Color Generator by ManyTools</a>