Skip to content
Toolars
Explore
Report bug

Design · Local utility

Color Mixer

Blend two colors in sRGB with premultiplied alpha or overlay one on the other, and export the result as HEX, RGBA, and CSS.

Task path / input to outcome

Enter the two colors

Runs locally · Nothing is uploaded

How Color Mixer works, privacy, and related tools

Task path / input to outcome

How to mix two colors

  1. 01

    Enter the two colors

    Fill in First color and Second color with hex values — #RGB, #RGBA, #RRGGBB, and #RRGGBBAA are all accepted, so translucent inputs are fine. The workspace opens with #6D5EF8 against #22C55E.

  2. 02

    Calculation

    Choose Calculation method: Weighted mix interpolates encoded sRGB channels with premultiplied alpha. Composite places the first color over the second; layer order matters, and this mode has no weight slider.

  3. 03

    Mix the colors

    In Weighted mix, set Second color weight from 0% (first color) to 100% (second color), then press Mix colors. In Composite, press the same button to apply source-over. Changing a color, method, or weight clears the previous result.

  4. 04

    Read the result panel

    HEX, RGBA, CSS and preview share 8-bit channels and alpha. Transparency is shown over the page; the output retains alpha.

  5. 05

    Try the sample blend

    Press Load sample to mix #F97316 with #7C3AED at a 35% weight — a warm orange shifting toward violet — so you can see the full flow. Reset returns the default pair at 50%.

  6. 06

    Copy or download the result

    Copy or download toolars-color-mix.json with both source colors, the method, sRGB color space, HEX, RGBA and a CSS declaration. secondColorWeight is included only for weighted mixing. All output forms share the same 8-bit result.

Tool facts

Processing
In your browser
Input leaves this device
Never
Retention
Nothing is stored
Price
Free

Your input stays in the browser.

Color Mixer uses its verified local execution path and does not create a hidden input or output history.

Local execution

Runs inside the current browser tab.

No hidden processing

Active tool data never becomes a Toolars document record.

No account required

Use the core workflow without creating a profile. Favorites sync to your account after you sign in.

Immediate reset

Clear the tab and the active working data is gone.

What Color Mixer actually does

A design system needs a color between brand violet and green: use Weighted mix and adjust the second-color percentage until the swatch fits. To check a translucent overlay against another color, switch to Composite with the overlay first and background second. Compare the returned alpha and preview on your intended page background before exporting the JSON; the two methods answer different questions.

Common questions

How does the weight slider work?
The slider appears only for Weighted mix. At 0% the first color wins; at 100% the second wins. Between them, encoded sRGB channels are interpolated with premultiplied alpha, then rounded to 8-bit output. Composite ignores this weight and layers the first color over the second.
Does the mixer handle transparency?
Yes. Weighted mixing interpolates colors with premultiplied alpha; compositing places the first color over the second. A transparent input contributes differently in these two modes. Compare the alpha value and both layer orders on your intended background.
How are the channels rounded?
HEX, RGBA, CSS and preview share 8-bit channels and alpha. Transparency is shown over the page; the output retains alpha.
Why did the result panel clear?
Changing either color, the Calculation method, or the weight clears the previous result so it cannot be mistaken for the current settings. Press Mix colors again to calculate the new output.
What exactly does the export contain?
Copy or download toolars-color-mix.json with both source colors, the method, sRGB color space, HEX, RGBA and a CSS declaration. secondColorWeight is included only for weighted mixing. All output forms share the same 8-bit result.
Is the data sent anywhere?
No. The blend is computed entirely in this browser tab, inputs and results never leave it, and no account is required.

Keep reading

Continue in Design

Related tasks, not a dead end.

Move into another focused workspace without returning to the full index.

CSS Loader Generator

Design an orbit-ring or three-dots loading spinner with size, stroke, speed, and color controls, and copy CSS that respects reduced motion.

Create

CSS Checkbox Generator

Style a custom checkbox with size, border, and state colors, and copy CSS that keeps a real, keyboard-accessible input underneath.

Create

CSS Switch Generator

Design a pure-CSS toggle switch with track, thumb, and two-state colors, and copy code with focus and reduced-motion handling included.

Create

CSS Clip Path Generator

Edit polygon points by dragging, keyboard or coordinates. Start with four presets and copy a clip-path declaration or full CSS, locally.

Create