Color Picker & Converter
Pick any color and convert between HEX, RGB, HSL, and HSV formats instantly
Pick a Color
Color Values
Contrast Checker
WCAG 2.1 accessibility guidelines recommend a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.
Recommended: Use white text on this background color.
Color Harmony
Colors that work well together based on color theory.
Complementary
Analogous
Triadic
Split-Complementary
Shades & Tints
Darker (shades) and lighter (tints) variations of the selected color.
Tints (Lighter)
Shades (Darker)
Popular Color Palettes
Material Design Colors
Web Safe Colors
Real-Time Conversion
Instantly convert between HEX, RGB, HSL, and HSV color formats as you pick or type values.
Accessibility Checker
Check WCAG contrast ratios to ensure your color choices are accessible and readable for all users.
Color Harmony
Generate complementary, analogous, triadic, and split-complementary color schemes from any base color.
Frequently Asked Questions
What is the difference between HEX, RGB, HSL, and HSV?
HEX is a hexadecimal representation of RGB values (e.g., #FF5733). RGB uses three numbers (0-255) for red, green, and blue channels. HSL (Hue, Saturation, Lightness) is more intuitive for humans as it separates color hue from intensity. HSV (Hue, Saturation, Value) is similar to HSL but uses Value instead of Lightness, which can be more intuitive for certain color selections.
How do I check if my text color has enough contrast?
Use the contrast checker section of this tool. It calculates the contrast ratio between your selected color and both white and black text. WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text to meet AA compliance.
What are color harmonies?
Color harmonies are combinations of colors that are visually pleasing together. Common types include complementary (opposite on the color wheel), analogous (adjacent on the color wheel), triadic (evenly spaced three colors), and split-complementary (a color plus two adjacent to its complement).
What is the difference between a shade and a tint?
A shade is created by adding black to a color, making it darker. A tint is created by adding white to a color, making it lighter. Both are useful for creating color variations and palettes for design projects.
What are Material Design colors?
Material Design colors are a standardized color palette created by Google for their Material Design system. They include primary colors (Red, Pink, Purple, etc.) with multiple shade variations (50 through 900) that ensure consistent and accessible color usage across applications.
More tools you might like: