The Math Behind the Kasumi Color System

Working on rebranding by portfolio site, I have decided to use gray shades as brand color because they can represent one of the steps in interface design — wireframing. The idea of paint page case in branding colors came from previous attempt of rewriting portfolio, I was using Whirlombre 1.0 to generate color scheme based on provided hue component.

Previous portfolio theme generation examples

While working with Whirlombre 2.0, especially creating HCT color picker, I start thinking, why am using HSL for palette generation on my portfolio site? That color space is not predictable in case of accessibility of generated colors, so I decided to try another space, especially when we have a Oklch, a better way to creating accessible palettes, but Oklch does not provide an easy way to convert gray shades to colors. So I decided to create my own color space using L*A*B as a base, similar to Google implementation.

The Idea

The idea was to create a color space, that can use Kasumi UI color palette to convert a provided hue to consistent and perceptually accurate new color palette.

Before I used a HSL for creating a dynamic color palettes, I faced problem of inconsistent lightness and looks kinda desaturated compared to JTEH one, while creating color palettes with different hues.

Components

JTEH stands for Jeffrey (Me), Tone, Effect and Hue.

1. J (Jeffrey) : Me :)
2. T (Tone) — [0, 100] : Represents the tone or lightness of the color, ranging from 0 to 100, where 0% is black and 100% is white.
3. E (Effect) — [0, 1] : Represents the boolean binary value (0 or 1). When E is 0, the color remains grayscale; when E is 1, the grayscale value is transformed to a colored shade based on the provided hue.
4. H (Hue) — [0, 360): Represents the hue of the color and ranges in 0 to 360 degrees.

So instead using chroma as a 3-rd component of color space like HCT, I used effect because the chroma is calculated by tone, as base color is represented in gray shade.

Let's break down each step in detail, providing the mathematical foundation for each conversion and transformation.

Implementation

Playground

Here a little playground for that color model:

JTEH in 3D

Here are an attempt to represent JTEH color space in three dimensional space:

The X represents E (Effect).

The Y represents T (Tone).

The Z represents H (Hue)