Skip to content

Commit 30d19c1

Browse files
committed
Updated readme
1 parent ca82902 commit 30d19c1

File tree

1 file changed

+12
-12
lines changed

1 file changed

+12
-12
lines changed

README.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,54 @@
11
![Easier color palettes and accessibility](readme-banner.webp)
22

33
# OkColor
4-
This is a plugin for Figma, [see community page](https://www.figma.com/community/plugin/1173638098109123591/OkColor) (waiting Figma's validation).
4+
This is a plugin for Figma, [see community page](https://www.figma.com/community/plugin/1173638098109123591/OkColor).
55

66
Creating a balanced color palette with Figma's color picker is not an easy task, same for managing accessible colors. OkColor is a plugin with an improved HSL/HSB color picker that allows you to easily use uniform color spaces.
77

88
## What's wrong with HSL?
9-
In short, **it is not perceptually uniform** so if you try to create a color palette (with the same hue) by using the “L” param (from 0 to 100 with a step of 10 for example), you will not get a uniform progression. For example with the green hue 120º, in the dark colors, you'll see more differences than in the lighter ones.
9+
In short, **it's not perceptually uniform** so if you try to create a color palette (with the same hue) by using the “L” param (from 0 to 100 with a step of 10 for example), you will not get a uniform progression. For example with the green hue 120º, in the dark colors, you'll see more differences than in the lighter ones.
1010

11-
HSL color pickers in tools like Figma are not specifically made to be uniform, but because of its name it can be confusing. In HSL the luminosity param **is relative to the selected hue**, so for example between these colors: HSL(60, 100, 100) and HSL(240, 100, 100), even if they have the same “L” value, the perceived lightness will not be the same.
11+
HSL color pickers in tools like Figma are not specifically made to be uniform, but because of its name it can be confusing. In HSL the luminosity param **is relative to the selected hue**, so for example between these colors: HSL(60, 100, 50) and HSL(240, 100, 50), even if they have the same “L” value, the perceived lightness will not be the same.
1212

1313
Not only that but if you try to create let's say a palette of 10 colors from the hue 100º to 190º with the same incremental value, you'll end up with a palette that perceptually has too many green colors.
1414

1515
Last but not least, with HSL (and HSB) we have a hue shift problem (known as the “Abney effect”) and it's more noticeable in the blue colors. For example if you take the hue 240º, from a lightness from 0 to 100, the perceived hue will shift from blue to purple.
1616

1717
## OkColor solves these problems
18-
OkColor is an improved color picker that allows you to easily use OkHSL and OkHSV (more on that after) which are perceptually uniform color spaces.
18+
OkColor is an improved color picker that allows you to easily use OkHSL and OkHSV (more on it after) which are perceptually uniform color spaces.
1919

2020
Unlike normal HSL, with OkHSL the perceived luminosity of different colors with the same “L” value **will look the same no matter their hue and saturation.**
2121

22-
With this advantage, color palette creation and contrast checking are easier, for example, let's say you have a blue in OkHSL with a hue of 255º and a saturation of 95, to create a color palette of this color from black to white, you just have to use the luminosity param and you can be sure that for example “30” will mean “Blue300”, or better: “Blue30” as in this case the number is linked to a param you can easily change (Material Design v3 use this notation also now).
22+
With this advantage, color palette creation and contrast checking are easier, for example, let's say you have a blue in OkHSL with a hue of 255º and a saturation of 95, to create a color palette of this color from black to white, you just have to use the luminosity param and you can be sure that for example “30” will mean “Blue300”, or better: “Blue30” as in this case the number is linked to a param you can easily change (Material Design v3 also use this notation now).
2323

24-
Regarding accessibility, you just have to make sure you have a luminosity of at least 50 between the foreground (like a text or an icon) and its background to get a 4.5:1 contrast (AA level for normal text, see WCAG 2.1 requirements). To be more precise, it should in fact be 52, check below the “Regarding accessibility” section for more info.
24+
Regarding accessibility, just make sure you have a luminosity of at least 50 between the foreground (like a text or an icon) and its background to get a 4.5:1 contrast (AA level for normal text, see WCAG 2.1 requirements). To be more precise, it should in fact be 52, check below the “Regarding accessibility” section for more info.
2525

2626
With OkColor, you also avoid the hue shift problem, so your blue color palette will stay blue no matter the luminosity.
2727

2828
## What about HSB and OkHSV?
2929
HSB is similar to HSL but here the saturation and brightness are a bit different, without going too technical HSB can have its advantages over HSL. Note that HSB can also be called “HSV”, they are the same and I kept the original name from OkHSV's creator (credits at the end).
3030

31-
With OkHSV, its goal is not to have a different behavior for the “V” value compared to Figma HSB. It behaves very similarly but here we don't have the hue shift problem as described above.
31+
With OkHSV, its goal is not to have a different behavior for the “V” value compared to Figma HSB, it behaves very similarly but here we don't have the hue shift problem as described above.
3232

3333
## Regarding accessibility
34-
To be fair, OkHSL's luminosity param is not 100% precise (more like 99%). If for example you take these two colors: OkHSL(0, 100, 50) and OkHSL(170, 100, 50), the perceived luminosity will be *slightly* different. One way to check is with a contrast checker like Stark's plugin.
34+
To be fair, OkHSL's luminosity param is not 100% precise (more like 99%) and if for example you take these two colors: OkHSL(0, 100, 50) and OkHSL(170, 100, 50), the perceived luminosity will be *slightly* different. One way to see it is with a contrast checker like Stark's plugin.
3535

3636
With OkHSL(0, 100, 50) and a white text on it, we get a contrast of 5.09:1, but with OkHSL(170, 100, 50) we have 4.23:1 and while it's close to 4.5, if you really want to be precise, instead of 50 I recommend a difference of 52. For the AAA level on normal text, I recommend a difference of 65.
3737

3838
Note that this problem is also found in other uniform color pickers like HSLuv for example, and in the end is still better than normal HSL where the difference is much bigger.
3939

4040
## Useful details
41-
You can use Figma's HEX input while OkColor is open, it will react to any color changes made on Figma, you can for example also open Figma's color picker and move the cursor to see how OkHSL/OkHSV behave (or the opposite).
41+
You can use Figma's HEX input while OkColor is open and it will react to any color changes made on Figma, so you can for example also open Figma's color picker and move the cursor to see how OkHSL/OkHSV behave (or the opposite).
4242

4343
The plugin doesn't support shapes with multiple colors and if you select one, the plugin will take the first color of the list (from the bottom).
4444

45-
Note that the hue in OkColor doesn't map the hue of HSL/HSB in Figma, for example here 0º doesn't mean pure red.
45+
Note that the hues in OkColor doesn't map the ones of HSL/HSB in Figma, for example here 0º doesn't mean pure red.
4646

4747
It also doesn't support shapes with gradient colors, but you can for example change the color of a shape with a solid fill and a gradient stroke.
4848

49-
Finally, keep in mind that OkHSL and OkHSV are made for the sRGB gamut, technically they will still work if Figma is in “Unmanaged” mode and you work on a P3 screen, but for more precise P3 work you can use for example [oklch.com](https://oklch.com/), which is also based on the work of the creator of OkHSL and OkHSV.
49+
Finally, keep in mind that OkHSL and OkHSV are made for the sRGB gamut, technically they will still work if Figma is in “Unmanaged” mode and you have a P3 screen, but for more precise P3 work you can use for example [oklch.com](https://oklch.com/), which is also based on the work of OkHSL/OkHSV creator.
5050

5151
## Links
52-
This plugin use the rendering and color conversion functions ([source code](https://github.com/bottosson/bottosson.github.io/tree/master/misc/colorpicker)) made by Björn Ottosson who created OkLAB which it's the base for OkHSL and OkHSV (which he also created).
52+
This plugin use the rendering and color conversion functions ([source code](https://github.com/bottosson/bottosson.github.io/tree/master/misc/colorpicker)) made by Björn Ottosson.
5353

5454
To know more about uniform color spaces, I recommend checking his original article: [Oksvh and Okhsl](https://bottosson.github.io/posts/colorpicker/). You can also try this online app made by the same author to easily compare different color pickers: [Interactive color picker comparison](https://bottosson.github.io/misc/colorpicker/).

0 commit comments

Comments
 (0)