I don't actually know how to program I just ask @FransAris
Public
Edited
Mar 19
1 fork
2 stars
color_block(hex_to_color(input_color))
hue = 90
color_block(stupid_hue_rotate(hue, hex_to_color(input_color)))
Colors = import("https://colorjs.io/dist/color.js").then((x) => x.default)
c = new Colors(input_color)
c.lch.h
c.sepia
new Colors("#000").lch.h
hue_rotate_box(hue, color_block(hex_to_color(input_color)))
htl.html`
<div style="display: flex; flex-direction: row">
${color_block(
multiply_color(hex_to_color(input_color), firefox_hue_rotate_matrix(hue))
)}
${color_block(stupid_hue_rotate(hue, hex_to_color(input_color)))}
${color_block(
multiply_color(hex_to_color(input_color), hue_rotate_color_chrome(hue))
)}
${hue_rotate_box(hue, color_block(hex_to_color(input_color)))}
${color_block(hex_to_color(input_color))}
</div>
`
identity = (x) => x
hue_rotate_color_chrome(hue)
firefox_hue_rotate_matrix(hue)
result
// rgb = hexToRgb(input_color)
/// WTF!!! How does just using the p3 values here suddenly work??
/// ...... I Guess Chrome is sneakily doing p3 somewhere?
rgb = new Colors(input_color).p3.map((x) => x * 255)
multiply_color
md`
`
filters_to_color = (filters) => {
// Argument is array of percentages.
const color = new Color();
color.set(0, 0, 0);
color.invert(filters[0] / 100);
color.sepia(filters[1] / 100);
color.saturate(filters[2] / 100);
color.hueRotate(filters[3] * 3.6);
color.brightness(filters[4] / 100);
color.contrast(filters[5] / 100);
return color;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
