add hex output (#1251)

csstools · Jan 18, 2024 · c8197c0 · c8197c0
1 parent 31683b2
commit c8197c0
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/sites/postcss-preset-env/blog/postcss-color-mix-function.md b/sites/postcss-preset-env/blog/postcss-color-mix-function.md
@@ -64,6 +64,7 @@ Try it out in this interactive demo that showcases with a Venn diagram how color
 </div>
 
 <output id="output-color-mix-css" for="color-space interpolation-method color-mix-percentage color-a color-b">color-mix(in srgb, #ff0000, #0000ff 50%)</output>
+<output id="output-color-hex" for="color-space interpolation-method color-mix-percentage color-a color-b">#800080</output>
 
 Definitely check out the [awesome blog post by Una on color-mix](https://una.im/color-mix-opacity/). It showcases a similar widget but purely using native `color-mix()`, so it's a great way to compare the two.
 
@@ -194,7 +195,8 @@ After `color-mix()` we will focus on bringing relative color syntax to PostCSS P
 		z-index: 6;
 	}
 
-	#output-color-mix-css {
+	#output-color-mix-css,
+	#output-color-hex {
 		background-color: #263238;
 		border-radius: 3px;
 		border: 1px solid grey;

diff --git a/sites/postcss-preset-env/src/static/js/blog_color_mix_2023_03_27.js b/sites/postcss-preset-env/src/static/js/blog_color_mix_2023_03_27.js
@@ -8,6 +8,7 @@ const colorSpaceInput = document.getElementById('color-space');
 const interpolationMethodInput = document.getElementById('interpolation-method');
 const colorMixOutput = document.getElementById('output-color-mix');
 const colorMixOutputCSS = document.getElementById('output-color-mix-css');
+const colorHexOutput = document.getElementById('output-color-hex');
 const colorMixPercentage = document.getElementById('color-mix-percentage');
 const colorInputA = document.getElementById('color-a');
 const colorOutputA = document.getElementById('output-color-a');
@@ -81,7 +82,6 @@ function renderResult() {
 	colorMixOutputCSS.value = colorMix;
 
 	const parsedColorValue = color(parseComponentValue(tokenize({ css: colorMix })));
-
 	if (!parsedColorValue) {
 		colorMixOutput.style.outline = '1px solid rgb(255 0 0 / 25%)';
 		return;
@@ -99,6 +99,9 @@ function renderResult() {
 		colorMixOutput.value = outputColorValueRGB;
 		colorMixOutput.style.setProperty('--color', outputColorValueRGB);
 	}
+
+	const [r, , , g, , , b] = outputColorValueRGB.value; // r, g, b -> <number><comma><space><number><comma><space><number><comma><space>
+	colorHexOutput.value = '#' + (1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1);
 }
 
 colorMixPercentage.addEventListener('input', handleSliderInput);