OK Palette

About this plugin

OK Palette is a plugin that helps designers create tonal palettes for GUI design with greater control, yet in a simple and fast way. OK Palette uses OKLCH, a Perceptually Uniform Colorspace, allowing designers to easily generate tonal palettes based on Lightness, Chroma, and Hue.

Color spaces like HSB, HSL, and HSV have been widely used because of the perceived advantage of maintaining saturation and brightness while changing hues, unlike RGB. However, this is not entirely true. For instance, take HSB(60, 100, 100) in yellow and HSB(240, 100, 100) in blue. Although both have the same brightness (B) value of 100, our eyes know the truth: yellow appears brighter.

In contrast, OKLCH is a perceptually uniform color space that ensures any color with the same L value will appear at the same brightness to the human eye, regardless of hue (H). This is a crucial feature for GUI design because humans are more sensitive to differences in brightness than other attributes of color, like hue or saturation, and often rely on brightness to perceive importance.

OKLCH is already a web standard available on all browsers. Unfortunately, however, Figma does not yet offer native support for the OKLCH color space. Luckily, a few plugins enable the use of OKLCH. Notably, OkColor by DokoZero is an excellent plugin that we used before creating OK Palette, though we had to manually calculate each tonal palette (one by one). Although it does not use the OKLCH color space, Material Theme Builder by Material Design is another plugin that generates tonal palettes. It uses Google's custom HCT color space, which is also a perceptually uniform color space. However, HCT is not a web standard, and it is so automated that it provides designers with very limited control.

Despite the existence of such plugins, we created OK Palette because no existing plugin met all of the following criteria:

1. Automate the creation of tonal palettes based on the OKLCH color space for quick and easy palette generation.

2. Allow designers almost full control by enabling direct visual exploration of the OKLCH color space.

OK Palette was developed by Professor SON OO-SUNG and student Choi Eunjin from the Department of Communication Design at Sangmyung University's College of Design. We welcome your feedback. If you have any suggestions or encounter any issues, please reach out via GitHub or email.

Key Features

Palette generation with automatic saturation adjustment based on lightness

OK Palette generates a tonal palette that starts from absolute black (#000000) and ends in absolute white (#FFFFFF). Users can adjust the Lightness and Chroma values at intermediate points along the palette’s path to create a variety of tonal palettes.

Hue adjustments based on changes in lightness

Typical tonal palettes maintain the same hue from start to end, but we wondered, "Does it really have to be that way?" OK Palette offers the flexibility to set different hues at the starting point (Hue Start) and the endpoint (Hue End).

APCA matrix generation

OK Palette automatically generates an APCA matrix for all possible combinations within the tonal palette.

OK Palette는 GUI 디자인을 위한 토널 팔레트를 만드는 데 있어 디자이너에게 더 많은 통제권을 부여하면서도 쉽고 빠르게 만들 수 있도록 돕는 플러그인입니다. OK Palette는 지각적 균일 색 공간(Perceptually Uniform Colorspace)인 OKLCH를 활용해 명도(Lightness), 채도(Chroma), 색상(Hue)을 기반으로 한 토널 팔레트를 손쉽게 생성할 수 있게 해줍니다.

기존에 많이 사용되던 HSB, HSL, HSV 등의 색 공간은 RGB에 비해 채도, 명도를 유지한 채 색상을 변경할 수 있다는 이유로 널리 사용되어 왔지만, 이는 사실이 아닙니다. HSB를 예로 들면, HSB(60, 100, 100)인 노란색과 HSB(240, 100, 100)인 파란색은 분명히 100이라는 같은 B(명도) 값을 가지고 있지만, 우리 눈은 답을 알고 있습니다. 노란색이 더 밝습니다.

반면에 OKLCH 색 공간은 지각적 균일 색 공간으로서 같은 L 값을 가진 색은 어떤 색상(H)일지라도 우리 눈으로 보기에도 같은 밝기일 것을 보장합니다. 이는 GUI 디자인에서 매우 중요하고 유용한 특징입니다. 왜냐하면 인간은 색상이나 채도 등 색의 다른 속성보다도 밝기의 차이를 민감하게 인지하고, 이를 바탕으로 중요도를 인식하기 때문입니다.

OKLCH는 이미 모든 브라우저에서 사용할 수 있는 웹 표준입니다만, 아쉽게도 피그마는 아직 OKLCH 색 공간을 기본 기능으로 제공하지 않습니다. 그러나 다행히도 OKLCH 색 공간을 사용할 수 있는 몇몇 플러그인이 존재합니다. 특히 DokoZero의 OkColor는 매우 훌륭한 플러그인으로, 우리가 OK Palette를 만들기 전에는 이 플러그인을 이용해 (일일이 하나하나 계산해야 했지만) 토널 팔레트를 만들었습니다. OKLCH 색 공간을 활용하는 것은 아니지만, Material Design의 Material Theme Builder는 토널 팔레트를 생성해주는 플러그인으로 구글이 독자적으로 개발한 HCT 색 공간을 활용하고 있으며, 이 또한 지각적 균일 색 공간입니다. 다만, HCT 색 공간은 웹 표준이 아닐 뿐더러, 너무 자동화되어 디자이너에게 거의 통제권을 제공하지 않습니다.

이 같은 플러그인들이 있음에도 우리가 OK Palette를 만든 이유는 다음의 조건들을 모두 만족하는 플러그인이 없었기 때문입니다.

1. OKLCH 색 공간에 기초한 토널 팔레트를 자동화하여 쉽고 빠르게 만들 수 있게 할 것.
2. OKLCH 색 공간을 시각적으로 직접 탐색할 수 있게 함으로써 디자이너에게 거의 모든 통제권을 제공할 것.

OK Palette는 상명대학교 디자인대학 커뮤니케이션디자인전공의 손우성 교수와 최은진 학생이 개발했습니다. 우리는 여러분의 피드백을 기다리고 있습니다. 불편한 점이나 필요한 기능이 있다면 GitHub이나 이메일로 연락해 주시기 바랍니다.

주요 기능

명도에 따른 채도의 자동 조절로 팔레트 생성

OK Palette는 #000000인 완전 흑색에서 시작하여 #FFFFFF인 완전 백색에서 끝나는 토널 팔레트를 생성합니다. 사용자는 이 토널 팔레트가 지나는 중간 지점의 명도(Lightness)와 채도(Chroma)를 설정하여 다양한 토널 팔레트를 생성할 수 있습니다.

색상(Hue)의 명도 변화에 따른 조절 기능

일반적인 토널 팔레트는 시작부터 끝까지 같은 색상(Hue)을 유지하지만, 우리는 “꼭 그래야만 하나?”라고 생각했습니다. OK Palette에서는 시작 지점의 색상(Hue Start)과 끝 지점의 색상(Hue End)을 다르게 설정할 수 있는 기능도 제공합니다.

APCA 매트릭스 생성

생성된 토널 팔레트의 가능한 모든 조합에 대한 APCA 매트릭스를 자동으로 생성해줍니다.