Color Picker & Converter
Pick any color and convert between HEX, RGB, and HSL instantly.
Generate palettes, check contrast, and copy CSS code.
Color Values
RGB Sliders
HSL Sliders
Palette Generator
Contrast Checker (WCAG)
Color History
CSS Code
How to Use This Color Picker
Pick a color by clicking the color swatch in the top panel to open your browser’s native color picker, or type a HEX code directly into the HEX field. All other values update instantly.
Adjust with sliders: Use the RGB or HSL sliders to fine-tune your color. RGB sliders control Red, Green, and Blue channels (0–255 each). HSL sliders control Hue (0–360°), Saturation (0–100%), and Lightness (0–100%).
Copy values: Click the Copy button next to HEX, RGB, or HSL to copy that format to your clipboard. Use the Copy CSS button at the bottom to grab ready-to-paste CSS declarations.
Generate a palette: Select a harmony type — Complementary, Analogous, Triadic, or Split-Complementary — and click any swatch to switch your active color to that palette entry.
Check contrast: Enter a text color and background color in the Contrast Checker. The tool calculates the contrast ratio and shows WCAG AA and AAA pass/fail results for normal and large text.
Color history: The last 10 colors you’ve picked appear as clickable swatches. Click any swatch to return to that color instantly.
Color Theory Basics
Color harmony is the principle of arranging colors that are pleasing to the eye based on their relationships on the color wheel. Complementary colors sit directly opposite each other (e.g., blue and orange) and create high visual tension, making them ideal for call-to-action buttons and bold design accents. Analogous colors sit adjacent on the wheel and create a cohesive, low-contrast palette suited for backgrounds and subtle UI themes. Triadic schemes use three colors equally spaced at 120° apart, offering balanced contrast with more variety. Split-complementary is a softer alternative to the true complementary pairing, using one base color and two colors flanking its complement.
Contrast and accessibility go hand in hand. WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure readable text for people with low vision or color blindness. A ratio of 4.5:1 is required for normal-sized text (Level AA), while 7:1 meets the stricter Level AAA standard. Large text (18pt+ or 14pt bold) has a more lenient threshold of 3:1 for AA. Using the contrast checker built into this tool before publishing your designs helps ensure your color choices are inclusive and meet modern accessibility standards.
Related Tools
Format and validate JSON data → JSON Formatter
Count words and characters → Word Counter
Generate secure passwords → Password Generator
Design with gradients → CSS Gradient Generator — create beautiful CSS gradients visually
Need placeholder text? → Lorem Ipsum Generator — generate filler content for mockups