Discover the perfect color with our intuitive picker. Generate shades, tints, and harmonious color palettes, and ensure your design is accessible with the built-in WCAG contrast checker.
Hex Code
Other Color Formats
Edit Color
R239
G209
B69
A100%
Color Variations for Your Selected Color
Explore a full spectrum of shades and tints for your chosen color. Shades are created by mixing the base color with black, resulting in a deeper, richer tone. Tints are created by adding white, producing a lighter, more pastel version. This is perfect for creating monochromatic color schemes.
Shades
Tints
Color Harmonies for Your Selected Color
Complementary colors are opposite each other on the color wheel, creating high contrast and vibrant results. They work best when used as accents, not both as dominant colors.
Color Contrast Checker
Test color combinations to ensure they meet WCAG accessibility standards for text readability.
Text Color
Background Color
Contrast
13.88
AA
★★★★★
Excellent
Small text
★★★★★
✓
Large text
★★★★★
✓
WCAG Standards
AAMinimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Required for most websites.
AAAEnhanced contrast ratio of 7:1 for normal text and 4.5:1 for large text. Recommended for optimal accessibility.
Excellent contrast (AAA) for both normal and large text.
Advanced Contrast Checker
Fine-tune with sliders, multiple previews & more
→
"
Everybody is a Genius. But If You Judge a Fish by Its Ability to Climb a Tree, It Will Live Its Whole Life Believing that It is Stupid.
— Albert Einstein
Color Combinations
Each harmony has its own mood. Use harmonies to brainstorm color combos that work well together.
How to Use
Click on any color to copy its hex value. These combinations are mathematically proven to create visual harmony.
Why It Matters
Color harmonies create balance and evoke specific emotions in your designs.
Color Theory Principles
Balance
Use one dominant color, support with secondary, and accent sparingly.
Contrast
Ensure sufficient contrast for readability and accessibility.
Harmony
Colors should work together to create a unified visual experience.
Pick Colors from an Image
Upload any image and click on it to extract the exact color at that point. Perfect for matching colors from photos, logos, or designs.
🖼️
Drop your image here
or browse to upload
#FFFFFF
rgb(255, 255, 255)
💡 Click anywhere on the image to pick that color
Color Theory & Design Tips
Master color in design with our expert guides on theory, psychology, accessibility, and practical application.
Click any suggestion to apply it as your text color:
Preview your color combination in different text contexts:
Aa
Preview Title
The quick brown fox jumps over the lazy dog
Small text example (12px)
WCAG Standards
Level AA
Minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Required for most websites.
Level AAA
Enhanced contrast ratio of 7:1 for normal text and 4.5:1 for large text. Recommended for optimal accessibility.
Excellent contrast (AAA) for both normal and large text.
Color Contrast Checker
Calculate the contrast ratio of text and background colors.
Choose a color using the color picker for text and background color or enter a color in RGB hexadecimal format (e.g., #259 or #2596BE). You can adjust the slider to select color. The Web Content Accessibility Guidelines (WCAG) has a specific guideline to help figure out whether text is readable for sighted users. This criteria uses a particular algorithm to map color combinations into comparable ratios. Using this formula, WCAG states that a 4.5:1 color contrast ratio with text and its background is adequate for regular (body) text, and large text (18+ pt regular, or 14+ pt bold) should have at least a 3:1 color contrast ratio.
PDF Candy