CSS Relative Color Syntax Builder

Build injection-safe CSS relative-color syntax with a literal six-digit source and explicit substituted OKLCH channels; no CSS parser evaluation, browser support guarantee or statement that channels remain in gamut.

Description

CSS relative-color syntax can substitute explicit OKLCH channels from a literal source color.

CSS relative-color syntax can substitute explicit OKLCH channels from a literal source color. This builder creates text without evaluating CSS.^{[1, 2]}

Enter exact six-digit HEX, lightness percent 0–100,chroma 0–1,hue bounded±10^9 degrees and alpha 0–1. Uppercase source HEX, normalize hue and return the constructed string.

When to use CSS Relative Color Syntax Builder

Use CSS Relative Color Syntax Builder when you need to evaluate the supplied records under the calculation and evidence rules below. No arbitrary expressions, CSS parsing, browser-support guarantee or in-gamut guarantee is supplied.

Prepare colors in the stated color space and scale. Use encoded RGB fractions, linear RGB, Lab, xy, byte values or ink percentages exactly as requested; supply caller tolerances and reference conditions.

How to use CSS Relative Color Syntax Builder and understand its results

Prepare colors in the stated color space and scale. Use encoded RGB fractions, linear RGB, Lab, xy, byte values or ink percentages exactly as requested; supply caller tolerances and reference conditions.
Enter sourceHex, lightnessPercent, chromaValue, hueDegrees, alphaFraction using the field table and calculation rules, then run the tool.
Read relativeColorCss. The explanation below defines the units, signs, ordering and any flags or placeholder values.
If the tool reports an input issue, correct the values and run it again. Apply the stated assumptions when interpreting a successfully returned result.

Input field	Meaning	Value type; see rules below	Requirement
sourceHex	Source hex	string	Required
lightnessPercent	Lightness percent	number	Required
chromaValue	Chroma value	number	Required
hueDegrees	Hue degrees	number	Required
alphaFraction	Alpha fraction	number	Required

Enter exact six-digit HEX, lightness percent 0–100,chroma 0–1,hue bounded±10^9 degrees and alpha 0–1. Uppercase source HEX, normalize hue and return the constructed string.

oklch(from #RRGGBB L% C normalizedHue / alpha)

Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.

Output field	Meaning	Value type
relativeColorCss	Relative color css	string

json

{
  "input": {
    "sourceHex": "#FF0000",
    "lightnessPercent": 50,
    "chromaValue": 0.2,
    "hueDegrees": 30,
    "alphaFraction": 0.5
  },
  "output": {
    "relativeColorCss": "oklch(from #FF0000 50% 0.2 30 / 0.5)"
  }
}

Limitations and assumptions

No arbitrary expressions, CSS parsing, browser-support guarantee or in-gamut guarantee is supplied.

Numeric inputs, where present, must be finite. Follow the calculation-specific rules for overflow, underflow and exceptional cases. Extremely large text inputs are rejected. Missing required fields, extra fields, wrong value types and violations of the calculation rules are input errors.

Alternative or Complementary methods

Use CSS color-mix Percent in OKLab: OKLab mixing averages perceptual coordinates rather than encoded RGB channels. CSS-style weights below 100% reduce resulting alpha. For a complementary task, use OKLCH Chroma Clamp sRGB Max: A fixed-lightness/hue OKLCH radial search can reduce requested chroma to the first sampled sRGB boundary. The procedure is numerical.

Further background: CSS Color Module Level 5: relative colors and color mixing.

References

CSS Relative Color Syntax Builder — tool.io
CSS Color Module Level 5: relative colors and color mixing — World Wide Web Consortium

Similar or alternative tools

CSS color-mix Percent in OKLab
OKLab mixing averages perceptual coordinates rather than encoded RGB channels. CSS-style weights below 100% reduce resulting alpha.
OKLCH Chroma Clamp sRGB Max
A fixed-lightness/hue OKLCH radial search can reduce requested chroma to the first sampled sRGB boundary. The procedure is numerical.