ColorLens: The Best Free Palette Generator and Contrast Checker
Your Excel report includes 3 sheets: Palette (all shade/tint stops with hex, RGB, HSL), Harmony Colors, and a full WCAG Contrast Matrix for every color pair.
Click the code block to copy all CSS variables to clipboard.
Click the code block to copy Tailwind extend config to clipboard.
Choosing the right colors for a website, app, or brand identity is one of the most important and most time-consuming parts of any design project. You need colors that are visually harmonious, on-brand, and — critically — accessible to all users including those with color vision deficiencies. That is exactly what ColorLens by ExcelGuru was built to solve.
ColorLens is a free, browser-based color palette generator and WCAG contrast checker that gives designers, developers, and marketers everything they need in a single, beautifully designed tool. From generating a complete 10-stop shade and tint palette from a single seed color, to checking WCAG 2.1 AA and AAA compliance, simulating six types of color vision deficiency, and previewing your palette on live UI components — ColorLens does it all in real time with zero sign-up required.
In this guide, we will walk you through every feature of ColorLens and show you exactly how to use it to create professional, accessible color systems faster than ever before.
ColorLens is completely free. No account, no subscription, no watermarks. Open it in any browser and start designing immediately.
What Is ColorLens and Who Is It For?
ColorLens is a one-page web application that takes a single hex color — your brand color, a client’s primary color, or simply a color you find beautiful — and builds an entire professional color system around it. It then tests that color system against accessibility standards, lets you see how it appears to users with various forms of color blindness, previews it on real UI components, and exports everything to a structured Excel report.
The tool is designed for a wide range of professionals. UI and UX designers use it to build design system color tokens quickly. Web developers use it to generate CSS variables and Tailwind configuration they can paste directly into their codebase. Brand managers and marketers use it to explore color variations around a brand seed color and check whether their color choices will work across different media. Accessibility specialists use the WCAG contrast checker and color blindness simulator to audit and improve existing designs.
What makes ColorLens particularly powerful is that it handles the full color workflow in a single interface — from generation, to testing, to preview, to export — without ever requiring you to switch between multiple tools or browser tabs.
How to Use ColorLens: A Step-by-Step Guide
To make the best use of the given tool, follow the steps and guide given below; If you have any questions write us at admin@excelguru.io
Step 1: Enter Your Seed Color
Every palette in ColorLens starts from a single seed color. At the top of the Palette tab, you will find two input options that work in perfect sync: a visual color picker and a hex text field. You can click the circular color picker to open your browser’s native color wheel, drag the hue and saturation sliders, and the hex field updates immediately. Alternatively, you can type any valid six-digit hex code directly into the text field and the picker updates to match.
Directly below the seed input, ColorLens displays three clickable meta tags showing the seed color’s value in every major format: HEX (e.g., #22C55E), RGB (e.g., rgb(34, 197, 94)), and HSL (e.g., hsl(142, 71%, 45%)). Clicking any of these tags copies the value to your clipboard instantly — ideal for pasting directly into design tools or code editors.
Pro tip: If you have a brand color saved in Pantone or CMYK, convert it to hex first using any free online converter, then paste it into ColorLens. The entire palette will be built around that exact hue automatically.
Step 2: Choose a Harmony Type
Once your seed color is set, ColorLens offers six classical color harmony types that determine how the companion colors in your palette relate to the seed. Each harmony type produces a distinctive six-color palette displayed in the Color Harmony section of the Palette tab.
Analogous colors sit adjacent on the color wheel at 30-degree and 60-degree intervals. This produces palettes that feel cohesive, natural, and easy on the eye — ideal for interfaces that need to feel calm and unified. Complementary pairs the seed color with the color directly opposite it on the color wheel (180 degrees away), creating high-contrast, energetic pairings that draw the eye. Triadic divides the color wheel into three equal parts (120 degrees apart), producing vibrant, balanced palettes with strong visual interest.
Split-Complementary is a softer version of complementary — instead of using the exact opposite color, it uses the two colors on either side of the complement, reducing tension while maintaining contrast. Tetradic uses four colors evenly spaced around the wheel (90 degrees apart), creating rich, complex palettes suited to projects that need a wide range of accent colors. Finally, Monochromatic generates six variations of the seed color at different lightness values — the most conservative and brand-safe choice for designs that need visual consistency above all else.
Step 3: Load a Brand Preset (Optional)
If you are working with a well-known brand color rather than a custom seed, the Brand Presets section provides fifteen instant one-tap options including ExcelGuru’s own green, Google Blue, Meta Blue, Instagram’s pink-red, Spotify green, Figma orange, Discord purple, Airbnb coral, LinkedIn blue, and more. Tapping any preset swatch immediately loads that brand’s primary color as the seed and regenerates the entire palette, harmony, contrast analysis, and preview in real time.
This is particularly useful for competitive analysis — you can instantly see whether a competitor’s brand color passes WCAG accessibility standards, and what their color system looks like when fully expanded.
Step 4: Review the Shade and Tint Palette
The centerpiece of the Palette tab is the 10-stop shade and tint palette, displayed as a horizontal row of swatches that visually mirrors the scale used in design systems like Tailwind CSS and Material Design. The stops are labeled 50 (lightest) through 900 (darkest), and each stop is mathematically derived from the seed color’s hue and saturation by progressively adjusting the lightness value.
Hovering or tapping any swatch reveals its exact hex code overlaid on the swatch. A single tap copies the hex code to your clipboard. The swatch animation gives a satisfying physical feedback — swatches scale gently on hover, making it easy to scan the range and pick exactly the stop you need.
This 10-stop scale gives you everything you need for a complete, production-ready design system. The 50 and 100 stops work as background fills and subtle highlights. The 200 and 300 stops work as borders and dividers. The 400 through 600 stops are the primary action colors — buttons, links, and interactive elements. The 700 through 900 stops provide dark fills, heading colors, and high-contrast text applications.
Using the WCAG Contrast Checker
The Contrast tab is where ColorLens transforms from a palette generator into a serious accessibility tool. WCAG 2.1 (Web Content Accessibility Guidelines) defines minimum contrast ratios that text must meet to be considered readable by users with low vision. A contrast ratio of 4.5:1 or higher is required for AA compliance on normal text. A ratio of 7:1 or higher is required for AAA compliance. For large text (18pt or 14pt bold), the thresholds are lower: 3:1 for AA and 4.5:1 for AAA.
ColorLens automatically populates eight contrast pairs using combinations of your seed color and its palette shades, including seed on white and seed on black. Each pair is displayed as a card with a live text preview showing “Sample Text Aa” rendered in the actual foreground color on the actual background color, so you can see exactly what the combination will look like in practice.
Every contrast card shows the precise contrast ratio (e.g., 5.82:1), followed by three badges: AAA, AA, and AA Large. A green tick indicates a pass; a red badge indicates a fail. The ticker bar at the top of the screen keeps a running count of how many pairs are passing AAA, how many are passing AA only, and how many are failing — giving you an at-a-glance accessibility score for your palette as a whole.
Critically, every color in every contrast pair is fully editable. You can click the small color picker swatch next to any pair to change the foreground or background color with the visual picker, or type a hex code directly into the text field. This makes the Contrast tab a completely standalone WCAG checker — you can test any two colors from any project, not just the currently loaded palette.
WCAG compliance is not optional for professional web design. Failing contrast ratios expose brands to accessibility lawsuits and exclude users with visual impairments. Always check before shipping.
Previewing Your Palette on Real UI Components
One of the most distinctive features of ColorLens is its live UI Preview tab, which renders your seed color and its derived shades onto five categories of actual interface components in real time. Rather than imagining how your palette might look in context, you see it applied immediately.
Buttons
The Buttons preview renders five button variants side by side: a solid Primary button with the seed color as background, an Outline button with a seed-colored border and transparent background, a Ghost button using the lightest shade as a fill, a Dark button using the darkest shade, and a Disabled button in neutral gray. This gives you an immediate sense of whether your seed color has enough presence as a primary action color without being overwhelming.
Cards
The Cards preview shows two card patterns: a white card with the seed color as an accent border and heading color, plus an inline call-to-action button; and a filled card with the seed color as the full background. Seeing both simultaneously reveals whether your color works both as an accent and as a dominant fill.
Badges and Alerts
The Badges and Alerts preview shows six badge variants — solid, light, pill, outline, dark, and an inline alert with a left-border accent — all generated from your palette. This is particularly useful for checking whether your color is strong enough for status indicators without overwhelming the surrounding content.
Form Elements
The Form preview shows a focused text input with a seed-colored border, a select dropdown, a checked checkbox using the seed color as fill, and a submit button — the most common form components in any application. Focused state indicators are one of the most important accessibility considerations in form design, and this preview lets you check whether your color provides sufficient visual feedback.
Typography
The Typography preview shows a complete type scale from display heading through body text, caption, and link, all rendered using your seed and palette colors. This is especially useful for checking whether your brand color works as a heading color against a white background, and whether links styled in your brand color are sufficiently distinguishable from surrounding body text.
Simulating Color Blindness with ColorLens
Approximately 8% of males and 0.5% of females have some form of color vision deficiency. This means that for every hundred users who visit your website or application, eight or more may perceive your carefully chosen colors in a significantly different way than you intended. The Color Blindness tab in ColorLens makes this visible.
ColorLens simulates six distinct types of color vision deficiency by applying scientifically validated transformation matrices to each of your palette’s five primary shade stops. The simulations run simultaneously so you can compare them side by side without switching between modes.
Deuteranopia (reduced green sensitivity, affecting approximately 6% of males) causes greens to appear yellowish and makes red-green distinction difficult. Protanopia (reduced red sensitivity) makes reds appear very dark and increases confusion between red and green. Tritanopia (reduced blue sensitivity, extremely rare at approximately 0.01% of people) causes blues to appear greenish and yellows to appear pinkish. Achromatopsia (complete color blindness, affecting approximately 0.003% of people) renders all colors as shades of gray — the most extreme simulation. Deuteranomaly is the most common color vision deficiency overall and reduces green sensitivity without eliminating it entirely.
Reviewing these simulations before finalising a color palette is a professional accessibility practice that prevents one of the most common and easily avoided design failures: relying on color alone to convey meaning.
Exporting Your Palette: Excel, CSS, and Tailwind
Download the Excel Report (.xlsx)
The Export tab provides a one-click download of a structured Excel workbook containing three sheets. The Palette sheet lists every shade and tint stop with its hex code, RGB values, HSL values, relative luminance, and a light/dark classification. The Contrast Matrix sheet calculates the contrast ratio for every possible pair of colors in your palette and labels each result as AAA, AA, AA Large, or Fail — producing a complete accessibility audit of your entire color system. The Color Vision Simulation sheet shows the simulated hex and RGB values for every palette stop under each of the six color vision simulations.
This Excel report is designed to be dropped straight into a design brief, accessibility audit document, brand guidelines pack, or client presentation. It provides the level of documented rigor that professional design work requires.
Copy CSS Variables
For web developers, the Export tab also generates a complete set of CSS custom properties for your palette, formatted as a `:root` block ready to paste into any stylesheet. The variables follow a consistent naming convention from `–color-50` through `–color-900`, plus additional variables for the harmony colors. Clicking the code block copies the entire block to the clipboard.
Copy Tailwind Configuration
For projects using Tailwind CSS, ColorLens generates a ready-to-use `extend.colors` configuration object that you can paste directly into your `tailwind.config.js` file. This gives you utility classes like `bg-brand-500`, `text-brand-700`, and `border-brand-200` immediately, with all ten stops of your palette available as first-class Tailwind utilities.
The combination of CSS variables and Tailwind config means ColorLens fits into any front-end stack with zero adaptation — whether you are using vanilla CSS, SCSS, React, Next.js, Vue, or any other framework.
Why ColorLens Stands Out from Other Color Tools
There are other color tools available online. Coolors, Adobe Color, Paletton, and Huemint all generate palettes. But ColorLens goes several steps further by combining palette generation, WCAG contrast checking, color blindness simulation, live UI component preview, and structured export into a single, cohesive tool — with no account required and no features hidden behind a paywall.
The tool is also built to be embeddable. Because ColorLens is a single self-contained HTML file with all `cl-` prefixed identifiers, it can be integrated into any existing website or CMS without conflicting with existing styles or scripts. For agencies and freelancers who build multiple client sites, this makes ColorLens a tool that can live inside a client-facing design portal or brand management dashboard.
The Excel export is a particularly meaningful differentiator for professional contexts. Most color tools let you copy a hex code or download a PNG. ColorLens gives you a structured, annotated spreadsheet that documents your entire color system and its accessibility compliance — the kind of deliverable that belongs in a brand guidelines document or a development handoff package.
Conclusion: Build Better, More Accessible Color Systems
ColorLens by ExcelGuru is the most complete free color palette generator available online. Whether you are starting a new brand from a single seed color, auditing an existing design system for WCAG compliance, preparing a color specification for developer handoff, or exploring how a competitor’s brand palette holds up under accessibility scrutiny — ColorLens gives you everything you need in one place, in real time, for free.
Open ColorLens, enter your brand color, and in under two minutes you will have a complete, accessible, documented color system ready for design, development, and presentation.
ColorLens by ExcelGuru is free, requires no sign-up, and runs entirely in your browser. Your color data never leaves your device.
Frequently Asked Questions
Does ColorLens work on mobile devices?
Yes. ColorLens is fully responsive and optimised for mobile use. The tab bar scrolls horizontally, the contrast grid stacks to a single column, and all swatches are touch-friendly. The tool works on iOS Safari, Android Chrome, and any modern mobile browser.
What is a WCAG contrast ratio and why does it matter?
WCAG (Web Content Accessibility Guidelines) contrast ratio is a measure of how different a text color appears against its background, on a scale from 1:1 (identical) to 21:1 (black on white). A minimum ratio of 4.5:1 is required for AA compliance on normal body text. Many countries now have legislation requiring websites to meet at least WCAG 2.1 AA, and failing to comply can result in accessibility lawsuits and exclude users with low vision.
Can I use the exported CSS variables in Figma?
Figma does not natively support CSS variables, but you can use the hex values from the Palette sheet in your Excel report to manually create a Figma color style or variable set. Several Figma plugins (such as Tokens Studio) can also import CSS variable syntax directly, making the ColorLens CSS export directly compatible.
How accurate are the color blindness simulations?
ColorLens uses established transformation matrices based on peer-reviewed color vision research for all six simulations. The simulations are highly accurate for deuteranopia, protanopia, and deuteranomaly, which together account for the vast majority of real-world color vision deficiencies. They provide an excellent approximation for design decision-making purposes.
Can I test colors from an existing website in the contrast checker?
Absolutely. The contrast checker pairs are fully editable — you can type any hex code into any foreground or background field regardless of what palette is currently loaded. Use a browser color picker extension to sample colors from any website, then paste them into the ColorLens contrast checker to test their WCAG compliance.
Is the Excel export compatible with Google Sheets?
Yes. The ColorLens Excel report is generated in standard .xlsx format and opens without issues in Google Sheets, LibreOffice Calc, and Apple Numbers, in addition to Microsoft Excel.