Color Picker & Palette Generator
Free color picker with HEX/RGB/HSL/CMYK conversion, auto-generated complementary/analogous/triadic palettes, Tailwind CSS color suggestions, and WCAG contrast checker.
text-blue-500HSL
CSS
color: #3b82f6; background-color: #3b82f6; border-color: #3b82f6;
--color-primary: #3b82f6;
bg-[#3b82f6] text-[#3b82f6] border-[#3b82f6]
Generate Palette
Contrast Ratio (WCAG AA)
Frequently Asked Questions
Q. What is the difference between HEX, RGB, HSL, and CMYK?
HEX (#RRGGBB) is used in web development. RGB mixes red, green, and blue light. HSL uses hue, saturation, and lightness for intuitive color control. CMYK represents cyan, magenta, yellow, and black ink ratios used in printing.
Q. What is a complementary color?
Complementary colors sit opposite each other on the color wheel (e.g., red ↔ cyan, blue ↔ orange). They create strong contrast and are often used for attention-grabbing CTAs and buttons.
Q. What is the WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) recommends a minimum contrast ratio of 4.5:1 for normal text (AA standard) and 3:1 for large text to ensure readability for users with visual impairments.
Q. How does the Tailwind CSS suggestion work?
It finds the nearest Tailwind CSS default palette color (e.g., blue-500, rose-300) to your input color. You can copy the class name directly into your project.
Q. Where are recent colors stored?
Up to 8 recent colors are saved in your browser's localStorage. They won't persist in incognito mode and are cleared when you clear browser data.
Q. Can I save the palette as an image?
Currently, clicking a color chip copies its HEX value to the clipboard. Image export is planned for a future update.
How to Use
Drag the HSL sliders or type a HEX code directly into the input field.
Click the copy button next to HEX, RGB, HSL, or CMYK to instantly copy the code to your clipboard.
Select complementary, analogous, or triadic to auto-generate a 5-color palette based on your chosen color.
See the nearest Tailwind CSS class name and check whether the color passes WCAG contrast ratio requirements.
Expert Knowledge: Color Picker & Palette Generator
Color palette selection directly impacts user experience and brand recognition. Complementary palettes create high visual tension, ideal for CTAs and alerts; analogous palettes produce harmonious, cohesive designs. The WCAG 2.1 AA minimum contrast ratio of 4.5:1 is an international standard ensuring accessibility for ~300 million people with color vision deficiencies or low vision. Tailwind CSS provides 450+ predefined colors for maintaining consistent design systems.
Related Tools
Convert JPG/PNG images to WebP in your browser in 1 second. 100% client-side processing — no file upload. Reduces file size by ~26% to improve LCP scores.
Convert Korean post titles into SEO-friendly English URL slugs instantly. Works with WordPress, Naver Blog, Tistory, and all major platforms. Auto-removes special characters.
Analyze keyword density to the nearest 0.1%. Detect over-optimization before it triggers Google penalties. Ideal for SEO-focused content.