Introducing About New Colors: Professional Color Tools for Modern Web Design

Why We Built This

As designers and developers ourselves, we've spent countless hours juggling between different color tools. When we needed to check WCAG contrast ratios for accessibility compliance, we'd open one tool. To generate a harmonious color palette based on color theory, we'd switch to another. And when it came time to export everything to CSS or SCSS variables, we'd fire up yet another application. This fragmented workflow was frustrating, time-consuming, and frankly exhausting.

We knew there had to be a better way. What if all these essential color tools could live in one place? What if the interface was beautiful, intuitive, and respected your preferences - whether you prefer working in light mode during the day or switching to dark mode for those late-night design sessions? That's exactly what we set out to build with About New Colors.

What About New Colors Does

About New Colors brings together everything you need for professional color work:

Understanding Color Formats

Every designer and developer has experienced this pain point: you have a perfect color in one format, but your design tool or codebase needs it in another. Maybe your designer handed you an RGB value, but your CSS uses HEX codes. Or perhaps you're working with a print designer who needs CMYK values for physical production. About New Colors eliminates this friction entirely with instant, accurate conversion between all major color formats.

The History and Purpose of Each Format

HEX (Hexadecimal) has been the backbone of web design since the early days of HTML and CSS. This compact format represents colors as six-character codes using base-16 notation - something like #3949AB. Born in the 1990s alongside the web itself, HEX remains the most common format you'll encounter in CSS files, design tools, and developer workflows. It's efficient, widely supported, and easy to copy-paste. Our converter handles both the full six-digit codes and the shorthand three-digit variants that CSS supports.

RGB (Red, Green, Blue) mirrors exactly how your screen produces colors by combining light. Every single pixel on your monitor is actually three tiny lights - one red, one green, one blue - each with an intensity ranging from 0 to 255. This additive color model dates back to early color television technology in the 1950s and remains fundamental to all digital displays today. When you need precise control over individual color channels or want to understand the actual light values your screen is emitting, RGB is your format. It's also essential when you're working with color manipulation in code, since adjusting individual channels is straightforward.

HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) represent colors the way designers actually think about them. Instead of dealing with technical channel values like RGB, you work with intuitive concepts: which color on the spectrum (hue), how vivid or muted it is (saturation), and how bright or dark it appears (lightness or value). Developed in the 1970s specifically for computer graphics applications, these formats make creating color variations incredibly simple. Want a lighter shade? Just adjust one value. Need a more muted tone? Change the saturation. This is why HSL and HSV are essential for building color palette generators and modern design systems.

CMYK (Cyan, Magenta, Yellow, Key/Black) is the language of professional printing. While screens emit light using the additive RGB model, printers work by layering inks that absorb light - a subtractive color model. Developed for four-color printing presses, CMYK has been the print industry standard since the early 20th century. If you're designing anything that will be physically printed - business cards, magazine spreads, product packaging, or promotional posters - you absolutely need CMYK values. This ensures that what you see glowing on your screen will match what comes off the printing press, preventing costly reprinting and disappointed clients.

Supported Input Formats

About New Colors accepts colors in any of these formats:

• HEX - #3949AB or #39B (shorthand)
• RGB - rgb(57, 73, 171) or individual values
• HSL - hsl(233, 50%, 45%) or individual values
• HSV - Individual hue, saturation, value components
• CMYK - Individual cyan, magenta, yellow, black percentages

Just paste your color in any format and get accurate results in every format you need. No manual calculations, no conversion errors, no frustration.

Making Accessibility Effortless

Accessibility isn't optional anymore - it's both a legal requirement and a moral imperative. An estimated 2.2 billion people worldwide have some form of vision impairment, and poor color contrast is consistently one of the most common accessibility failures found on websites. When text doesn't have enough contrast against its background, it becomes difficult or impossible for people with low vision to read. This isn't just about being inclusive (though that's reason enough) - it's about compliance with laws that carry real consequences.

The Web Content Accessibility Guidelines (WCAG), published by the W3C consortium, establish the technical standards that define what makes web content accessible. These guidelines aren't just recommendations - they're legally mandated in many jurisdictions around the world. The Americans with Disabilities Act (ADA) requires accessible websites for businesses operating in the United States. Section 508 mandates accessibility for all U.S. federal government websites and any organizations receiving federal funding. The European Accessibility Act enforces similar requirements across all EU member states. Failure to comply with these standards can result in lawsuits, substantial fines, and serious damage to your brand's reputation.

Our WCAG Contrast Checker takes all the guesswork out of compliance. When you enter any two colors, you immediately see the contrast ratio calculated to precise decimal places. WCAG defines specific minimum ratios: 4.5:1 for normal-sized text to meet AA standards, 3:1 for large text at the AA level, and 7:1 for normal text to achieve the stricter AAA compliance. We calculate the precise ratio and tell you exactly which standards your color combination meets. But numbers alone don't tell the whole story, which is why we show you live preview boxes displaying your exact color combination as your users will experience it. This makes it incredibly easy to spot potential problems before they ship to production.

When a contrast check fails, we don't just inform you that something's wrong - we actively help you fix it. You can adjust the colors in real-time and watch the contrast ratio update instantly as you make changes, guiding you toward a compliant color combination that still matches your design vision. Whether you're designing for government compliance requirements, building an inclusive product that serves all users, or simply doing the right thing because it matters, our WCAG checker ensures your colors work for everyone who visits your site.

Color Theory Made Practical

Great color palettes aren't created by randomly picking pretty colors - they're built on centuries of color theory developed through the combined work of artists, scientists, and designers. The color wheel, first formalized by Isaac Newton back in 1666 and later refined by influential artists like Johannes Itten in the 20th century, reveals mathematical relationships between colors that naturally create visual harmony. These aren't arbitrary rules - they're based on how human perception actually works.

About New Colors generates professional palettes using six fundamental harmony types, each serving different design purposes. Complementary colors sit directly opposite each other on the color wheel, positioned 180 degrees apart - think classic combinations like blue and orange, or red and green. This pairing creates maximum contrast and visual tension, perfect for making important elements pop or creating energetic, attention-grabbing designs. However, complementary colors should be used carefully because they can become overwhelming or create visual vibration if overused in large areas.

Analogous colors are neighbors on the color wheel, typically spanning just 30 to 60 degrees - combinations like blue flowing into blue-green flowing into green. These create serene, comfortable designs because they're naturally harmonious. They're literally the colors you see together in nature, like the progression of sunset colors or the varied greens in a forest. Analogous schemes are ideal for backgrounds, subtle gradients, and designs where you want everything to feel cohesive and calming rather than contrasting and exciting.

Triadic colors form a perfect equilateral triangle on the wheel, positioned exactly 120 degrees apart. This creates balanced, vibrant palettes that have enough contrast to be visually interesting but aren't as intense as complementary combinations. Think of the primary colors (red, yellow, blue) or the secondary colors (orange, green, purple). Triadic schemes work beautifully for playful, energetic designs that need variety while maintaining overall balance. They're particularly popular in designs targeting younger audiences or creative industries.

Tetradic harmonies (also called rectangle or double-complementary) use two complementary pairs, creating rich, complex palettes with four distinct colors. This gives you the most variety and flexibility but requires skill to balance properly - typically one color should dominate while the others play supporting roles. When executed well, tetradic schemes are perfect for designs that need depth, sophistication, and the ability to distinguish between multiple content types or sections.

Split complementary schemes take a base color and pair it with the two colors that sit adjacent to its direct complement. This provides the visual contrast and interest of complementary colors but with significantly less tension and clash. It's a more forgiving approach than pure complementary pairing while still creating visual interest and separation. Split complementary is an excellent choice for professional designs where you want sophistication without being overly bold.

Finally, monochromatic palettes use variations of a single hue, changing only the lightness and saturation while keeping the base color constant. This creates elegant, cohesive designs with built-in harmony that's essentially impossible to get wrong. However, monochromatic schemes require careful attention to contrast ratios for accessibility purposes, since you're working with similar tones throughout. These palettes are perfect for minimalist designs, brand guidelines that emphasize a signature color, or any situation where you need guaranteed visual coherence.

Seamless Export to Your Workflow

Once you've created the perfect color palette, you need to get it into your actual project. About New Colors exports to every format modern developers use: CSS custom properties (the modern CSS variables that support dynamic theming), SCSS variables for Sass-based projects, JSON format for configuration files and design tokens, SVG files for visual color swatch graphics, and Tailwind-ready formats that integrate perfectly with Tailwind CSS projects. Every export is just one click away - copy directly to your clipboard or download the file for documentation purposes.

Built for Your Workflow

If you're a designer, you'll find everything you need to build accessible color schemes that meet WCAG standards right from the start of your design process. Generate harmonious palettes based on proven color theory principles, export professional color swatches for design systems and style guides, and test how your colors look in both light and dark modes before you hand anything off to development.

For developers, About New Colors means you can convert any design color to whatever format your codebase requires. Verify accessibility compliance before deploying to production. Generate properly formatted CSS or SCSS variables automatically instead of writing them by hand. The tool integrates seamlessly into your build process, so accessibility checking becomes part of your workflow rather than an afterthought.

Accessibility testers can quickly audit color contrast ratios across an entire design system, identify WCAG compliance issues before they reach production, test every foreground and background combination that appears in the application, and generate compliant alternatives when problems are discovered.

See It in Action

Let's walk through a real example. Imagine you're designing a button for your application and want to ensure it meets accessibility standards. You start by picking your brand color - let's say #3949AB, a beautiful Indigo 600 shade. You enter this color along with your white background into the WCAG Contrast Checker. The result appears instantly: 7.11:1 ratio, which means you're AAA compliant - exceeding even the strictest accessibility standards. Now you want a complementary color for hover states to create visual interest when users interact with the button. You generate a complementary harmony from your base color, pick the shade you like best, and verify it also passes contrast requirements. Finally, you export everything to CSS variables and paste them directly into your stylesheet. This entire workflow takes under 30 seconds.

What's Coming Next

We're actively developing two major features that we think you'll find incredibly useful. The first is an automatic dark mode palette generator. Many websites today only have designs for light mode, and creating a proper dark mode version requires careful thought about maintaining visual hierarchy while inverting brightness. We're building an intelligent tool that will analyze your light color scheme automatically, generate a matching dark mode palette that preserves the relationships between elements, ensure WCAG compliance in both light and dark modes, and maintain your brand identity while adapting colors for dark backgrounds. No more manual guesswork or spending hours tweaking values - just provide your light colors and receive a professional dark mode scheme that actually works.

The second major feature is a live website WCAG analyzer. Point it at any URL and get instant, comprehensive accessibility insights. It will automatically scan all color combinations that appear on the page, generate a detailed WCAG report with specific pass/fail results for every element, provide actionable recommendations for fixing any contrast issues it discovers, and give you an element-by-element breakdown showing exactly what needs to be fixed and why. This will be perfect for accessibility audits, client deliverables, or thorough pre-launch QA checks to catch issues before your users do.

Start Using It Today

About New Colors is completely free to use with generous limits that work for most personal projects and small teams:

• ✅ 10 operations per day on Free plan
• ✅ All features included - no artificial restrictions or paywalled functionality
• ✅ No credit card required - start using it immediately

For professional use with higher volume needs, you can upgrade to our Starter plan (100 operations daily) or Pro plan (unlimited operations). Visit the tool now and see how much faster your color workflow can be.

Launch About New Colors →

Our Commitment to Quality

We obsess over the details so you don't have to. Every interaction in About New Colors is instant - there's no waiting for servers to respond, no loading spinners interrupting your flow, no network latency slowing you down. All color calculations happen directly in your browser, which means your data never leaves your device unless you explicitly choose to export it. We take your privacy seriously: no usage tracking, no analytics collecting your color choices, no selling your data to advertisers or third parties.

The interface adapts intelligently to your preferences and environment. Working late into the night? Switch to dark mode and your eyes will thank you - the carefully designed dark theme reduces eye strain during long design sessions. Using a phone or tablet? Every feature works perfectly on any screen size, from the smallest mobile device to the largest desktop monitor. Using assistive technology like a screen reader? We've tested extensively with real accessibility tools to ensure everyone can use our features regardless of how they access the web.

Most color tools out there cobble together APIs from different services, creating experiences that are slow, unreliable, and dependent on constant internet connectivity. We built everything from scratch with a single goal: create the best color tool on the web. The result is something that's fast, completely private, fully accessible, and always available - even when your internet connection isn't reliable.

Have feedback or feature requests? We'd love to hear from you. Contact us and let us know what you'd like to see in future updates.

Want to stay updated? Follow our blog for practical tutorials, deep dives into color theory, and announcements about new features as we release them.