RandomlyRandom Color Generator
WCAG contrast ratings, CSS variable copy, CMYK output — built for UI designers.
—
Recent
Advertisement
About this tool
Generates random colors with hex, RGB, HSL, and CMYK values. Built with designers in mind: shows WCAG accessibility rating (AA/AAA/Fail) for white and black text overlaid on the color, so you know immediately if it meets contrast requirements. Copy in CSS variable format (--color-primary: #XXXXXX) for direct use in stylesheets. Filter by hue (red, blue, green, etc.), tone (pastel, warm, cool, neon), or set lightness range to get colors in a specific brightness band.
Common uses
- Finding accessible brand colors that meet WCAG AA contrast
- Generating palette inspiration for UI/UX design
- Getting random CSS color values for prototyping
- Generating print-ready CMYK values
- Finding pastel or warm colors for specific design aesthetics
Advertisement
FAQ
- Can I generate only pastel colors?
- Yes — set Tone to Pastel. Pastel colors have high lightness and low saturation.
- How do I get only warm colors?
- Set Tone to Warm for reds, oranges, and yellows, or set Color to a specific hue like Red or Orange.
- Can I copy the color as a CSS variable?
- Open Advanced options and check Copy as CSS variable. The copied value will be
--color-primary: #XXXXXX;. - What is the contrast rating?
- Shows WCAG accessibility rating (AA/AAA/Fail) for white and black text on the generated color — useful for UI design.
- Can I see CMYK values?
- Yes — open Advanced options and check Show CMYK.
Put your colors to work
Found a color you like? Canva Pro lets you set brand colors and use them across designs, presentations, and social graphics — no design experience needed.