culori

import { converter, rgb, oklch, interpolate, inGamut, clampGamut } from 'culori'; // 1. Convert colors between different color spaces const parse = converter(); // Creates a universal color parser/converter const redRgbString = 'rgb(255, 0, 0)'; const redOklch = parse(redRgbString, 'oklch'); console.log(`Red in Oklch: { l: ${redOklch.l.toFixed(3)}, c: ${redOklch.c.toFixed(3)}, h: ${redOklch.h?.toFixed(2) || 'N/A'} }`); // 2. Interpolate between two colors in the Oklch space const color1 = { mode: 'oklch', l: 0.5, c: 0.1, h: 60 }; // Yellow-ish const color2 = { mode: 'oklch', l: 0.8, c: 0.15, h: 280 }; // Purple-ish const interpolateOklch = interpolate([color1, color2], 'oklch'); const midColor = interpolateOklch(0.5); // Get the color at 50% interpolation console.log(`Interpolated mid-color (Oklch): { l: ${midColor.l.toFixed(3)}, c: ${midColor.c.toFixed(3)}, h: ${midColor.h?.toFixed(2) || 'N/A'} }`); // 3. Check if a color is within a specific gamut (e.g., sRGB) const brightGreen = { mode: 'rgb', r: 0, g: 1.5, b: 0.5 }; // Out of gamut const isBrightGreenInSrgb = inGamut('rgb')(brightGreen); console.log(`Is bright green {r:0, g:1.5, b:0.5} in sRGB gamut? ${isBrightGreenInSrgb}`); // 4. Clamp a color to a specific gamut (sRGB) const clampedGreen = clampGamut('rgb')(brightGreen); console.log(`Clamped green to sRGB: rgb(${Math.round(clampedGreen.r * 255)}, ${Math.round(clampedGreen.g * 255)}, ${Math.round(clampedGreen.b * 255)})`); // 5. Create an Oklch color and convert it to an sRGB string for CSS output const cssBlue = oklch(70, 0.15, 240); // A light blue Oklch color const toRgbString = converter('rgb'); // Get a converter that outputs RGB objects const cssBlueRgb = toRgbString(cssBlue); const cssOutput = `rgb(${Math.round(cssBlueRgb.r * 255)}, ${Math.round(cssBlueRgb.g * 255)}, ${Math.round(cssBlueRgb.b * 255)})`; console.log(`Oklch color ${JSON.stringify(cssBlue)} as CSS RGB string: ${cssOutput}`);