Add colour-get-oklch operator

core/modules/filters/colour-ops.js

@@ -15,11 +15,19 @@ Filter operators for colour operations
 var Color = require("$:/core/modules/utils/dom/color.js").Color;
 
 exports["colour-lighten"] = makeSerialColourOperator(function (colour, operator, options) {
-	return colour.lighten($tw.utils.parseNumber(operator.operand));
+	return colour.lighten($tw.utils.parseNumber(operator.operand)).display().toString();
 });
 
 exports["colour-darken"] = makeSerialColourOperator(function (colour, operator, options) {
-	return colour.darken($tw.utils.parseNumber(operator.operand));
+	return colour.darken($tw.utils.parseNumber(operator.operand)).display().toString();
+});
+
+exports["colour-get-oklch"] = makeSerialColourOperator(function (colour, operator, options) {
+	var prop = ((operator.suffixes || [])[0] || ["l"])[0];
+	if(["l","c","h"].indexOf(prop) !== -1) {
+		colour = colour.oklch[prop];
+	}
+	return colour.toString();
 });
 
 exports["colour-set-oklch"] = makeSerialColourOperator(function (colour, operator, options) {
@@ -27,7 +35,7 @@ exports["colour-set-oklch"] = makeSerialColourOperator(function (colour, operato
 	if(["l","c","h"].indexOf(prop) !== -1) {
 		colour.oklch[prop] = $tw.utils.parseNumber(operator.operand);
 	}
-	return colour;
+	return colour.display().toString();
 });
 
 exports["colour-contrast"] = makeParallelColourOperator(function (colours, operator, options) {
@@ -51,7 +59,7 @@ function makeSerialColourOperator(fn) {
 			var c = $tw.utils.parseCSSColorObject(title);
 			if (c) {
 				c = fn(c, operator, options);
-				results.push(c.display().toString());
+				results.push(c);
 			} else {
 				results.push("");
 			}

editions/test/tiddlers/tests/data/operators/colour/ColourGetOklch.tid

@@ -0,0 +1,21 @@
+title: Operators/Colour/ColourOklchL
+description: colour-set-oklch function
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\parsermode inline
+<$text text={{{ [subfilter{Filter}] }}}/>
++
+title: Filter
+
+=[[#5778d8]colour-get-oklch[]]
+=[[#5778d8]colour-get-oklch:l[]]
+=[[#5778d8]colour-get-oklch:c[]]
+=[[#5778d8]colour-get-oklch:h[]]
++[fixed[3]join[,]]
++
+title: ExpectedResult
+
+0.595,0.595,0.151,267.432

editions/tw5.com/tiddlers/filters/colour-get-oklch.tid

@@ -0,0 +1,33 @@
+created: 20241117161528913
+modified: 20241117161528913
+tags: [[Filter Operators]] [[Colour Operators]]
+title: colour-get-oklch Operator
+caption: colour-get-oklch
+op-purpose: retrieve components of colour values in the OKLCH colour space
+op-input: a selection of colour values
+op-suffix: "l", "c" or "h" to indicate which component of the colour to retrieve
+op-output: the values of the specified component of the input colours
+
+<<.from-version "5.3.7">> See [[Colour Palettes]] for background.
+
+The <<.op colour-get-oklch>> operator is used to retrieve components of colour values in the [[OKLCH|https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch]] colour space. The OKLCH colour space expresses colours as three numbers:
+
+|!Id |!Name |!Range |
+|l |Lightness |0 – 1 |
+|c |Chroma |0 – 0.4 |
+|h |Hue |0 – 360 |
+
+The advantage of the OKLCH space is that it is perceptually uniform, meaning that equal changes in the numbers correspond to equal changes in the perceived colour.
+
+For example, this filter expression will get the lightness of the colour current page background colour:
+
+```
+[function[colour],[page-background]colour-get-oklch:l[]]
+```
+
+See also the following related operators:
+
+* <<.olink colour-set-oklch>> to modify a component of a colour value in the OKLCH colour space
+* <<.olink colour-lighten>> to lighten a colour value
+* <<.olink colour-darken>> to lighten a colour value
+