Spectral.js is a powerful and versatile JavaScript library designed to deliver realistic color mixing in your web-based projects. By harnessing the power of the Kubelka-Munk theory, a robust scientific model that simulates light interaction with paint for true-to-life color mixing, Spectral.js ensures that your projects exhibit vibrant and authentic colors.
Employing 7 distinct spectral channels, including White, Cyan, Magenta, Yellow, Red, Green, and Blue, Spectral.js can be effectively utilized across a diverse array of web-based projects, such as:
Embrace the flexibility and precision that Spectral.js offers and transform your projects with an extensive and vibrant color palette that mimics real-world color interactions.
If you use this library please let me know! I would love to see what you do with it.
Getting started with Spectral.js is easy. Simply include the library in your project, and you're ready to go.
Install via npm:
npm install spectral.js
Include the following script in your HTML:
<script src="https://github.com/rvanwijnen/spectral.js/raw/main/spectral.js"></script>
The spectral.mix function takes 3 parameters: color1, color2, and mix factor, with an optional 4th parameter for the return format. It mixes the two colors based on the factor, and calculates the new color. The return format can be spectral.RGB, spectral.RGBA, spectral.HEXA, or spectral.HEX (default).
let color = spectral.mix('#00357B', '#D79900', 0.5);
let color = spectral.mix('rgb(0, 33, 133)', 'rgb(215, 153, 0)', 0.5);
let color = spectral.mix('[0, 33, 133]', '[215, 153, 0]', 0.5, spectral.RGB);
The spectral.palette function takes 3 required parameters: color1, color2, and length, and an optional fourth parameter for the return format. It returns an array of colors that gradually transition from color1 to color2 with the specified length.
let palette = spectral.palette('#00357B', '#F0F0F0', 9);
let palette = spectral.palette('rgb(0, 53, 123)', 'rgb(240, 240, 240)', 9);
let palette = spectral.palette('[0, 53, 123]', '[240, 240, 240]', 9, spectral.RGB);
Spectral.js supports GLSL shaders and has a built-in function 'spectral.glsl_color()' to conveniently convert color notation to an array for the shader. Use webgl2 if you can for better precision.
let fragment = `
precision highp float;
#include "spectral.glsl"
uniform vec2 u_resolution;
uniform vec4 u_color1;
uniform vec4 u_color2;
void main() {
vec2 st = gl_FragCoord.xy / u_resolution.xy;
st.y = 1.0 - st.y;
vec4 col = spectral_mix(u_color1, u_color2, st.x);
gl_FragColor = col;
}
`;
fragment = fragment.replace('#include "spectral.glsl"', spectral.glsl());
We welcome contributions from the community. If you find a bug or have a feature request, please open an issue on Github.
It's taken me a lot of time to research and make real life paint mixing available in an easy to use library. If you like this project and want me to keep working on it or appreciate the work I've done please consider buying me a coffee.
Spectral.js is released under the MIT License. See the LICENSE file for details.