Color blending
Blend two colors and compare the math.
Mix two colors by weight across RGB, hue-aware HSL, Lab, and OKLab, compare the results side by side, and copy the model that fits the job.
Free color utility
Color Mixer
Inputs update live, exports are copy-ready, and the color math stays deterministic.
Quick start
Starter presets
Start with a realistic setup, then adjust any input and watch the result update.
Valid input example: #4169E1 mixed with #FFD166 at 50%
If input is invalid: Invalid or incomplete color values are identified at the field, announced, and explained in the result area so they can be corrected without guesswork.
Choose a preset or edit the controls directly.
Blend
Production color mix
Instructions
- Enter the two colors you want to blend or use Random pair for a new starting point.
- Use Swap to reverse Color A and Color B without retyping values.
- Adjust the A weight slider to control how much of Color A appears in the mix.
- Choose the mixing mode that matches the job, then compare the other interpolation results before shipping.
- Copy CSS, JSON, token-style output, or a handoff summary for palettes and design-system notes.
#A09DA4 is ready as Default sRGB CSS mix output.
Use color-mix(in srgb, #4169E1 50%, #FFD166 50%) for live CSS handoff, and keep #A09DA4 as the resolved fallback. Mode choice matters compared with the other interpolation modes.
Results
Interpolation modes
Standard sRGB channel mixing. Useful for predictable CSS handoff.
Selected modecolor-mix(in srgb, #4169E1 50%, #FFD166 50%)
Hue-aware polar mixing. Useful for playful hue bridges, but can shift lightness.
74.78 dE from selectedcolor-mix(in hsl shorter hue, #4169E1 50%, #FFD166 50%)
Perceptual-ish mixing. Useful when visual lightness should feel smoother.
11.14 dE from selectedcolor-mix(in lab, #4169E1 50%, #FFD166 50%)
Modern perceptual mixing. A strong option for UI ramps and design-system blends.
7.39 dE from selectedcolor-mix(in oklab, #4169E1 50%, #FFD166 50%)
Methodology and guides
How this tool calculates and connects.
Review the formulas, assumptions, edge cases, validation checks, caveats, and related color guidance behind Color Mixer.
Methodology pages
Related guides
How it fits
From two colors to a controlled blend.
Blend two source colors by weight, compare how interpolation models change the result, and select an output that matches the intended production behavior.
Choose the mixing model
Compare RGB, hue-aware HSL, Lab, and OKLab because the path between the same endpoints can produce visibly different midpoints.
Control the contribution
Adjust the mix weight and review every model side by side before treating one blended color as the chosen result.
Free sharing
Color mixes can be bookmarked and shared without an account, making results easy to revisit.
Quick overview
Hue Codex Color Mixer is a free browser-based tool that blends two concrete CSS colors by weight and compares RGB, hue-aware HSL, Lab, and OKLab mixing results. It accepts alpha-capable HEX, RGB, HSL, HWB, Lab/LCH, OKLab/OKLCH, supported color() values, fixed color names, and transparent; translucent sources are mixed with premultiplied alpha. The tool exports a resolved HEX-alpha fallback and copy-ready CSS color-mix() syntax.
- Use the color mixer to blend two concrete CSS color values and compare four interpolation models at once.
- The A weight slider controls the balance between Color A and Color B, from 0% A to 100% A.
- RGB, HSL, Lab, and OKLab can produce noticeably different middle colors from the same pair.
- CSS color-mix() output is included for the currently selected mode and weight.
- Mixed colors still need contrast and gamut checks before production use.
What the Hue Codex color mixer does
The Hue Codex color mixer blends two concrete CSS colors using a selected interpolation mode and weight. It previews RGB, hue-aware HSL, Lab, and OKLab results side by side, so differences between color spaces and alpha handling are easy to compare.
The tool is useful when you need a middle color between two brand colors, a hover state between two UI roles, a bridge color for a gradient, or a quick way to see why one blend method feels dull while another feels balanced.
A color mixer is a tool that calculates a new color between two input colors. The result depends on the mix ratio and the color space used for interpolation.
Color blending models compared
Different blending models describe the path between Color A and Color B in different ways. That path determines the final mixed HEX value, especially when the colors are far apart in hue, lightness, or saturation.
| Mode | How it mixes | When it helps |
|---|---|---|
| RGB | Interpolates red, green, and blue channel values directly. | Useful for simple digital blending and quick channel-based comparisons. |
| HSL hue-aware | Interpolates hue along the shortest hue path and blends saturation and lightness. | Useful when hue direction matters and you want a more color-wheel-like transition. |
| Lab | Interpolates in CIE Lab, a perceptual color space based on lightness and opponent color axes. | Useful when you want a blend that better respects perceived lightness differences. |
| OKLab | Interpolates in OKLab, a modern perceptual color space designed for smoother visual color changes. | Useful for UI palettes, gradients, and color roles where visual balance matters. |
| CSS color-mix() | Exports the selected mode and weight as a CSS color-mix() declaration. | Useful when the blend should stay adjustable in code instead of becoming only a static HEX value. |
How mix weight works
The A weight slider controls how much Color A contributes to the result. At 100% A, the mix is Color A. At 0% A, the mix is Color B. At 50% A, both colors contribute equally, but the visual midpoint still depends on the selected blending model.
Hue Codex also shows the complementary percentage for Color B in the copied output, making it easier to document a mix such as 35% A and 65% B.
- Move the slider toward Color A to make the result closer to the first input.
- Move the slider toward Color B to make the result closer to the second input.
- Use 50% for a midpoint, then compare RGB, HSL, Lab, and OKLab before deciding which result belongs in the palette.
Best uses for a color mixer
Color mixing is most helpful when a design needs a deliberate relationship between two colors rather than a random new swatch. Comparing blend models gives you more control over the final look.
Palette bridges
Create an intermediate swatch between two existing palette colors for charts, scales, or expanded brand systems.
Gradient stops
Test middle colors before placing them in a gradient, especially when RGB interpolation creates muddy transitions.
UI states
Blend an accent color with a surface color to explore hover, selected, disabled, or pressed states.
Color-role documentation
Copy the HEX result and CSS color-mix() syntax so the relationship between source colors remains clear.
Production caveats
A mixed color is not automatically accessible, in gamut for every output, or visually correct for every context. After choosing a blend, check contrast for text, review the color on the intended background, and confirm the result still fits the palette.
CSS color-mix() support depends on the browser and the selected color space. Keep a static HEX fallback when older browser support or exact cross-platform rendering is important.
Quick answers
Color Mixer FAQ
What is the Hue Codex color mixer?
Hue Codex Color Mixer is a free browser-based tool for blending two concrete CSS colors by weight and comparing RGB, hue-aware HSL, Lab, and OKLab results side by side.
What does A weight mean in the color mixer?
A weight is the percentage of Color A used in the mix. For example, 70% A means the result is closer to Color A, while the remaining 30% comes from Color B.
Why do RGB, HSL, Lab, and OKLab mixes look different?
Each mode interpolates colors through a different color space. RGB mixes channels, HSL follows hue and lightness values, Lab uses perceptual lightness and opponent axes, and OKLab is designed for smoother modern perceptual blending.
Does this color mixer create CSS color-mix() code?
Yes. The output includes CSS color-mix() syntax for the selected mode, input colors, and mix weight, along with the computed HEX result.
Which color mixing mode should I use?
Use RGB for simple channel blends, HSL when hue direction matters, and Lab or OKLab when visual balance and perceived lightness are more important. Compare the previews before choosing a production color.
Can I use the mixed color for accessible text?
Only after checking contrast. A color can be a good blend and still fail as text on a particular background, so test the mixed result with a contrast checker before using it for copy or UI labels.
Can I swap the two colors?
Yes. The mixer includes a swap control for quickly reversing Color A and Color B while keeping the same weight and blend mode workflow.
Can I copy the color mixer results?
Yes. The tool exports the input colors, A/B weight, selected mode, HEX result, CSS color-mix() syntax, and the side-by-side model comparison.