While attempting to convert css files containing hex
, hsl
, and rgb
color spaces to oklch
, I found in each instance only the C and H components were successfully converted.
L (lightness) failed to convert to a percentile value. The command used was:
npx convert-to-oklch ./colours/*.css -p 2
Convert-to-oklch version:- 1.2.7
Below is a small sampling (Before/After). As you will see, Lightness converted only to a decimal value, such as used in the lch
colorspace; visually, the colours seem consistent.
Conversion to a percentage value, required for the oklch
colorspace has not been performed:
HEX Colorspace:
# Before conversion
.hex_amethyst { color: color: #9966cc; }
.hex_android-green { color: #a4c639; }
.hex_antique-brass { color: #cd9575; }
.hex_antique-fuchsia { color: #915c83; }
.hex_apple-green { color: #8db600; }
.hex_apricot { color: #fbceb1; }
# After conversion
.hex_amethyst { color: oklch(0.6 0.2 310); }
.hex_android-green { color: oklch(0.8 0.2 120); }
.hex_antique-brass { color: oklch(0.7 0.1 51); }
.hex_antique-fuchsia { color: oklch(0.5 0.1 340); }
.hex_apple-green { color: oklch(0.7 0.2 120); }
.hex_apricot { color: oklch(0.9 0.1 54); }
HSL Colorspace:
# Before conversion
.hsl_amethyst { color: hsl(270, 50%, 60%); }
.hsl_android-green { color: hsl(74.5, 55.3%, 50%); }
.hsl_antique-brass { color: hsl(21.8, 46.8%, 63.1%); }
.hsl_antique-fuchsia { color: hsl(315.8, 22.4%, 46.5%); }
.hsl_apple-green { color: hsl(73.5, 100%, 35.7%); }
.hsl_apricot { color: hsl(23.5, 90.2%, 83.9%); }
# After conversion
.hsl_amethyst { color: oklch(0.6 0.2 310); }
.hsl_android-green { color: oklch(0.8 0.2 120); }
.hsl_antique-brass { color: oklch(0.7 0.1 51); }
.hsl_antique-fuchsia { color: oklch(0.5 0.1 340); }
.hsl_apple-green { color: oklch(0.7 0.2 120); }
.hsl_apricot { color: oklch(0.9 0.1 54); }
RGB Colorspace:
# Before conversion
.rgb_amethyst { color: rgb(153, 102, 204); }
.rgb_android-green { color: rgb(164, 198, 57); }
.rgb_antique-brass { color: rgb(205, 149, 117); }
.rgb_antique-fuchsia { color: rgb(145, 92, 131); }
.rgb_apple-green { color: rgb(141, 182, 0); }
.rgb_apricot { color: rgb(251, 206, 177); }
# After conversion
.rgb_amethyst { color: oklch(0.6 0.2 310); }
.rgb_android-green { color: oklch(0.8 0.2 120); }
.rgb_antique-brass { color: oklch(0.7 0.1 51); }
.rgb_antique-fuchsia { color: oklch(0.5 0.1 340); }
.rgb_apple-green { color: oklch(0.7 0.2 120); }
.rgb_apricot { color: oklch(0.9 0.1 54); }
I hope this brief description is sufficient to correct the issue. Thanks.