gray-oklch

[woodcox]

How are the beta gray-oklch props described in Adam's nerdy.dev blog post meant to be used?

I understand that they can be passed --gray-hue and --gray-chroma custom properties. Is @argyleink designing any predefined hues and chroma for these? Having predefined and well designed colors is a big part of why I think open-props is awesome.

[argyleink]

oh interesting request! so just like how there's predefined hue props for use, perhaps there's some predefined gray tints and chroma levels? i could def see that being a few props for easy use. OR, I could supply pretinted gray palettes like a gray-cool-oklch import? Have a preference?

[woodcox]

Wow! Thanks for the quick response. I think predefined tints and chroma levels that you could mix and match seem to me the most flexible option. But I'd probably be happy either way as your very good at designing color palettes.

[woodcox]

Hey, I’ve been thinking about the oklch grays. What do you think to the having some —-gray-chroma-{0-15} props? For example:

:where(html) {
  --gray-chroma-0: 0;
  --gray-chroma-1: 0.01;
  --gray-chroma-2: 0.02;
  --gray-chroma-3: 0.03;
  --gray-chroma-4: 0.04;
  --gray-chroma-5: 0.05;
  --gray-chroma-6: 0.06;
  --gray-chroma-7: 0.07;
  --gray-chroma-8: 0.08;
  --gray-chroma-9: 0.09;
  --gray-chroma-10: 0.1;
  --gray-chroma-11: 0.11;
  --gray-chroma-12: 0.12;
  --gray-chroma-13: 0.13;
  --gray-chroma-14: 0.14;
  --gray-chroma-15: 0.15;
}

Then this could be used with the oklch-hues to adjust the hue and chroma. Here is an example codepen. What do you think?

[argyleink]

your demo is producing better colors than this one I tried that used sin() to try and create a chroma bell curve. but i think the issue with your demo is that the chroma is incrementing too mathematically, see here where i've perceptually managed the chroma as it's producing better darks, lights and brights.

I do however still think the feature requested originally stands strong, which is predefined palettes. Open Props won't ever ditch the original hex color palettes, but it could offer the same named color palettes but ones that are oklch and HDR ready. Could also provide display-p3 versions, because those might be considered "safer" by some. it's a decent chunk of work, but they are indeed valuable props to have.

[woodcox]

It’s a really tricky to create chroma props, what do you think to having —chroma-max-{hue} props as a way to control the chroma along with a min()?

:root {
  --chroma-max-red: 0.29;
  --chroma-max-pink: 0.31;
  --chroma-max-purple: 0.31;
  --chroma-max-violet: 0.30;
  --chroma-max-indigo: 0.31;
  --chroma-max-blue: 0.2;
  --chroma-max-cyan: 0.18;
  --chroma-max-teal: 0.2;
  --chroma-max-green: 0.36;
  --chroma-max-lime: 0.26;
  --chroma-max-yellow: 0.21;
  --chroma-max-orange: 0.19;

  --color-1: oklch(98% min(calc(0.03 * var(--palette-chroma, 1)), calc(0.3 * var(--chroma-max, 0.36))) calc(var(--palette-hue) + (0 * var(--palette-hue-rotate-by))));

  --color-2: oklch(97% min(calc(0.06 * var(--palette-chroma, 1)), calc(0.4 * var(--chroma-max, 0.36))) calc(var(--palette-hue) + (1 * var(--palette-hue-rotate-by))));
	
  --color-3: oklch(93% min(calc(0.1 * var(--palette-chroma, 1)), calc(0.6 * var(--chroma-max, 0.36))) calc(var(--palette-hue) + (2 * var(--palette-hue-rotate-by))));

  —-color-4: …

Here is a codepen, I’ve not tested the best calculated value of the chroma-max for each hue.

[argyleink]

nice, these results look great. though the hue rotation options are a bit extreme, smaller values can go a long way to adding some intrigue https://opv2-beta.netlify.app/color/.

how did you calculate the chroma max values? are they peak sRGB or peak p3?

--chroma-max: var(--chroma-max-green);
--palette-hue: var(--hue-green);

that seems like a reasonable set of configuration for folks looking for the max vibrance in a palette. maybe we could make some that are like var(--chroma-max-p3-green)? or maybe it's better to auto-upgrade the max value inside a @media (color-gamut: p3) and/or @media (color-gamut: rec2020)?