Inverts each RGB channel: result = 255 - channel
Rotates hue by 180° on the HSL color wheel
Calculates WCAG 2.1 contrast ratio for accessibility compliance
Ready to calculate
Select an operation and click Calculate// perform math operations on colors instantly
Perform math operations on colors: mix, blend, lighten, darken, invert, complement, and calculate contrast ratios. Free browser-based color calculator.
Inverts each RGB channel: result = 255 - channel
Rotates hue by 180° on the HSL color wheel
Calculates WCAG 2.1 contrast ratio for accessibility compliance
Ready to calculate
Select an operation and click CalculateSelect from Mix, Lighten, Darken, Invert, Complement, Contrast, or Arithmetic tabs.
Type a HEX code, RGB value, or use the color picker. Both inputs update each other in real time.
Use sliders to tune the amount, then click Calculate to see the result with HEX, RGB, and HSL output.
Color Math treats colors as numeric values and applies mathematical operations to them. Since colors are stored as RGB triplets (0–255 per channel), you can add, subtract, multiply, or blend them just like numbers — enabling powerful programmatic color manipulation.
You can input colors as HEX codes (#22d3ee), RGB values (rgb(34, 211, 238)), or use the browser's built-in color picker. All results are shown in HEX, RGB, and HSL simultaneously.
Color mixing blends two colors by linearly interpolating each RGB channel. At 50%, you get the midpoint of both colors. The ratio slider lets you control how much of Color A vs. Color B appears in the result.
The color complement is found by rotating the hue 180° on the HSL color wheel. It's the color directly opposite on the wheel — for example, the complement of blue is orange. Complements create high-contrast, vibrant pairings.
It calculates the WCAG 2.1 relative luminance contrast ratio between two colors. A ratio of 4.5:1 or higher meets AA accessibility requirements for normal text; 3:1 meets AA for large text; 7:1 meets AAA standard.
Add (clamps at 255), Subtract (clamps at 0), Multiply (darkens by multiplying normalized values), Screen (inverse of multiply, lightens), Overlay (combines multiply and screen), and Difference (absolute difference per channel). These mirror CSS/Photoshop blend modes.
No. All processing happens entirely in your browser. No colors, inputs, or results are sent to any server. Your data never leaves your device.
Lightening adjusts the L (lightness) channel in HSL color space while preserving hue and saturation. Adding white in RGB space reduces saturation. HSL lightening gives more natural, designer-friendly results that preserve the color's identity.
Absolutely. All result values are displayed in formats you can paste directly into CSS: #hex, rgb(r, g, b), and hsl(h, s%, l%). Each has a copy button for quick transfer.
Color Math is a browser-based color calculator that lets designers and developers perform mathematical operations on colors. Rather than manually converting between formats or guessing the result of blending two colors, Color Math gives you precise, predictable results by treating colors as numeric values in RGB, HSL, or other color spaces.
Every color on a digital screen is ultimately a triplet of numbers — red, green, and blue channels ranging from 0 to 255. Because colors are numbers, you can apply mathematical operations to them: add them, subtract them, average them, multiply them, or manipulate the underlying hue, saturation, and lightness values to achieve predictable visual effects.
Design systems require consistent, systematic color scales. When you define a brand color and need tints, shades, and variations for hover states, disabled states, backgrounds, and borders, you need repeatable formulas — not guesswork. Color Math automates these calculations so you can generate an entire color palette from a single base color in seconds.
Accessibility compliance is another critical use case. WCAG 2.1 mandates minimum contrast ratios between text and background colors. Instead of relying on trial and error, Color Math calculates the exact contrast ratio instantly, telling you whether your combination passes AA or AAA requirements before you deploy to production.
When you mix two colors, Color Math performs linear interpolation across all three RGB channels. If Color A is rgb(34, 211, 238) and Color B is rgb(200, 241, 53), a 50% mix produces rgb(117, 226, 145) — the arithmetic midpoint of each channel.
The mix ratio slider lets you bias the blend in any direction. A 75% ratio toward Color A produces a result much closer to A with just a hint of B. This is mathematically equivalent to CSS's color-mix() function, giving you a preview of what modern CSS mixing will produce.
Rather than mixing with white or black (which can desaturate colors and produce muddy results), the Lighten and Darken operations work in HSL color space. The hue and saturation are preserved while only the lightness channel is adjusted. This produces the kind of clean, vivid tints and shades you see in professional design system color scales like Tailwind CSS or Material Design.
The step preview shows you multiple increments at once — a full tint/shade ramp from your base color — so you can immediately see how the color evolves across the lightness scale and pick the variant that works best for your needs.
The complement operation rotates the hue by exactly 180° on the HSL color wheel. Complementary colors create natural high-contrast pairs that feel balanced because they sit directly opposite each other on the spectrum. A cyan base color produces an orange complement; purple produces yellow-green.
Inversion is a simpler operation: each RGB channel is subtracted from 255. The result is the photographic negative of the original color. Inversion is useful for creating reversed themes or checking how a color behaves in dark/light mode contexts.
The Arithmetic tab exposes the blend mode formulas used by CSS, Photoshop, and Figma. These are the same mathematical operations that happen when you change a layer's blend mode in a design tool:
Understanding these formulas helps you predict blend mode behavior before committing to a design, and lets you recreate Photoshop blending effects in pure CSS or canvas code.
The Web Content Accessibility Guidelines (WCAG) define contrast ratio as a measure of luminance difference between two colors. The formula uses relative luminance — a perceptually weighted combination of linearized RGB channels — to compute a ratio from 1:1 (identical colors) to 21:1 (black on white).
WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text. Color Math shows you the exact ratio and which WCAG levels your color pair passes, so you can make accessibility decisions with confidence.
Color Math accepts colors in HEX format (#22d3ee or #22d3ee), RGB format (rgb(34, 211, 238)), and via the browser's native color picker. All results are displayed in HEX, RGB, and HSL simultaneously, with copy buttons for each format. This makes it easy to transfer results into any CSS, design token, or configuration file without manual conversion.
Color Math runs entirely in your browser. There are no files to upload, no accounts to create, and no servers processing your data. The tool is free, fast, and works offline after the initial page load. Whether you're building a design system, debugging accessibility issues, or just exploring what happens when you blend two brand colors — Color Math gives you instant, accurate answers.