Color parse Tests

These tests parse different color formats and compare the result as JSON.

sRGB colors

blue {"spaceId":"srgb","coords":[0,0,1],"alpha":1}
transparent {"spaceId":"srgb","coords":[0,0,0],"alpha":0}
#ff0066 {"spaceId":"srgb","coords":[1,0,0.4],"alpha":1}
#f06 {"spaceId":"srgb","coords":[1,0,0.4],"alpha":1}
#ff006688 {"spaceId":"srgb","coords":[1,0,0.4],"alpha":0.5333333333333333}
#f068 {"spaceId":"srgb","coords":[1,0,0.4],"alpha":0.5333333333333333}
rgba(0% 50% 200% / 0.5) {"spaceId":"srgb","coords":[0,0.5,2],"alpha":0.5}
rgb(0 127.5 300 / .5) {"spaceId":"srgb","coords":[0,0.5,1.1764705882352942],"alpha":0.5}
rgba(0, 127.5, 300, 0.5) {"spaceId":"srgb","coords":[0,0.5,1.1764705882352942],"alpha":0.5}
rgb(10deg 10 10) TypeError

Lab and LCH colors

lab(100% 0 0) {"spaceId":"lab","coords":[100,0,0],"alpha":1}
Lab(100% 0 0) {"spaceId":"lab","coords":[100,0,0],"alpha":1}
lab(80 0 0) {"spaceId":"lab","coords":[80,0,0],"alpha":1}
lab(100 -50 50) {"spaceId":"lab","coords":[100,-50,50],"alpha":1}
lab(50% 25% -25% / 50%) {"spaceId":"lab","coords":[50,31.25,-31.25],"alpha":0.5}
lab(100 -50 5 / .5) {"spaceId":"lab","coords":[100,-50,5],"alpha":0.5}
lch(100% 0 0) {"spaceId":"lch","coords":[100,0,0],"alpha":1}
lch(100 50 50) {"spaceId":"lch","coords":[100,50,50],"alpha":1}
lch(50% 50% 50 / 50%) {"spaceId":"lch","coords":[50,75,50],"alpha":0.5}
lch(100 50 450) {"spaceId":"lch","coords":[100,50,450],"alpha":1}
lch(100 0 none) {"spaceId":"lch","coords":[100,0,null],"alpha":1}

Oklab colors

oklab(100% 0 0) {"spaceId":"oklab","coords":[1,0,0],"alpha":1}
oklab(100% 0 0 / 0.5) {"spaceId":"oklab","coords":[1,0,0],"alpha":0.5}
OKLab(100% 0 0) {"spaceId":"oklab","coords":[1,0,0],"alpha":1}
oklab(42% 100% -50%) {"spaceId":"oklab","coords":[0.42,0.4,-0.2],"alpha":1}
oklab(1 -0.20 0.20) {"spaceId":"oklab","coords":[1,-0.2,0.2],"alpha":1}
oklab(10 -0.80 0.80) {"spaceId":"oklab","coords":[10,-0.8,0.8],"alpha":1}

Oklch colors

oklch(100% 0 0) {"spaceId":"oklch","coords":[1,0,0],"alpha":1}
oklch(100% 0 0 / 50%) {"spaceId":"oklch","coords":[1,0,0],"alpha":0.5}
OKLch(100% 0 0) {"spaceId":"oklch","coords":[1,0,0],"alpha":1}
oklch(1 0.2 50) {"spaceId":"oklch","coords":[1,0.2,50],"alpha":1}
oklch(10 2 500 / 10) {"spaceId":"oklch","coords":[10,2,500],"alpha":1}
oklch(100% 50% 50) {"spaceId":"oklch","coords":[1,0.2,50],"alpha":1}
oklch(100% 150% 50) {"spaceId":"oklch","coords":[1,0.6000000000000001,50],"alpha":1}
oklch(100% 0 30deg) {"spaceId":"oklch","coords":[1,0,30],"alpha":1}
oklch(1 0 none) {"spaceId":"oklch","coords":[1,0,null],"alpha":1}
oklch(1 0 120 / none) {"spaceId":"oklch","coords":[1,0,120],"alpha":null}

color()

color(srgb 0 1 .5) {"spaceId":"srgb","coords":[0,1,0.5],"alpha":1}
color(srgb 0 100% 50%) {"spaceId":"srgb","coords":[0,1,0.5],"alpha":1}
color(srgb-linear 0 1 .5) {"spaceId":"srgb-linear","coords":[0,1,0.5],"alpha":1}
color(srgb-linear 0 100% 50%) {"spaceId":"srgb-linear","coords":[0,1,0.5],"alpha":1}
color(display-p3 0 1 .5) {"spaceId":"p3","coords":[0,1,0.5],"alpha":1}
color(display-p3 0% 100% 50%) {"spaceId":"p3","coords":[0,1,0.5],"alpha":1}
color(rec2020 0 1 .5) {"spaceId":"rec2020","coords":[0,1,0.5],"alpha":1}
color(rec2020 0 100% 50%) {"spaceId":"rec2020","coords":[0,1,0.5],"alpha":1}
color(a98-rgb 0 1 .5) {"spaceId":"a98rgb","coords":[0,1,0.5],"alpha":1}
color(a98-rgb 0 100% 50%) {"spaceId":"a98rgb","coords":[0,1,0.5],"alpha":1}
color(prophoto-rgb 0 1 .5) {"spaceId":"prophoto","coords":[0,1,0.5],"alpha":1}
color(prophoto-rgb 0 100% 50%) {"spaceId":"prophoto","coords":[0,1,0.5],"alpha":1}
color(acescc 0 1 .5) {"spaceId":"acescc","coords":[0,1,0.5],"alpha":1}
color(acescc 0 100% 50%) {"spaceId":"acescc","coords":[0,1,0.5],"alpha":1}
color(acescg 0 1 .5) {"spaceId":"acescg","coords":[0,1,0.5],"alpha":1}
color(acescg 0 100% 50%) {"spaceId":"acescg","coords":[0,1,0.5],"alpha":1}
color(xyz 0 1 .5) {"spaceId":"xyz-d65","coords":[0,1,0.5],"alpha":1}
color(xyz 0 100% 50%) {"spaceId":"xyz-d65","coords":[0,1,0.5],"alpha":1}
color(xyz-d65 0 1 .5) {"spaceId":"xyz-d65","coords":[0,1,0.5],"alpha":1}
color(xyz-d65 0 100% 50%) {"spaceId":"xyz-d65","coords":[0,1,0.5],"alpha":1}
color(xyz-d50 0 1 .5) {"spaceId":"xyz-d50","coords":[0,1,0.5],"alpha":1}
color(xyz-d50 0 100% 50%) {"spaceId":"xyz-d50","coords":[0,1,0.5],"alpha":1}
color(jzazbz 0 25% -50%) {"spaceId":"jzazbz","coords":[0,0.125,-0.25],"alpha":1}
color(--jzazbz 0 25% -50%) {"spaceId":"jzazbz","coords":[0,0.125,-0.25],"alpha":1}
color(--hct 0.25turn 50% 25) {"spaceId":"hct","coords":[90,72.5,25],"alpha":1}
color(display-p3 0 1 0 / .5) {"spaceId":"p3","coords":[0,1,0],"alpha":0.5}
color(display-p3) {"spaceId":"p3","coords":[0,0,0],"alpha":1}
color(display-p3 / .5) {"spaceId":"p3","coords":[0,0,0],"alpha":0.5}
color(display-p3 1) {"spaceId":"p3","coords":[1,0,0],"alpha":1}
color(display-p3 1 / .5) {"spaceId":"p3","coords":[1,0,0],"alpha":0.5}
color(display-p3 none 1 .5) {"spaceId":"p3","coords":[null,1,0.5],"alpha":1}

hsl()

hsl(180, 50%, 50%) {"spaceId":"hsl","coords":[180,50,50],"alpha":1}
hsl(-180, 50%, 50%) {"spaceId":"hsl","coords":[-180,50,50],"alpha":1}
hsl(900, 50%, 50%) {"spaceId":"hsl","coords":[900,50,50],"alpha":1}
hsl(90deg 0% 0% / .5) {"spaceId":"hsl","coords":[90,0,0],"alpha":0.5}
hsl(1.5707963267948966rad 0% 0% / .5) {"spaceId":"hsl","coords":[90,0,0],"alpha":0.5}
hsl(100grad 0% 0% / .5) {"spaceId":"hsl","coords":[90,0,0],"alpha":0.5}
hsl(0.25turn 0% 0% / .5) {"spaceId":"hsl","coords":[90,0,0],"alpha":0.5}
hsl(none 0% 0% / .5) {"spaceId":"hsl","coords":[null,0,0],"alpha":0.5}
hsl(230.6 179.7% 37.56% / 1) {"spaceId":"hsl","coords":[230.6,179.7,37.56],"alpha":1}
hsl(none, 50%, 50%) {"spaceId":"hsl","coords":[null,50,50],"alpha":1}

hwb()

hwb(180 20% 30%) {"spaceId":"hwb","coords":[180,20,30],"alpha":1}
hwb(none 20% 30%) {"spaceId":"hwb","coords":[null,20,30],"alpha":1}