Your device's color space: please wait...

css
	:root {
		/* Temporary Color */ 
	
		--primary-l: 0.5;
		--primary-c: 0.25;
		--primary-h: 18;
	
		--primary-50: oklch(calc(var(--primary-l) + 0.5) var(--primary-c) var(--primary-h));
		--primary-100: oklch(calc(var(--primary-l) + 0.4) var(--primary-c) var(--primary-h));
		--primary-200: oklch(calc(var(--primary-l) + 0.3) var(--primary-c) var(--primary-h));
		--primary-300: oklch(calc(var(--primary-l) + 0.2) var(--primary-c) var(--primary-h));
		--primary-400: oklch(calc(var(--primary-l) + 0.1) var(--primary-c) var(--primary-h));
		--primary-500: oklch(calc(var(--primary-l) + 0) var(--primary-c) var(--primary-h));
		--primary-600: oklch(calc(var(--primary-l) - 0.1) var(--primary-c) var(--primary-h));
		--primary-700: oklch(calc(var(--primary-l) - 0.2) var(--primary-c) var(--primary-h));
		--primary-800: oklch(calc(var(--primary-l) - 0.3) var(--primary-c) var(--primary-h));
		--primary-900: oklch(calc(var(--primary-l) - 0.4) var(--primary-c) var(--primary-h));
		--primary-950: oklch(calc(var(--primary-l) - 0.5) var(--primary-c) var(--primary-h));
	
	
		/* Temporary Color */ 
	
		--secondary-l: 0.5;
		--secondary-c: 0.25;
		--secondary-h: 180;
	
		--secondary-50: oklch(calc(var(--secondary-l) + 0.5) var(--secondary-c) var(--secondary-h));
		--secondary-100: oklch(calc(var(--secondary-l) + 0.4) var(--secondary-c) var(--secondary-h));
		--secondary-200: oklch(calc(var(--secondary-l) + 0.3) var(--secondary-c) var(--secondary-h));
		--secondary-300: oklch(calc(var(--secondary-l) + 0.2) var(--secondary-c) var(--secondary-h));
		--secondary-400: oklch(calc(var(--secondary-l) + 0.1) var(--secondary-c) var(--secondary-h));
		--secondary-500: oklch(calc(var(--secondary-l) + 0) var(--secondary-c) var(--secondary-h));
		--secondary-600: oklch(calc(var(--secondary-l) - 0.1) var(--secondary-c) var(--secondary-h));
		--secondary-700: oklch(calc(var(--secondary-l) - 0.2) var(--secondary-c) var(--secondary-h));
		--secondary-800: oklch(calc(var(--secondary-l) - 0.3) var(--secondary-c) var(--secondary-h));
		--secondary-900: oklch(calc(var(--secondary-l) - 0.4) var(--secondary-c) var(--secondary-h));
		--secondary-950: oklch(calc(var(--secondary-l) - 0.5) var(--secondary-c) var(--secondary-h));
	}

What is OKLCH?

OKLCH is a modern color space designed for improved perceptual uniformity and color management in digital imaging and design applications. Standing for OK Lightness, Chroma, and Hue, OKLCH builds upon the OKLAB color space, which itself is an advancement over traditional color spaces like sRGB and Lab. The key advantage of OKLCH is its ability to represent colors in a way that aligns more closely with human vision, ensuring that color differences perceived by viewers are consistent across various contexts. This is particularly useful for tasks such as color grading, where subtle variations in color must be managed precisely.

In technical terms, OKLCH decomposes colors into three components: lightness (L), chroma (C), and hue (H). Lightness represents the perceived brightness of a color, chroma denotes the color's intensity or saturation, and hue specifies the color's position on the color wheel. By separating these attributes, OKLCH allows for more intuitive color manipulation, making it easier to adjust specific aspects of a color without unintended shifts in other attributes. This separation is achieved through a perceptually uniform space, which means that the mathematical distance between colors in OKLCH corresponds more accurately to perceived differences in color. As a result, OKLCH facilitates more precise color adjustments and consistent color reproduction across different devices and media.

Kyrre Gjerstad - 2024