What this tool does
Pick colors from an interactive color wheel, convert between formats, generate palettes, and check contrast ratios for accessibility. All processing happens locally in your browser.
Interactive wheel & sliders
HEX, RGB, HSL, HSV, CMYK
Complementary, triadic, etc.
WCAG AA/AAA compliance
Color Picker
Color Formats
CSS Variables
Color Palette
Tints & Shades
Tints (Lighter)
Quick Tips
About Color Picker & Converter
A comprehensive color tool for developers, designers, and marketers. Pick colors from an interactive color wheel, convert between all major color formats (HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK), generate harmonious color palettes (complementary, analogous, triadic, split-complementary, tetradic), check WCAG contrast ratios for accessibility compliance, create tints and shades, and export ready-to-use CSS code. All processing happens locally in your browser - your data never leaves your device.
Supported Color Formats
HEX
Standard web color format (#RRGGBB or #RGB). Perfect for CSS, HTML, and design tools.
RGB / RGBA
Red, Green, Blue values (0-255). RGBA adds alpha transparency (0-1) for web development.
HSL / HSLA
Hue (0-360°), Saturation (0-100%), Lightness (0-100%). Intuitive for adjusting colors.
HSV / HSB
Hue, Saturation, Value/Brightness. Common in design software like Photoshop and Figma.
CMYK
Cyan, Magenta, Yellow, Key (Black). Essential for print design and physical media.
Named Colors
147 standard CSS color names like "coral", "dodgerblue", and "rebeccapurple".
Color Harmony Types
Complementary
Colors opposite on the wheel (180°). Creates strong contrast and visual impact.
Analogous
Adjacent colors (30° apart). Creates harmonious, cohesive designs.
Triadic
Three colors forming a triangle (120° apart). Balanced and vibrant.
Split-Complementary
Base + two colors adjacent to complement. Less tension than complementary.
Tetradic (Square)
Four colors at 90° intervals. Rich palette with lots of variety.
Tints & Shades
Lighter (tints) and darker (shades) versions of your base color.
Common Use Cases
- Web Development - Convert colors for CSS, Tailwind, Sass, or JavaScript
- UI/UX Design - Create accessible color palettes that meet WCAG standards
- Brand Design - Generate harmonious color schemes for logos and marketing
- Print Design - Convert RGB to CMYK for accurate print colors
- Accessibility - Check contrast ratios to ensure text readability
- Marketing - Create consistent color themes across campaigns
WCAG Contrast Guidelines
Level AA (Minimum)
- Normal text: 4.5:1 contrast ratio
- Large text (18pt+): 3:1 contrast ratio
- UI components: 3:1 contrast ratio
Level AAA (Enhanced)
- Normal text: 7:1 contrast ratio
- Large text (18pt+): 4.5:1 contrast ratio
- Recommended for critical content
Frequently Asked Questions
What color formats are supported?
We support HEX (with and without #), RGB, RGBA, HSL, HSLA, HSV, and CMYK color formats. You can input colors in any format and instantly convert to all others.
What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) defines contrast ratios for accessible text. AA level requires 4.5:1 for normal text and 3:1 for large text. AAA level requires 7:1 for normal text and 4.5:1 for large text.
What are complementary, analogous, and triadic colors?
Complementary colors are opposite on the color wheel (180°). Analogous colors are adjacent (30° apart). Triadic colors form a triangle (120° apart). These harmonious combinations create visually appealing designs.
What is the difference between RGB and CMYK?
RGB (Red, Green, Blue) is for screens and digital displays using additive color mixing. CMYK (Cyan, Magenta, Yellow, Key/Black) is for print using subtractive color mixing. Use RGB for web, CMYK for print.
Is this color picker free to use?
Yes! Our color picker is 100% free with no signup required. All processing happens locally in your browser for complete privacy.
When should I use HSL vs RGB?
Use HSL when you want to adjust lightness/darkness or saturation intuitively. Use RGB when working with code or when you need precise color values. Both are supported in modern CSS.