Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
Farb-Mixer
Dieses Werkzeug ermöglicht es Ihnen, zwei Farben in jedem Farbraum mit der color-mix() Funktion zu mischen und die resultierende Farbe in jedem CSS-Farbformat zu kopieren.
Die beiden Eingabefarben, color-one und color-two, werden außen angezeigt, und die von der Funktion zurückgegebene gemischte Farbe wird in der Mitte angezeigt. Klicken Sie auf die äußeren Muster, um neue Farben zum Mischen auszuwählen. Verwenden Sie die Schieberegler, um die Prozentsätze jeder Eingabefarbe im Mix zu ändern. Nutzen Sie das Dropdown-Menü, um den Farbraum der Ausgabe der Funktion zu ändern. Die Werte der resultierenden Farbe in verschiedenen Formaten erscheinen in einer Tabelle nach dem Widget und können kopiert werden. Sie können auch auf einen Farbnamen klicken, um mehr über ihn zu erfahren.
<div id="color-mixer">
<div>color-one</div>
<div>mixed-color</div>
<div>color-two</div>
<div id="color-background">
<button
id="color-one"
type="button"
class="color-one"
aria-label="Open the color one picker dialog"></button>
<div id="mixed-color"></div>
<button
id="color-two"
type="button"
class="color-two"
aria-label="Open the color two picker dialog"></button>
</div>
<div>
<label
id="percentage-one-label"
for="percentage-one"
aria-label="color one percentage">
50%
</label>
<input id="percentage-one" type="range" name="percent1" step="0.01" />
</div>
<div>
<label
id="percentage-two-label"
for="percentage-two"
aria-label="color two percentage">
50%
</label>
<input id="percentage-two" type="range" name="percent2" step="0.01" />
</div>
<label for="color-space">Color space: </label>
<select id="color-space">
<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 id="interpolation-method-label" for="interpolation-method">
Hue interpolation method:
</label>
<select id="interpolation-method">
<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 id="mix-output-text"></div>
<dialog id="picker-dialog">
<div>Pick a color</div>
<table>
<tbody>
<tr>
<td><label for="color-text">Enter color:</label></td>
<td><input type="text" id="color-text" value="#bada55" /></td>
</tr>
<tr>
<td><label for="color-input">Pick color:</label></td>
<td><input type="color" id="color-input" value="#bada55" /></td>
</tr>
<tr>
<td><label for="color-opacity">Select an opacity:</label></td>
<td>
<input
type="range"
id="color-opacity"
value="1"
min="0"
max="1"
step="0.01" />
</td>
</tr>
</tbody>
</table>
<div><button id="picker-ok-button">Ok</button></div>
</dialog>
</div>
<hr />
<table id="output-colors">
<caption>
Mixed color in different formats:
</caption>
<tbody>
<tr id="rgb-function">
<th>
<a
href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/rgb"
target="_blank">
RGB
</a>
</th>
<td><button id="copy-rgb-button">Copy</button><span></span></td>
</tr>
<tr id="hex">
<th>
<a
href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/hex-color"
target="_blank"
>HEX</a
>
</th>
<td><button id="copy-hex-button">Copy</button><span></span></td>
</tr>
<tr id="hsl-function">
<th>
<a
href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/hsl"
target="_blank">
HSL
</a>
</th>
<td><button id="copy-hsl-button">Copy</button><span></span></td>
</tr>
<tr id="hwb-function">
<th>
<a
href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/hwb"
target="_blank">
HWB
</a>
</th>
<td><button id="copy-hwb-button">Copy</button><span></span></td>
</tr>
<tr id="color-function">
<th>
<a
href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/color"
target="_blank">
color()
</a>
</th>
<td><button id="copy-color-button">Copy</button><span></span></td>
</tr>
<tr id="lab-function">
<th>
<a
href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/lab"
target="_blank">
Lab
</a>
</th>
<td><button id="copy-lab-button">Copy</button><span></span></td>
</tr>
<tr id="lch-function">
<th>
<a
href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/lch"
target="_blank">
LCH
</a>
</th>
<td><button id="copy-lch-button">Copy</button><span></span></td>
</tr>
<tr id="oklab-function">
<th>
<a
href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklab"
target="_blank">
Oklab
</a>
</th>
<td><button id="copy-oklab-button">Copy</button><span></span></td>
</tr>
<tr id="oklch-function">
<th>
<a
href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch"
target="_blank">
OkLCh
</a>
</th>
<td><button id="copy-oklch-button">Copy</button><span></span></td>
</tr>
<tr id="xyz-d50-function">
<th>
<a
href="https://developer.mozilla.org/en-US/docs/Glossary/Color_space#xyz-d50"
target="_blank">
XYZ D50
</a>
</th>
<td><button id="copy-xyz-d50-button">Copy</button><span></span></td>
</tr>
<tr id="xyz-d65-function">
<th>
<a
href="https://developer.mozilla.org/en-US/docs/Glossary/Color_space#xyz"
target="_blank">
XYZ D65
</a>
</th>
<td><button id="copy-xyz-d65-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 elements
const 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 spans
const 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.html
const 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.html
const 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();