Skip to content

css-color-parser: fix hsl and update gamut mapping #1963

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
romainmenke wants to merge 1 commit into
base: main
Choose a base branch
from
Open

css-color-parser: fix hsl and update gamut mapping #1963

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/color-helpers/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# Changes to Color Helpers

### Unreleased (patch)

- Updated the ray-trace gamut mapping algorithm to the current CSS Color 4 specification

### 6.1.2

_September 25, 2026_
Expand Down
5 changes: 3 additions & 2 deletions packages/color-helpers/dist/index.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -260,7 +260,8 @@ function XYZ_to_OKLab(_){const t=multiplyMatrices(i,_);return multiplyMatrices(l
* @license W3C https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
* @copyright This software or document includes material copied from or derived from https://github.com/w3c/csswg-drafts/blob/main/css-color-4/deltaEOK.js. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang).
* @see https://github.com/w3c/csswg-drafts/blob/main/css-color-4/deltaEOK.js
*/function deltaEOK(_,t){const[n,o,e]=_,[r,a,i]=t,l=n-r,u=o-a,c=e-i;return Math.sqrt(l**2+u**2+c**2)}const L=.02,B=1e-4;function mapGamut(_,t,n){const o=_;let e=clip(t(o)),r=deltaEOK(OKLCH_to_OKLab(n(e)),OKLCH_to_OKLab(o));if(r<L)return e;let a=0,i=o[1],l=!0;for(i>0&&!Number.isFinite(i)&&(i=2147483647);i-a>B;){const _=(a+i)/2;if(o[1]=_,l&&inGamut(t(o)))a=_;else if(e=clip(t(o)),r=deltaEOK(OKLCH_to_OKLab(n(e)),OKLCH_to_OKLab(o)),r<L){if(L-r<B)return e;l=!1,a=_}else i=_}return clip(t([...o]))}
*/function deltaEOK(_,t){const[n,o,e]=_,[r,a,i]=t,l=n-r,u=o-a,c=e-i;return Math.sqrt(l**2+u**2+c**2)}const L=.02,B=1e-4;function mapGamut(_,t,n){const o=_;let e=clip(t(o)),r=deltaEOK(OKLCH_to_OKLab(n(e)),OKLCH_to_OKLab(o));if(r<L)return e;let a=0,i=o[1],l=!0;for(i>0&&!Number.isFinite(i)&&(i=2147483647);i-a>B;){const _=(a+i)/2;if(o[1]=_,l&&inGamut(t(o)))a=_;else if(e=clip(t(o)),r=deltaEOK(OKLCH_to_OKLab(n(e)),OKLCH_to_OKLab(o)),r<L){if(L-r<B)return e;l=!1,a=_}else i=_}return clip(t([...o]))}const G=1e-12,P=1-G;
/**
* @license MIT https://github.com/facelessuser/coloraide/blob/main/LICENSE.md
*/function mapGamutRayTrace(_,t,n){const o=_[0],e=_[2];let r=t(_);const a=t([o,0,e]);for(let _=0;_<4;_++){if(_>0){const _=n(r);_[0]=o,_[2]=e,r=t(_)}const i=rayTraceBox(a,r);if(!i)break;r=i}return clip(r)}function rayTraceBox(_,t){let n=1/0,o=-1/0;const e=[0,0,0];for(let r=0;r<3;r++){const a=_[r],i=t[r]-a;e[r]=i;const l=0,u=1;if(Math.abs(i)>1e-12){const _=1/i,t=(l-a)*_,e=(u-a)*_;o=Math.max(Math.min(t,e),o),n=Math.min(Math.max(t,e),n)}else if(a<l||a>u)return!1}return!(o>n||n<0)&&(o<0&&(o=n),!!isFinite(o)&&[_[0]+e[0]*o,_[1]+e[1]*o,_[2]+e[2]*o])}const G={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]};function luminance(_){const[t,n,o]=_.map(_=>_<=.04045?_/12.92:Math.pow((_+.055)/1.055,2.4));return.2126*t+.7152*n+.0722*o}function contrast_ratio_wcag_2_1(_,t){const n=luminance(_),o=luminance(t);return(Math.max(n,o)+.05)/(Math.min(n,o)+.05)}export{HSL_to_XYZ_D50,HSL_to_XYZ_D65,HWB_to_XYZ_D50,HWB_to_XYZ_D65,LCH_to_XYZ_D50,LCH_to_XYZ_D65,Lab_to_XYZ_D50,Lab_to_XYZ_D65,OKLCH_to_OKLab,OKLCH_to_XYZ_D50,OKLCH_to_XYZ_D65,OKLab_to_OKLCH,OKLab_to_XYZ,OKLab_to_XYZ_D50,OKLab_to_XYZ_D65,P3_to_XYZ_D50,P3_to_XYZ_D65,ProPhoto_RGB_to_XYZ_D50,ProPhoto_RGB_to_XYZ_D65,XYZ_D50_to_HSL,XYZ_D50_to_HWB,XYZ_D50_to_LCH,XYZ_D50_to_Lab,XYZ_D50_to_OKLCH,XYZ_D50_to_OKLab,XYZ_D50_to_P3,XYZ_D50_to_ProPhoto,XYZ_D50_to_XYZ_D50,XYZ_D50_to_XYZ_D65,XYZ_D50_to_a98_RGB,XYZ_D50_to_lin_P3,XYZ_D50_to_lin_sRGB,XYZ_D50_to_rec_2020,XYZ_D50_to_sRGB,XYZ_D65_to_HSL,XYZ_D65_to_HWB,XYZ_D65_to_LCH,XYZ_D65_to_Lab,XYZ_D65_to_OKLCH,XYZ_D65_to_OKLab,XYZ_D65_to_P3,XYZ_D65_to_ProPhoto,XYZ_D65_to_XYZ_D50,XYZ_D65_to_XYZ_D65,XYZ_D65_to_a98_RGB,XYZ_D65_to_lin_P3,XYZ_D65_to_lin_sRGB,XYZ_D65_to_rec_2020,XYZ_D65_to_sRGB,XYZ_to_OKLab,XYZ_to_lin_P3,XYZ_to_lin_sRGB,a98_RGB_to_XYZ_D50,a98_RGB_to_XYZ_D65,clip,contrast_ratio_wcag_2_1,gam_P3,gam_sRGB,inGamut,lin_P3,lin_P3_to_XYZ,lin_P3_to_XYZ_D50,lin_P3_to_XYZ_D65,lin_sRGB,lin_sRGB_to_XYZ,lin_sRGB_to_XYZ_D50,lin_sRGB_to_XYZ_D65,mapGamut,mapGamutRayTrace,G as namedColors,rec_2020_to_XYZ_D50,rec_2020_to_XYZ_D65,sRGB_to_XYZ_D50,sRGB_to_XYZ_D65};
*/
function mapGamutRayTrace(_,t,n){const o=_[0],e=_[2];if(o>=1)return clip(t([1,0,0]));if(o<=0)return clip(t([0,0,0]));let r=t(_);if((a=r)[0]>=0&&a[0]<=1&&a[1]>=0&&a[1]<=1&&a[2]>=0&&a[2]<=1)return clip(r);var a;let i=t([o,0,e]),l=r;for(let _=0;_<4;_++){if(_>0){const _=n(r);_[0]=o,_[2]=e,r=t(_)}const a=rayTraceBox(i,r);if(!a){r=l;break}_>0&&inInnerBox(r)&&(i=r),r=a,l=a}return clip(r)}function inInnerBox(_){return _[0]>=G&&_[0]<=P&&_[1]>=G&&_[1]<=P&&_[2]>=G&&_[2]<=P}function rayTraceBox(_,t){let n=1/0,o=-1/0;const e=[0,0,0];for(let r=0;r<3;r++){const a=_[r],i=t[r]-a;e[r]=i;const l=0,u=1;if(Math.abs(i)>1e-12){const _=1/i,t=(l-a)*_,e=(u-a)*_;o=Math.max(Math.min(t,e),o),n=Math.min(Math.max(t,e),n)}else if(a<l||a>u)return!1}return!(o>n||n<0)&&(o<0&&(o=n),!!isFinite(o)&&[_[0]+e[0]*o,_[1]+e[1]*o,_[2]+e[2]*o])}const R={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]};function luminance(_){const[t,n,o]=_.map(_=>_<=.04045?_/12.92:Math.pow((_+.055)/1.055,2.4));return.2126*t+.7152*n+.0722*o}function contrast_ratio_wcag_2_1(_,t){const n=luminance(_),o=luminance(t);return(Math.max(n,o)+.05)/(Math.min(n,o)+.05)}export{HSL_to_XYZ_D50,HSL_to_XYZ_D65,HWB_to_XYZ_D50,HWB_to_XYZ_D65,LCH_to_XYZ_D50,LCH_to_XYZ_D65,Lab_to_XYZ_D50,Lab_to_XYZ_D65,OKLCH_to_OKLab,OKLCH_to_XYZ_D50,OKLCH_to_XYZ_D65,OKLab_to_OKLCH,OKLab_to_XYZ,OKLab_to_XYZ_D50,OKLab_to_XYZ_D65,P3_to_XYZ_D50,P3_to_XYZ_D65,ProPhoto_RGB_to_XYZ_D50,ProPhoto_RGB_to_XYZ_D65,XYZ_D50_to_HSL,XYZ_D50_to_HWB,XYZ_D50_to_LCH,XYZ_D50_to_Lab,XYZ_D50_to_OKLCH,XYZ_D50_to_OKLab,XYZ_D50_to_P3,XYZ_D50_to_ProPhoto,XYZ_D50_to_XYZ_D50,XYZ_D50_to_XYZ_D65,XYZ_D50_to_a98_RGB,XYZ_D50_to_lin_P3,XYZ_D50_to_lin_sRGB,XYZ_D50_to_rec_2020,XYZ_D50_to_sRGB,XYZ_D65_to_HSL,XYZ_D65_to_HWB,XYZ_D65_to_LCH,XYZ_D65_to_Lab,XYZ_D65_to_OKLCH,XYZ_D65_to_OKLab,XYZ_D65_to_P3,XYZ_D65_to_ProPhoto,XYZ_D65_to_XYZ_D50,XYZ_D65_to_XYZ_D65,XYZ_D65_to_a98_RGB,XYZ_D65_to_lin_P3,XYZ_D65_to_lin_sRGB,XYZ_D65_to_rec_2020,XYZ_D65_to_sRGB,XYZ_to_OKLab,XYZ_to_lin_P3,XYZ_to_lin_sRGB,a98_RGB_to_XYZ_D50,a98_RGB_to_XYZ_D65,clip,contrast_ratio_wcag_2_1,gam_P3,gam_sRGB,inGamut,lin_P3,lin_P3_to_XYZ,lin_P3_to_XYZ_D50,lin_P3_to_XYZ_D65,lin_sRGB,lin_sRGB_to_XYZ,lin_sRGB_to_XYZ_D50,lin_sRGB_to_XYZ_D65,mapGamut,mapGamutRayTrace,R as namedColors,rec_2020_to_XYZ_D50,rec_2020_to_XYZ_D65,sRGB_to_XYZ_D50,sRGB_to_XYZ_D65};
64 changes: 51 additions & 13 deletions packages/color-helpers/src/calculations/map-gamut-ray-trace.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@
import { clip } from '../utils/clip';
import type { Color } from '../types/color';

const LOW = 1e-12;
const HIGH = 1 - LOW;

/**
* @license MIT https://github.com/facelessuser/coloraide/blob/main/LICENSE.md
*/
Expand All @@ -25,39 +28,75 @@ export function mapGamutRayTrace(
const lightness = startOKLCH[0];
const hue = startOKLCH[2];

// 2. Convert the input color to the closest matching linear RGB space
// 2. Handle colors at the lightness endpoints.
if (lightness >= 1) {
return clip(toLinear([1, 0, 0]));
}

if (lightness <= 0) {
return clip(toLinear([0, 0, 0]));
}

// 3. Convert the input color to the closest matching linear RGB space
let linear = toLinear(startOKLCH);
// 3. Calculate an achromatic version of the color (in OKLCH) and convert it to the same linear RGB space
const achromatic = toLinear([lightness, 0, hue]);

// 4. Perform up to 4 iterations to find the closest color in gamut
// 4. Colors that are already in gamut do not need to be traced.
if (inLinearGamut(linear)) {
return clip(linear);
}

// 5. Calculate an achromatic version of the color (in OKLCH) and convert it to the same linear RGB space
let achromatic = toLinear([lightness, 0, hue]);

// 6. Perform up to 4 iterations to find the closest color in gamut
let last = linear;
for (let i = 0; i < 4; i++) {
// 4.1. On subsequent iterations, we correct the lightness and hue
// 6.1. On subsequent iterations, we correct the lightness and hue
if (i > 0) {
// 4.1.1. Convert the current color back to OKLCH
// 6.1.1. Convert the current color back to OKLCH
const oklch = fromLinear(linear);
// 4.1.2. Correct the lightness and hue
// 6.1.2. Correct the lightness and hue
oklch[0] = lightness;
oklch[2] = hue;
// 4.1.3. Convert the corrected color back to linear RGB
// 6.1.3. Convert the corrected color back to linear RGB
linear = toLinear(oklch);
}

// 4.2 Perform a raytrace to find the intersection of the line between the achromatic and the current color
// 6.2. Perform a raytrace to find the intersection of the line between the achromatic and the current color
const intersection = rayTraceBox(achromatic, linear);
// 4.3 If no intersection is found, we are already in gamut

// 6.3. If no intersection is found, restore the previous intersection
if (!intersection) {
linear = last;
break;
}

// 4.4 Assign the intersection to the current color
// 6.4. Move the anchor when the current color is inside the inner box
if (i > 0 && inInnerBox(linear)) {
achromatic = linear;
}

// 6.5. Assign the intersection to the current color
linear = intersection;
last = intersection;
}

// 5. Clip the result to account for floating point errors
// 7. Clip the result to account for floating point errors
return clip(linear);
}

function inLinearGamut(color: Color): boolean {
return color[0] >= 0 && color[0] <= 1 &&
color[1] >= 0 && color[1] <= 1 &&
color[2] >= 0 && color[2] <= 1;
}

function inInnerBox(color: Color): boolean {
return color[0] >= LOW && color[0] <= HIGH &&
color[1] >= LOW && color[1] <= HIGH &&
color[2] >= LOW && color[2] <= HIGH;
}

function rayTraceBox(start: Color, end: Color): Color | false {
let tfar = Infinity;
let tnear = -Infinity;
Expand Down Expand Up @@ -93,7 +132,6 @@ function rayTraceBox(start: Color, end: Color): Color | false {
tnear = tfar;
}

// A point, or something approaching a single point where start and end are the same.
if (!isFinite(tnear)) {
return false;
}
Expand Down
4 changes: 4 additions & 0 deletions packages/css-color-parser/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# Changes to CSS Color Parser

### Unreleased (patch)

- Fix `hsl()` clamping to match CSS Color 4: only negative saturation is clamped at parse time, including in the legacy comma-separated syntax

### 4.2.7

_October 29, 2026_
Expand Down
2 changes: 1 addition & 1 deletion packages/css-color-parser/dist/index.mjs
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 6 additions & 2 deletions packages/css-color-parser/src/functions/hsl-normalize-channel-values.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,10 @@ export function normalize_legacy_HSL_ChannelValues(token: CSSToken, index: numbe
let value;
if (index === 3) {
value = normalize(token[4].value, 100, 0, 1);
} else if (index === 1) {
value = normalize(token[4].value, 1, 0, VALUE_FOR_POSITIVE_INFINITY);
} else {
value = normalize(token[4].value, 1, 0, 100);
value = normalize(token[4].value, 1, VALUE_FOR_NEGATIVE_INFINITY, VALUE_FOR_POSITIVE_INFINITY);
}

return [
Expand All @@ -55,8 +57,10 @@ export function normalize_legacy_HSL_ChannelValues(token: CSSToken, index: numbe
let value;
if (index === 3) {
value = normalize(token[4].value, 1, 0, 1);
} else if (index === 1) {
value = normalize(token[4].value, 1, 0, VALUE_FOR_POSITIVE_INFINITY);
} else {
value = normalize(token[4].value, 1, 0, 100);
value = normalize(token[4].value, 1, VALUE_FOR_NEGATIVE_INFINITY, VALUE_FOR_POSITIVE_INFINITY);
}

return [
Expand Down
Loading
Loading