Random Color Generator for CSS and Test Data
Need a random color for a CSS variable, test fixture, or placeholder UI element? Generate one instantly and copy it as HEX, RGB, or HSL. Press Space to cycle through colors, and use the built-in WCAG contrast check before you put text on anything.
Space bar for a new color
Best for: Filling seed data and test fixtures with plausible colour values, and generating HEX values to test how a component handles different contrasts
Limitations: Values are random rather than brand-aware, so anything user-facing still needs a deliberate colour decision behind it
Best suited for: Developers who need a colour value now, for a CSS variable, a fixture file, or a placeholder UI state
How to Use
Frequently Asked Questions
What is a HEX color code?
A HEX color code is a 6-character hexadecimal string representing RGB components. #FF5733 breaks down as FF=255 (red), 57=87 (green), 33=51 (blue). HEX codes are the standard format for web colors in CSS and most design tools.
How do I convert HEX to RGB?
Split the 6-character HEX code into three 2-character pairs and convert each from base 16 to base 10. This generator shows HEX, RGB, and HSL simultaneously, so no manual conversion is needed.
What are complementary colors?
Complementary colors are directly opposite each other on the color wheel. They create maximum contrast and visual energy. In HSL terms, complementary colors differ by 180 degrees in hue while keeping the same saturation and lightness.
What is a good color contrast ratio?
WCAG AA requires at least 4.5:1 for body text and 3:1 for large text (18pt+). WCAG AAA (enhanced) requires 7:1. Black on white gives 21:1, the maximum possible. Use this checker to verify your color choices meet accessibility standards before shipping.
How do I generate a set of distinct colors for charts or UI states?
Use the palette modes below. Triadic gives 3 evenly-spaced colors, which works well for chart categories that need to stay visually separable. Analogous gives 5 adjacent colors, useful for gradient scales or severity states. Complementary gives two high-contrast colors for paired states such as success and error. Pastel and Dark produce lighter or deeper variants of the same hue.
How do I use this for test data or seeding a database?
Generate a color, copy the HEX value, and paste it into your fixture file, seed script, or factory definition. Press Space to cycle quickly when you need several distinct values in a row. Because the colors are generated in your browser with no account or rate limit, it is practical for filling avatar backgrounds, category tags, or any column that needs a plausible color value.
How do I generate a random color in CSS or JavaScript?
CSS has no built-in random function, so a random color must either be generated in JavaScript and written to a custom property, or picked ahead of time and hardcoded. In JavaScript, a common one-liner is '#' + Math.floor(Math.random()*16777215).toString(16).padStart(6,'0'). Use this generator when you want a fixed value to commit rather than one that changes on every page load.
About This Generator
Colors can be represented as HEX (#3A7BD5), RGB (58, 123, 213), or HSL (Hue, Saturation, Lightness). HEX is most common for web use. HSL is more intuitive for designers because it separates color (hue) from brightness (lightness). This generator provides all three formats simultaneously.
Common Uses
Developers use random color generators to fill seed data and test fixtures, to assign placeholder colors to avatars or category tags, and to populate UI mockups before the real design lands. They are also useful for data visualization, where chart categories need several distinct colors that stay separable. Beyond code, they serve as a starting point for color exploration when you are working without a defined palette.
A Caution on Legibility
A randomly generated colour carries no guarantee of contrast, so check any pair you intend to put text on before using it.