Color Tools

Generate harmonious color palettes and convert between formats

Color Picker
RGB: 79, 70, 229
HSL: 243°, 75%, 59%
Contrast Checker

Check how your color works with text

This is sample text in your selected color
White text on your selected color
Contrast ratio with white text: 6.29:1
WCAG Compliance: AA – Good
Color Palette Generator

Create a harmonious color palette based on your selected color

🎨 How to use the Color Tool

  1. Pick a color with the native Color Picker, or paste a Hex code directly in the field below.
  2. Read the equivalent RGB and HSL values instantly.
  3. Check the Contrast Checker to see how your color behaves with white text and on a white background.
  4. Look at the WCAG Compliance label — AA or AAA means your color passes the accessibility standard.
  5. Click Generate Palette to create a harmonious five-shade palette around your color. Click any swatch to make it the new base.

🌈 Why color tools matter

Color is the first thing visitors perceive on a website — before a single word is read. Research on first impressions suggests users form an opinion about a page in under 50 milliseconds, and color is the dominant factor in that instant judgment. It sets the tone, communicates the brand, and guides the eye to what matters. But picking colors that look good together and remain readable is harder than it seems. A beautiful pastel palette can fail as soon as you try to put text on it; a striking brand color can become unreadable the moment it meets a body of copy.

♿ That’s where a contrast checker becomes essential. The WCAG (Web Content Accessibility Guidelines) define minimum contrast ratios — 4.5:1 for normal text, 3:1 for large text (18 pt regular or 14 pt bold), and 7:1 for AAA-level compliance. Below that threshold, users with reduced vision, color blindness (affecting roughly 1 in 12 men and 1 in 200 women), or simply a screen exposed to sunlight, can struggle to read your content. Accessibility isn’t a niche concern: globally, over a billion people live with some form of disability, and age-related vision decline eventually affects everyone. Designing for contrast is designing for your older self.

⚖️ In many countries, accessibility is no longer just good practice — it’s a legal obligation. The European Accessibility Act (EAA) took effect in June 2025, requiring most digital services to meet WCAG 2.1 AA. In the US, the ADA has been used to sue thousands of companies over inaccessible websites. In Canada, the UK, Australia and many other jurisdictions, similar rules apply. Running a contrast check isn’t just polite — it’s risk management.

🎨 A palette generator removes another pain point: the fear of the blank page. Start from a single brand color, and you get instant variations — lighter, darker, saturated, desaturated — that work together. Use them for backgrounds, hover states, borders, disabled buttons, or secondary call-to-actions, confident that the overall result stays coherent. Designers call this a tonal palette, and it’s the backbone of modern design systems: Material Design, IBM Carbon, Shopify Polaris, Atlassian — they all boil down to “pick a few key colors, derive tonal scales, and use them consistently”.

🔢 Understanding color formats matters too. Hex (#4f46e5) is compact and universal; it’s what you paste into CSS, Figma, or a brand guideline. RGB (79, 70, 229) is how screens actually produce color, mixing red, green and blue light; it’s how you reason about transparency and blending. HSL (243°, 75%, 59%) is how humans think about color — hue (what color), saturation (how vivid), lightness (how bright). HSL is the format designers reach for when they want to tweak a color without losing its character: “same blue, but 10% lighter” is one number change in HSL, and a guessing game in hex.

🧠 A subtle point often missed: contrast is not just about foreground vs. background. Two colors that pass WCAG against white can fail dramatically when placed next to each other — a common mistake in buttons or cards. The same color that works as body text may be unreadable as a placeholder on a tinted input. Always test your colors in the context they’ll actually appear in.

💡 Whether you’re designing a logo, a landing page, a dashboard, or a single button, a color tool turns a subjective decision into something measurable. And when you can measure it, you can defend it, replicate it across a team, and ship with confidence.