Design Tool
Advanced Color PickerExplore harmonies & contrast
Generate palettes, check contrast, and convert color codes instantly. The ultimate tool for designers and developers.
Selected Color
Extract from Image
Upload an image to pick colors
Color Harmonies
Complementary
Analogous
Triadic
Split Complementary
Monochromatic
Shades & Tints
Tints (Lighter)
Shades (Darker)
Contrast Checker
Heading Text
This is how normal body text looks on the background. Good contrast is essential for readability.
Understanding Color Models
HEX (Hexadecimal): A 6-digit code used primarily in web design (HTML/CSS). It represents Red, Green, and Blue values from 00 to FF. Example: #15918c.
RGB (Red, Green, Blue): An additive color model where red, green, and blue light are added together to create colors. Used in digital screens. Values range from 0 to 255.
HSL (Hue, Saturation, Lightness): A more intuitive way to describe color. Hue is the color type (0-360°), Saturation is intensity (0-100%), and Lightness is brightness (0-100%).
Color Harmonies Explained
- Complementary: Colors opposite each other on the color wheel. High contrast and vibrant.
- Analogous: Colors next to each other. Harmonious and pleasing to the eye.
- Triadic: Three colors evenly spaced around the wheel. Balanced and colorful.
Accessibility & Contrast
Web accessibility is crucial. The WCAG (Web Content Accessibility Guidelines) recommend specific contrast ratios between text and background:
- AA Level: Minimum ratio of 4.5:1 for normal text.
- AAA Level: Enhanced ratio of 7:1 for normal text.
Use our built-in Contrast Checker to ensure your color choices are readable for everyone, including users with visual impairments.
Pro Tip: Using the Image Extractor
Upload any image (logo, photo, screenshot) to our Image Color Extractor above. You can click anywhere on the image to instantly grab the exact HEX code of that pixel. Perfect for matching brand colors or stealing inspiration from nature!