fpetrakov / convert-to-oklch Goto Github PK

CLI tool that converts rgb(), rgba(), hex, hsl() and hsla() colors to oklch() in specified CSS files.

License: MIT License

JavaScript 98.35% Shell 1.65%

convert-to-oklch's Introduction

convert-to-oklch

CLI tool that converts rgb(), rgba(), hex, hsl() and hsla() colors to oklch() in specified CSS files.

npx convert-to-oklch ./src/**/*.css

.header {
- background: rgb(102, 173, 221);
+ background: oklch(72% 0.1 239.8);
}

oklch() provides better readability since it uses lightness, chroma, and hue components (closer to how people think and work with colors) instead of “magic tokens” like #4287f5. In contrast with hsl(), OKLCH has no issues with contrast and a11y.

Don’t forget to add postcss-preset-env to PostCSS to have oklch() polyfill.

Precision of conversion

After conversion, the value of each color component is rounded:

- oklch(60.66305848755579% 0.11082513148527705 250.4762110872339 / 0.4)
+ oklch(60.7% 0.11 250 / 0.4)

// l - up to 1 digit after the decimal point
// c - up to 3 digits after the decimal point
// h - up to 1 digit after the decimal point

You can also specify precision of color conversion by using -p or --precision option. Available values are 1-21 inclusive.

Conversion is done with colorjs package by Lea Verou.

npx convert-to-oklch ./src/*.css -p 2

Custom properties

Colors that contain custom properties inside are ignored:

a {
  color: rgb(102, 173, 221, var(--opacity));
}

In this case the color will not be converted.

convert-to-oklch's People

Contributors

Stargazers

Watchers

Forkers

zaooa belzecue frank-topel-dbi

convert-to-oklch's Issues

Certain hsl values result in NaN in converted stylesheets when converted to oklch

Input file:

:root {
  --dbi--color--brand-1: hsl(213.3, 14.3%, 87.6%);
  --dbi--color--brand-2: hsl(212.1, 14.9%, 63.1%);
  --dbi--color--brand-3: hsl(213.2, 23.9%, 38.6%);
  --dbi--color--brand-4: hsl(212.1, 23.7%, 23.1%);

  --dbi--color--blue-1: hsl(204.4, 36%, 85.3%);
  --dbi--color--blue-2: hsl(204, 35.4%, 55.7%);
  --dbi--color--blue-3: hsl(203.9, 100%, 26.1%);
  --dbi--color--blue-4: hsl(204, 100%, 15.7%);

  --dbi--color--grey-1: hsl(0, 0%, 93.3%);
  --dbi--color--grey-2: hsl(0, 0%, 86.7%);
  --dbi--color--grey-3: hsl(0, 0%, 73.3%);
  --dbi--color--grey-4: hsl(0, 0%, 40%);
  --dbi--color--grey-5: hsl(0, 0%, 20%);

  --dbi--color--green-1: hsl(150, 22.5%, 84.3%);
  --dbi--color--green-2: hsl(151.2, 21.7%, 52.9%);
  --dbi--color--green-3: hsl(151.7, 79.8%, 21.4%);
  --dbi--color--green-4: hsl(151.2, 78.8%, 12.9%);

  --dbi--color--red-1: hsl(348, 61.4%, 88.8%);
  --dbi--color--red-2: hsl(348, 60.7%, 66.1%);
  --dbi--color--red-3: hsl(348, 79.2%, 43.3%);
  --dbi--color--red-4: hsl(348, 78.9%, 26.1%);

  --dbi--color--brown-1: hsl(0, 20.3%, 74.9%);
  --dbi--color--brown-2: hsl(0, 18.2%, 44.1%);

  --dbi--color--orange-1: hsl(35.5, 100%, 85.1%);
  --dbi--color--orange-2: hsl(36.1, 100%, 67.5%);
  --dbi--color--orange-3: hsl(36, 100%, 50%);
  --dbi--color--orange-4: hsl(36.1, 100%, 30%);

  --dbi--color--purple-1: hsl(330.6, 100%, 90%);
  --dbi--color--purple-2: hsl(329.6, 33.1%, 52%);

  --dbi--color--violet-1: hsl(269.4, 100%, 90%);
  --dbi--color--violet-2: hsl(279.8, 59.8%, 60%);

  --dbi--color--yellow-1: hsl(60, 100%, 84.9%);
  --dbi--color--yellow-2: hsl(47.9, 100%, 60%);

  --dbi--color--black: hsl(0, 0%, 0%);
  --dbi--color--white: hsl(0, 0%, 100%);
}

Output file:

:root {
  --dbi--color--brand-1: oklch(90.2% 0.008 253.8);
  --dbi--color--brand-2: oklch(70% 0.027 251.9);
  --dbi--color--brand-3: oklch(48.2% 0.049 254.1);
  --dbi--color--brand-4: oklch(34.3% 0.031 252.3);

  --dbi--color--blue-1: oklch(88.6% 0.023 237.6);
  --dbi--color--blue-2: oklch(65.1% 0.071 238.5);
  --dbi--color--blue-3: oklch(42% 0.11 247);
  --dbi--color--blue-4: oklch(29.9% 0.075 244.8);

  --dbi--color--grey-1: oklch(94.9% 0 NaN);
  --dbi--color--grey-2: oklch(89.8% 0 NaN);
  --dbi--color--grey-3: oklch(79.2% 0 NaN);
  --dbi--color--grey-4: oklch(51% 0 NaN);
  --dbi--color--grey-5: oklch(32.1% 0 NaN);

  --dbi--color--green-1: oklch(89.1% 0.023 164.5);
  --dbi--color--green-2: oklch(66.5% 0.067 163.1);
  --dbi--color--green-3: oklch(43.8% 0.102 155.9);
  --dbi--color--green-4: oklch(31.2% 0.069 156.8);

  --dbi--color--red-1: oklch(89.2% 0.04 4.4);
  --dbi--color--red-2: oklch(68.4% 0.132 8.5);
  --dbi--color--red-3: oklch(53.1% 0.202 19);
  --dbi--color--red-4: oklch(36.9% 0.137 17.6);

  --dbi--color--brown-1: oklch(78.6% 0.03 17.8);
  --dbi--color--brown-2: oklch(51.8% 0.054 19.1);

  --dbi--color--orange-1: oklch(92.1% 0.068 76.9);
  --dbi--color--orange-2: oklch(84.1% 0.138 75.1);
  --dbi--color--orange-3: oklch(77.2% 0.174 64.6);
  --dbi--color--orange-4: oklch(53.2% 0.118 66.5);

  --dbi--color--purple-1: oklch(89.7% 0.066 347.5);
  --dbi--color--purple-2: oklch(58.2% 0.116 349.6);

  --dbi--color--violet-1: oklch(88.2% 0.074 307.1);
  --dbi--color--violet-2: oklch(62.1% 0.19 312.8);

  --dbi--color--yellow-1: oklch(98.2% 0.097 108.1);
  --dbi--color--yellow-2: oklch(88.6% 0.17 93.6);

  --dbi--color--black: oklch(0% 0 NaN);
  --dbi--color--white: oklch(100% 0 NaN);
}

Lightness not converted to a percentage

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.

Use different precision for different color component

1% of L, C, and H are different. So we should not have the same precision for every component.

I suggest:

Use x,x for L
x,xxx for C
x,x for H

fpetrakov / convert-to-oklch Goto Github PK

convert-to-oklch's Introduction

convert-to-oklch

Precision of conversion

Custom properties

More

convert-to-oklch's People

Contributors

Stargazers

Watchers

Forkers

convert-to-oklch's Issues

Certain hsl values result in NaN in converted stylesheets when converted to oklch

Lightness not converted to a percentage

Use different precision for different color component

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent