Color Picker & Palette Generator - HEX, RGB, HSL & WCAG
Pick colors, convert between HEX, RGB, and HSL, generate harmonious palettes, and verify WCAG contrast accessibility.
How to use Color Picker & Palette in 3 simple steps
Choose Base Color
Pick a color with the visual palette picker or enter a HEX, RGB, or HSL value.
Explore Palettes
View automatically generated complementary, analogous, triadic, and monochromatic color schemes.
Check Contrast & Copy
Verify WCAG AA and AAA accessibility contrast against black and white text, then copy any code.
Something not working?
Found a bug in Color Picker & Palette or have an idea that would make it better? Email me directly and I'll take a look.
Email me directly coderbt66@gmail.comNo account and no uploads — your message is sent through your own email app.
Harmonious Color Schemes and WCAG Contrast Verification
Selecting the right color palette is fundamental to UI design, branding, and web accessibility. Designers and front-end developers frequently need to switch between HEX hex-codes, CSS rgb() notation, and flexible HSL values.
Toolnova Color Picker & Palette Generator generates color harmonies based on color wheel mathematics, including complementary, analogous, triadic, and monochromatic variations. Each swatch displays both light and dark variations.
Crucially, the tool includes a built-in WCAG 2.1 contrast ratio checker. It informs you whether your chosen color provides sufficient contrast for normal text (minimum 4.5:1 for AA) and large text (3:1), helping you build accessible digital experiences.
Key features & capabilities
Frequently asked questions about Color Picker & Palette
Common questions about usage, privacy, limits, and browser compatibility.
How do I test whether gray text passes accessibility contrast?
Enter the text color, then compare its ratio against black and white backgrounds in the contrast panel. Normal text needs 4.5:1 for AA and 7:1 for AAA, while large text needs 3:1. Adjust lightness until the badge shows a pass for your text size.
Which color format should I use in CSS?
HEX is compact and common in design handoffs, RGB maps directly to screen channels, and HSL makes lightness and saturation easier to tweak by hand. Modern CSS accepts all three, often with alpha added for transparency. Choose the format your team already uses so design tokens stay consistent.
What are complementary, analogous, and triadic color schemes?
Complementary pairs sit opposite each other on the color wheel for strong contrast, while analogous colors sit next to each other for a calmer look. Triadic schemes use three colors spaced evenly around the wheel. The generator builds each set from your base color, along with light and dark variations.
Does the palette generator create accessible color combinations?
It generates harmonies from color wheel math, which does not guarantee readable contrast on its own. Run each pair through the built-in WCAG checker before using it for text and backgrounds. Treat the palettes as starting points and adjust lightness where the ratio falls short.
Is my brand palette kept private?
Everything runs in your browser, so the colors and values you enter stay on your device. That matters when you are working with unreleased brand palettes or client design systems. Nothing is uploaded, saved to an account, or shared with anyone.
Can I generate lighter and darker shades of one color?
Each swatch includes light and dark variations, and the monochromatic scheme builds a full set from a single hue. That gives you hover states, borders, and background tints without leaving the page. Copy any value directly into your stylesheet.