Palette bridges
Create an intermediate swatch between two existing palette colors for charts, scales, or expanded brand systems.
Color blending
Free color mixer for comparing blend models.
Blend two HEX colors by weight, compare RGB, hue-aware HSL, Lab, and OKLab interpolation, then copy the selected HEX result or CSS color-mix() syntax. Hue Codex shows every model side by side so you can choose the mix that looks right for palettes, gradients, UI states, and brand color work.
Free color utility
Color Mixer
Inputs update live, exports are copy-ready, and the color math stays deterministic.
Blend
Mix two colors
Instructions
- Enter the two colors you want to blend.
- 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 a mixing mode, then copy the resulting color output for palettes, CSS, or color roles.
How it fits
From color value to usable system.
Hue Codex treats each color as part of a larger workflow: conversion, accessibility, palette roles, CSS syntax, shareable URLs, and production exports.
Deterministic math
Color conversion follows CSS Color 4 conventions, including D50 Lab/LCH, D65 OKLab/OKLCH, and WCAG contrast thresholds.
Readable outputs
Every result is formatted for clear reading, project notes, documentation, and assistive technology.
Free sharing
Palette URLs can be bookmarked and sent without an account, making color decisions easy to revisit.
Quick overview
Hue Codex Color Mixer is a free browser-based tool that blends two HEX colors by weight and compares RGB, hue-aware HSL, Lab, and OKLab mixing results. It shows how each interpolation model changes the mixed color and exports copy-ready HEX and CSS color-mix() output.
- Use the color mixer to blend two HEX 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 HEX colors using a selected interpolation mode and weight. It previews RGB, hue-aware HSL, Lab, and OKLab results side by side, so the differences between color spaces 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.
Color mixer definition
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.
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 HEX 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.