Color mixer
This tool lets you mix two colors in any color space using thecolor-mix() function and copy the resulting color in any CSS color format.
The two input colors,color-one andcolor-two, are shown on the outside, and the mixed color returned by the function is shown in the middle. Click the outer swatches to select new colors to mix. Use the sliders to change the percentages of each input color included in the mix. Use the drop-down menu to change the color space of the function's output. The resulting color's values in different formats appear in a table following the widget and can be copied. You can also click a color format name to learn more about it.
<div> <div>color-one</div> <div>mixed-color</div> <div>color-two</div> <div> <button type="button" aria-label="Open the color one picker dialog"></button> <div></div> <button type="button" aria-label="Open the color two picker dialog"></button> </div> <div> <label for="percentage-one" aria-label="color one percentage"> 50% </label> <input type="range" name="percent1" step="0.01" /> </div> <div> <label for="percentage-two" aria-label="color two percentage"> 50% </label> <input type="range" name="percent2" step="0.01" /> </div> <label for="color-space">Color space: </label> <select> <option value="srgb">sRGB</option> <option value="srgb-linear">sRGB-linear</option> <option value="hsl">HSL</option> <option value="hwb">HWB</option> <option value="lab">Lab</option> <option value="lch">LCH</option> <option value="oklab" selected>Oklab</option> <option value="oklch">OkLCh</option> <option value="xyz-d50">XYZ-D50</option> <option value="xyz-d65">XYZ-D65</option> </select> <label for="interpolation-method"> Hue interpolation method: </label> <select> <option value="shorter hue" selected>shorter hue</option> <option value="longer hue">longer hue</option> <option value="increasing hue">increasing hue</option> <option value="decreasing hue">decreasing hue</option> </select> <div></div> <dialog> <div>Pick a color</div> <table> <tr> <td><label for="color-text">Enter color:</label></td> <td><input type="text" value="#bada55" /></td> </tr> <tr> <td><label for="color-input">Pick color:</label></td> <td><input type="color" value="#bada55" /></td> </tr> <tr> <td><label for="color-opacity">Select an opacity:</label></td> <td> <input type="range" value="1" min="0" max="1" step="0.01" /> </td> </tr> </table> <div><button>Ok</button></div> </dialog></div><hr /><table> <caption> Mixed color in different formats: </caption> <tbody> <tr> <th> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb" > RGB </a> </th> <td><button>Copy</button><span></span></td> </tr> <tr> <th> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color" >HEX</a > </th> <td><button>Copy</button><span></span></td> </tr> <tr> <th> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl" > HSL </a> </th> <td><button>Copy</button><span></span></td> </tr> <tr> <th> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hwb" > HWB </a> </th> <td><button>Copy</button><span></span></td> </tr> <tr> <th> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color" > color() </a> </th> <td><button>Copy</button><span></span></td> </tr> <tr> <th> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lab" > Lab </a> </th> <td><button>Copy</button><span></span></td> </tr> <tr> <th> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lch" > LCH </a> </th> <td><button>Copy</button><span></span></td> </tr> <tr> <th> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklab" > Oklab </a> </th> <td><button>Copy</button><span></span></td> </tr> <tr> <th> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch" > OkLCh </a> </th> <td><button>Copy</button><span></span></td> </tr> <tr> <th> <a href="https://developer.mozilla.org/en-US/docs/Glossary/Color_space#xyz-d50" > XYZ D50 </a> </th> <td><button>Copy</button><span></span></td> </tr> <tr> <th> <a href="https://developer.mozilla.org/en-US/docs/Glossary/Color_space#xyz" > XYZ D65 </a> </th> <td><button>Copy</button><span></span></td> </tr> </tbody></table>#picker-dialog[open] { position: fixed; top: 30%; z-index: 100; padding: 1rem; width: 70vw; background: #dddddd; display: flex; flex-flow: column; align-items: center;}#picker-dialog #color-opacity { width: 200px;}#picker-dialog > div:first-child { font-weight: bold; margin-bottom: 1rem;}#picker-dialog > div { width: max-content; margin: 0.4rem auto; white-space: nowrap;}#picker-dialog #color-text { width: 200px;}#picker-dialog label { margin: 1rem 0;}#picker-dialog button { width: 100px; margin-top: 1rem;}dialog#picker-dialog table { width: fit-content;}#color-mixer { margin: 0.5rem; font-family: sans-serif; display: grid; grid-template-columns: 150px 1fr 1fr 150px; grid-template-areas: "color-one-label mix-label mix-label color-two-label" "color-background color-background color-background color-background" "percent-one percent-one percent-two percent-two" "color-space-label color-space interpolation-label interpolation" "mix-output-text mix-output-text mix-output-text mix-output-text";}#color-mixer > * { padding: 0; margin: 0 auto;}#color-mixer > :nth-child(1) { grid-area: color-one-label;}#color-mixer > :nth-child(2) { grid-area: mix-label;}#color-mixer > :nth-child(3) { grid-area: color-two-label;}#color-mixer > :nth-child(4) { grid-area: color-background; background: linear-gradient( 0deg, transparent 0 38%, 47%, rgb(0 0 0 / 0.7) 50%, white 50% 100% ), conic-gradient( black 0 90deg, transparent 90deg 180deg, black 180deg 270deg, transparent 270deg 360deg ); background-size: 100% 100%, 20px 20px; display: flex; align-items: center; margin: 0; padding: 0; border-radius: 10%;}#color-one { height: 100px; flex: 1 1 100%; border-radius: 20% 0 0 20%; cursor: pointer; border: none; z-index: 1; box-shadow: -5px 5px 5px grey; background-color: coral;}#mixed-color { flex: 2 0.7 100%; height: 100px;}#color-two { height: 100px; flex: 1 1 100%; border-radius: 0 20% 20% 0; cursor: pointer; border: none; z-index: 1; box-shadow: 5px 5px 5px grey; background-color: cyan;}#color-mixer > :nth-child(5) { grid-area: percent-one; width: 100%; display: flex;}#percentage-one-label,#percentage-two-label { width: 2rem; text-align: end;}#color-mixer > :nth-child(6) { grid-area: percent-two; width: 100%; display: flex;}#color-mixer > :nth-child(7) { grid-area: color-space-label; margin: 0.5rem 0 0 auto;}#color-mixer > :nth-child(8) { grid-area: color-space; margin: 0.5rem auto 0 1rem;}#color-mixer > :nth-child(9) { grid-area: interpolation-label; margin: 0.5rem 0 0 auto;}#color-mixer > :nth-child(10) { grid-area: interpolation; margin: 0.5rem auto 0 1rem;}#color-mixer > :nth-child(11) { grid-area: mix-output-text; margin: 1rem 0; padding: 1rem 0; text-align: center; background-color: #dfdfde; font-family: monospace;}input[type="range"] { width: 80%;}label { margin: 1rem;}*:focus { outline: 2px dashed purple; outline-offset: 1px;}table { width: 100%;}caption { font-family: sans-serif;}th { padding: 5px 15px; background-color: #ededed;}td { background-color: #dedede; font-family: monospace; padding: 5px;}#output-colors th { padding-right: 0; width: 20%;}#output-colors td button { margin-right: 0.4rem;}const root = document.querySelector(":root");const colorSpace = document.getElementById("color-space");const interpolationMethod = document.getElementById("interpolation-method");const interpolationMethodLabel = document.getElementById( "interpolation-method-label",);const colorOneButton = document.getElementById("color-one");const colorTwoButton = document.getElementById("color-two");const mixedColorDiv = document.getElementById("mixed-color");const mixedOutputText = document.getElementById("mix-output-text");const percentageOneLabel = document.getElementById("percentage-one-label");const percentageTwoLabel = document.getElementById("percentage-two-label");const percentageOneSlider = document.getElementById("percentage-one");const percentageTwoSlider = document.getElementById("percentage-two");// pop up dialog elementsconst pickerDialog = document.getElementById("picker-dialog");const colorTextInput = document.getElementById("color-text");const colorInput = document.getElementById("color-input");const colorOpacitySlider = document.getElementById("color-opacity");const pickerOkButton = document.getElementById("picker-ok-button");// color output spansconst hexOutput = document.querySelector("#hex td > span");const colorFunctionOutput = document.querySelector("#color-function td > span");const rgbFunctionOutput = document.querySelector("#rgb-function td > span");const hslFunctionOutput = document.querySelector("#hsl-function td > span");const hwbFunctionOutput = document.querySelector("#hwb-function td > span");const labFunctionOutput = document.querySelector("#lab-function td > span");const oklabFunctionOutput = document.querySelector("#oklab-function td > span");const lchFunctionOutput = document.querySelector("#lch-function td > span");const oklchFunctionOutput = document.querySelector("#oklch-function td > span");const xyzD50FunctionOutput = document.querySelector( "#xyz-d50-function td > span",);const xyzD65FunctionOutput = document.querySelector( "#xyz-d65-function td > span",);const LRGB_LMS_MATRIX = [ [0.4122214708, 0.5363325363, 0.0514459929], [0.2119034982, 0.6806995451, 0.1073969566], [0.0883024619, 0.2817188376, 0.6299787005],];const LMS_LAB_MATRIX = [ [+0.2104542553, +0.793617785, -0.0040720468], [+1.9779984951, -2.428592205, +0.4505937099], [+0.0259040371, +0.7827717662, -0.808675766],];// srgb-linear to xyz-d50// matrix taken from http://www.brucelindbloom.com/index.html?Eqn_RGB_to_XYZ.htmlconst LRGB_XYZ_D50_MATRIX = [ [0.4360747, 0.3850649, 0.1430804], [0.2225045, 0.7168786, 0.0606169], [0.0139322, 0.0971045, 0.7141733],];// srgb-linear to xyz-d65// matrix taken from http://www.brucelindbloom.com/index.html?Eqn_RGB_to_XYZ.htmlconst LRGB_XYZ_D65_MATRIX = [ [0.4124564, 0.3575761, 0.1804375], [0.2126729, 0.7151522, 0.072175], [0.0193339, 0.119192, 0.9503041],];const polarColorSpaces = ["hsl", "hwb", "lch", "oklch"];const colorOne = { r: 255, g: 127, b: 80, alpha: 1.0 };const colorTwo = { r: 0, g: 255, b: 255, alpha: 1.0 };let currentColor = null;function rgbToLinear(c) { return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;}function intToHex(i) { return Math.floor(i).toString(16).padStart(2, "0").toLowerCase();}function rgbToHEXText(c) { return `#${intToHex(c.r)}${intToHex(c.g)}${intToHex(c.b)}`;}function colorToRGBA(c) { const ctx = new OffscreenCanvas(1, 1).getContext("2d"); ctx.fillStyle = c; ctx.fillRect(0, 0, 1, 1); const data = ctx.getImageData(0, 0, 1, 1).data; return { r: data[0], g: data[1], b: data[2], alpha: data[3] / 255, };}function multiplyByMatrix(matrix, tuple) { let i = [0, 0, 0]; let j = matrix.length; let k = matrix[0].length; for (let l = 0; l < j; l++) for (let m = 0; m < k; m++) i[l] += matrix[l][m] * tuple[m]; return i;}function rgbaToHEXAText(color) { const hexText = rgbToHEXText(color); if (color.alpha === 1.0) { return hexText; } const alpha = intToHex(color.alpha * 255); return `${hexText}${alpha}`;}function rgbaToHSLA(color) { let { r, g, b, alpha } = color; // Let's have r, g, b in the range [0, 1] r /= 255; g /= 255; b /= 255; const min = Math.min(r, g, b); const max = Math.max(r, g, b); const delta = max - min; let h, s, l; if (delta === 0) { h = 0; } else if (max === r) { h = ((g - b) / delta) % 6; } else if (max === g) { h = (b - r) / delta + 2; } else h = (r - g) / delta + 4; h = Math.round(h * 60); // We want an angle between 0 and 360° if (h < 0) { h += 360; } l = (max + min) / 2; s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)); s = Number((s * 100).toFixed(1)); l = Number((l * 100).toFixed(1)); return { h, s, l, alpha };}function toHSLAText(color) { const { h, s, l, alpha } = rgbaToHSLA(color); return `hsl(${h.toFixed(0)} ${s.toFixed(0)}% ${l.toFixed(0)}%${ alpha < 1.0 ? ` / ${alpha.toFixed(3)}` : "" })`;}function rgbaToHWBAText(color) { let { h, s, l, alpha } = rgbaToHSLA(color); const chroma = s * (1 - Math.abs(l / 50 - 1)); let W = (l - chroma / 2).toFixed(0); let B = (100 - l - chroma / 2).toFixed(0); return `hwb(${h} ${W}% ${B}%${alpha < 1.0 ? ` / ${alpha.toFixed(3)}` : ""})`;}function rgbaToXYZD50(color) { let { r, g, b, alpha } = color; r = rgbToLinear(r / 255) * 255; g = rgbToLinear(g / 255) * 255; b = rgbToLinear(b / 255) * 255; const xyz = multiplyByMatrix(LRGB_XYZ_D50_MATRIX, [r, g, b]); return { x: xyz[0] / 255, y: xyz[1] / 255, z: xyz[2] / 255, alpha };}function rgbaToXYZD50Text(color) { let { alpha } = color; const xyz = rgbaToXYZD50(color); return `color(xyz-d50 ${xyz.x.toFixed(5)} ${xyz.y.toFixed(5)} ${xyz.z.toFixed( 5, )}${alpha < 1.0 ? ` / ${alpha.toFixed(3)}` : ""})`;}function rgbaToXYZD65(color) { let { r, g, b, alpha } = color; r = rgbToLinear(r / 255) * 255; g = rgbToLinear(g / 255) * 255; b = rgbToLinear(b / 255) * 255; const xyz = multiplyByMatrix(LRGB_XYZ_D65_MATRIX, [r, g, b]); return { x: xyz[0] / 255, y: xyz[1] / 255, z: xyz[2] / 255, alpha };}function rgbaToXYZD65Text(color) { let { alpha } = color; const xyz = rgbaToXYZD65(color); return `color(xyz-d65 ${xyz.x.toFixed(5)} ${xyz.y.toFixed(5)} ${xyz.z.toFixed( 5, )}${alpha < 1.0 ? ` / ${alpha.toFixed(3)}` : ""})`;}const D65 = [0.3457 / 0.3585, 1, 0.2958 / 0.3585];function xyzToLab(color) { let { x, y, z, alpha } = color; [x, y, z] = [x, y, z].map((v, i) => { v /= D65[i]; return v > 0.0088564516 ? Math.cbrt(v) : v * 903.2962962962963 + 16 / 116; }); return { l: 116 * y - 16, a: 500 * (x - y), b: 200 * (y - z), alpha };}function rgbaToLabText(color) { let { alpha } = color; const xyz = rgbaToXYZD50(color); const lab = xyzToLab(xyz); return `lab(${lab.l.toFixed(3)} ${lab.a.toFixed(3)} ${lab.b.toFixed(3)}${ alpha < 1.0 ? ` / ${alpha.toFixed(3)}` : "" })`;}function rgbToOklab(color) { let { r, g, b, alpha } = color; r = rgbToLinear(r / 255); g = rgbToLinear(g / 255); b = rgbToLinear(b / 255); const lms = multiplyByMatrix(LRGB_LMS_MATRIX, [r, g, b]).map((v) => Math.cbrt(v), ); const oklab = multiplyByMatrix(LMS_LAB_MATRIX, lms); return { l: oklab[0], a: oklab[1], b: oklab[2], alpha };}function toOkLabText(color) { let { alpha } = color; const oklab = rgbToOklab(color); return `oklab(${oklab.l.toFixed(5)} ${oklab.a.toFixed(5)} ${oklab.b.toFixed( 5, )}${alpha < 1.0 ? ` / ${alpha.toFixed(3)}` : ""})`;}function labToLCH(color) { const { l, a, b, alpha } = color; const c = Math.sqrt(a * a + b * b); let h = Math.atan2(b, a) * (180 / Math.PI); if (h < 0) { h += 360; } return { l, c, h, alpha };}function toLCHText(color) { let { alpha } = color; const xyz = rgbaToXYZD50(color); const lab = xyzToLab(xyz); const lch = labToLCH(lab); return `lch(${lch.l.toFixed(3)} ${lch.c.toFixed(3)} ${lch.h.toFixed(3)}${ alpha < 1.0 ? ` / ${alpha.toFixed(3)}` : "" })`;}function rgbaToOkLCh(color) { const lab = rgbToOklab(color); const oklch = labToLCH(lab); return { l: oklch.l, c: oklch.c, h: oklch.h, alpha: color.alpha };}function toOkLChText(color) { let { alpha } = color; const oklch = rgbaToOkLCh(color); return `oklch(${oklch.l.toFixed(5)} ${oklch.c.toFixed(5)} ${oklch.h.toFixed( 5, )}${alpha < 1.0 ? ` / ${alpha.toFixed(3)}` : ""})`;}function updateColorMix() { let colorMixFunction = "color-mix(in "; root.style.setProperty("--color-space", colorSpace.value); colorMixFunction += colorSpace.value; if (polarColorSpaces.includes(colorSpace.value)) { root.style.setProperty("--interpolation-method", interpolationMethod.value); colorMixFunction += ` ${interpolationMethod.value}, `; } else { root.style.setProperty("--interpolation-method", ""); colorMixFunction += `, `; } root.style.setProperty( "--color-one", colorOneButton.style.getPropertyValue("background-color"), ); root.style.setProperty("--percentage-one", `${percentageOneSlider.value}%`); colorMixFunction += `${rgbaToHEXAText(colorOne)} ${ percentageOneSlider.value }%, `; root.style.setProperty( "--color-two", colorTwoButton.style.getPropertyValue("background-color"), ); root.style.setProperty("--percentage-two", `${percentageTwoSlider.value}%`); colorMixFunction += `${rgbaToHEXAText(colorTwo)} ${ percentageTwoSlider.value }%)`; mixedColorDiv.style.setProperty("background-color", colorMixFunction); mixedOutputText.innerText = colorMixFunction; displayOutputColors(window.getComputedStyle(mixedColorDiv).backgroundColor);}function displayOutputColors(color) { let rgbaColor = colorToRGBA(color); hexOutput.innerText = rgbaToHEXAText(rgbaColor); rgbFunctionOutput.innerText = `rgb(${Math.round(rgbaColor.r)} ${Math.round( rgbaColor.g, )} ${Math.round(rgbaColor.b)}`; if (rgbaColor.alpha && rgbaColor.alpha < 1.0) { rgbFunctionOutput.innerText += ` / ${rgbaColor.alpha.toFixed(3)}`; } rgbFunctionOutput.innerText += `)`; colorFunctionOutput.innerText = `color(srgb ${(rgbaColor.r / 255).toFixed( 3, )} ${(rgbaColor.g / 255).toFixed(3)} ${(rgbaColor.b / 255).toFixed(3)}`; if (rgbaColor.alpha && rgbaColor.alpha < 1.0) { colorFunctionOutput.innerText += ` / ${rgbaColor.alpha.toFixed(3)}`; } colorFunctionOutput.innerText += `)`; hslFunctionOutput.innerText = toHSLAText(rgbaColor); hwbFunctionOutput.innerText = rgbaToHWBAText(rgbaColor); labFunctionOutput.innerText = rgbaToLabText(rgbaColor); xyzD50FunctionOutput.innerText = rgbaToXYZD50Text(rgbaColor); xyzD65FunctionOutput.innerText = rgbaToXYZD65Text(rgbaColor); lchFunctionOutput.innerText = toLCHText(rgbaColor); oklabFunctionOutput.innerText = toOkLabText(rgbaColor); oklchFunctionOutput.innerText = toOkLChText(rgbaColor);}function setColorToDialog() { colorTextInput.value = rgbaToHEXAText(currentColor); colorInput.value = rgbToHEXText(currentColor); colorOpacitySlider.value = currentColor.alpha;}function init() { percentageOneSlider.addEventListener("input", (e) => { percentageOneLabel.innerText = `${e.target.value}%`; updateColorMix(); }); percentageTwoSlider.addEventListener("input", (e) => { percentageTwoLabel.innerText = `${e.target.value}%`; updateColorMix(); }); colorSpace.addEventListener("change", (e) => { if (polarColorSpaces.includes(e.target.value)) { interpolationMethod.style.visibility = "visible"; interpolationMethodLabel.style.visibility = "visible"; } else { interpolationMethod.style.visibility = "hidden"; interpolationMethodLabel.style.visibility = "hidden"; } updateColorMix(); }); interpolationMethod.addEventListener("change", () => { updateColorMix(); }); interpolationMethod.style.visibility = "hidden"; interpolationMethodLabel.style.visibility = "hidden"; colorOneButton.addEventListener("click", () => { currentColor = colorOne; setColorToDialog(); pickerDialog.showModal(); }); colorTwoButton.addEventListener("click", () => { currentColor = colorTwo; setColorToDialog(); pickerDialog.showModal(); }); colorTextInput.addEventListener("input", (e) => { const color = colorToRGBA(e.target.value); Object.assign(currentColor, color); colorInput.value = rgbToHEXText(currentColor); colorOpacitySlider.value = currentColor.alpha; }); colorInput.addEventListener("input", (e) => { const text = e.target.value; currentColor.r = parseInt(text.slice(1, 3), 16); currentColor.g = parseInt(text.slice(3, 5), 16); currentColor.b = parseInt(text.slice(5, 7), 16); colorTextInput.value = rgbaToHEXAText(currentColor); colorOpacitySlider.value = currentColor.alpha; }); colorOpacitySlider.addEventListener("input", (e) => { const value = parseFloat(e.target.value); if (value >= 0 && value <= 1) { currentColor.alpha = value; colorTextInput.value = rgbaToHEXAText(currentColor); } }); pickerOkButton.addEventListener("click", () => { colorOneButton.style.setProperty( "background-color", rgbaToHEXAText(colorOne), ); colorTwoButton.style.setProperty( "background-color", rgbaToHEXAText(colorTwo), ); pickerDialog.close(); updateColorMix(); }); document.querySelectorAll("#output-colors button").forEach((button) => { button.addEventListener("click", (e) => { const text = e.target.nextElementSibling.innerText; navigator.clipboard.writeText(text); e.target.innerText = "Copied!"; setTimeout(() => { e.target.innerText = "Copy"; }, 1000); }); }); updateColorMix();}init();