Flexoki 2.0 introduces 88 new colors to fill in the range of 50-950 for all accent colors. This makes Flexoki into a more capable color system for UIs and more complex projects. For more details see the [extended palette documentation](https://stephango.com/flexoki#extended-palette).
The new colors emulate the feeling of pigment on paper by exponentially increasing intensity as colors get lighter or darker. This makes the colors feel vibrant and warm, like watercolor inks.
The first version of Flexoki only provide a range of values for the grayscale colors. What I have been working on since then is how to expand the palette to a full range of values for every color, without desaturating the pigment effect.
The new colors are derived using the [Oklab](https://en.wikipedia.org/wiki/Oklab_color_space) color space to create cohesive perceptual relationships. Oklab chroma values are ramped up in the light and dark values to make the colors feel vibrant and warm. You can explore [playground.js](https://github.com/kepano/flexoki/blob/main/_playground/playground.js) to see how the new values are generated from the original Flexoki colors.
<img width="1066" alt="Screenshot 2025-01-06 at 16 11 47" src="https://github.com/user-attachments/assets/27f6727c-cd46-43ba-b4e5-d44cecce3241" />
<img width="1066" alt="Screenshot 2025-01-06 at 16 12 42" src="https://github.com/user-attachments/assets/fa081557-078c-4532-8384-2acb7e3de908" />
Emulating pigments
This illustration shows how using opacity to lighten a colors creates a washed out, desaturated effect.
<img width="500" alt="Flexoki light" src="https://github.com/user-attachments/assets/e793422a-a536-4507-958e-8c648e60ef52" />