8 ms·

Show HN: OKSolar: Improving Solarized using the OKLab perceptual colorspace

90 points by zacharyvoase 4y ago

jeffreygoesto 4y ago
Paying attention to details can really make a difference. Looks as if it reduces latent stress when using it.
Terretta 4y ago
So familiar, but improved.
ibotty 4y ago
Great to see that getting more traction than my submission. I hope to find time to incorporate it into my terminal. Are there already some projects generating the various color schemes?
antman 4y ago
Removing contrast towards more washed out colors does not look like an improvement. Examples at the end look less legible both in too much light and in less light.
- luguenth 4y ago
  I can't see your point towards the washed out colors. Did you really compare the two Examples? I did compare both color schemes (the dark blue ones), and they seem very close together with a bit (nearly unnoticeable) more contrast for the OKSolar Color Scheme. Here is it side by side (the bottom one is oksolar): https://i.imgur.com/wcu2r7O.png https://i.imgur.com/wcu2r7O.png
  - Narishma 4y ago
    Those two look identical to me.
  - onli 4y ago
    I definitely can relate. In the light version, the background has now less color, it looks more washed out. However, the author did improve the contrast when looking at the numbers. I ran the default text color through a contrast check and see this results (I hope I took the correct colors): solarized: https://webaim.org/resources/contrastchecker/?fcolor=657B83&bcolor=FDF6E3 https://webaim.org/resources/contrastchecker/?fcolor=657B83&... (4.12:1) OkSolar: https://webaim.org/resources/contrastchecker/?fcolor=657377&bcolor=FBF7EF https://webaim.org/resources/contrastchecker/?fcolor=657377&... (4.6:1) selenized: https://webaim.org/resources/contrastchecker/?fcolor=53676D&bcolor=FBF3DB https://webaim.org/resources/contrastchecker/?fcolor=53676D&... (5.36:1) So this is likely better, but not as accessible as selenized. When looking at the writeup there was maybe a bit too much focus on equal color contrast vs raising the contrast in general? Regardless, this is a nice evolution, and the equal contrast approach combined with selenized higher contrast approach could make for the perfect combination.
throwaway104739 4y ago
Selenized[0] is an another attempt at improving on solarized. [0]: https://github.com/jan-warchol/selenized/ https://github.com/jan-warchol/selenized/
- Tade0 4y ago
  It goes well with dotfiles from the same author: https://github.com/jan-warchol/sensible-dotfiles https://github.com/jan-warchol/sensible-dotfiles
- ninjin 4y ago
  After having used Solarized Light for about a decade, I have now tried out Selenized Light for nearly two weeks and I am liking it a lot. It is a gradual improvement, but very much an improvement nonetheless. In particular, respecting the ANSI colour codes makes pretty much every programme work great out of the box. I respect that Solarized tried to pack the entire colour scheme into the ANSI colour codes, but the occasional breakages are less than ideal.
- jeffbee 4y ago
  Yeah the main problem with Solarized is not the coordinate system, it's the bizarre mapping of ANSI terminal colors. The way Selenized does bold/bright/reverse text makes far more sense to me. Perhaps Selenized could also be adjusted according to the same process described in the article.
bscphil 4y ago
> For me, the contrast between text and the background is just a little too low (especially if I’m working in a bright space), and you can see that it also varies between different token types. Strange. For the dark scheme, it fixes the saturation and lightness difference between colors, but it doesn't seem to improve the contrast ... at all? Are my eyes lying to me? You decide: https://i.imgur.com/vFa06CE.png https://i.imgur.com/vFa06CE.png I think this is an interesting approach, maybe I'll try using it with a significantly darker background color.
- Semaphor 4y ago
  Slightly better for orange and secondary. Though, it’s only an issue on one of my 2 monitors.
jnsaff2 4y ago
To me the problem with solarized dark has always been that my brain keeps telling me that my monitor is broken as it "bleeds backlight". I like the rest of it but whenever I use it I just turn the background to more or almost completely black. So much better. I guess the same very low contrast is a problem for the light one too. This here did not improve it. Nowadays I mostly use something else.
- adql 4y ago
  I wish there was a theme generator that just took few colors and palletes on input then generated config for a bunch of apps I took some dark theme (twilight anti-bright from emacs) and just tweaked some values to my liking (making background darker was one), then moved with same theme (manually...) to IntelliJ IDEA and few other apps
  - CUViper 4y ago
    Base16 does that: https://github.com/chriskempson/base16 https://github.com/chriskempson/base16
hnbad 4y ago
It's funny how the last section with the screenshots mentions "preserving accessibility". "Fixing the lightness and only modifying hue and chroma" is not a recipe for good accessibility and the screenshots demonstrate it. I'm severely green-blind and in the earlier screenshots of the Solarized palette I already hat issues telling red and orange, and blue and violet apart. But with the new palette I now struggle with red, orange AND green, and magenta and cyan also have become less distinct from each other. Solarized wasn't very accessible to begin with (few syntax highlighting color palettes are) but this is just worse. If you learn about color theory as a hobby, please also take the time to learn about color vision and before making claims about accessibility also learn about how color vision deficiencies affect perception. It's nice that the author admits they had to learn about color theory in order to approach this, i.e. they didn't know much about color before, but please don't claim this is an "improvement" if you really only tried to increase the light-dark contrast of the text against the background. Solarized is a fairly low-contrast theme to begin with and increasing its contrast while maintaining its general aesthetic would have been an interest goal but this article doesn't seem to actually be interested in doing that.
- Fnoord 4y ago
  Preface: I am autistic, and live in a non-autistic world. Yes, I want to be taken into account, but not by default. It can really hurt if you cannot be taken into account though. I believe a color scheme or font should not, by default, take into account color blindness or dyslexia. I mean, we could do that, but the reward would be too low compared to the cost because the amount of people with such disability is too low compared to healthy amount. Instead, users should have the option to opt for a colorblind or dyslexia color scheme or font, just like there's lifts in public space but also stairs, and its assumed most users can use the stairs (else you'd get congestion). The only exception is things like traffic signs. But given HN is an American website, I believe the US is putting emphasis on written text on traffic signs where symbols (picture language) would suffice, and improve on the matter (not just because not all speak English but more because of reading taking more effort than observing a sign, leading to errors).
  - hnbad 4y ago
easytiger 4y ago
> For me, the contrast between text and the background is just a little too low I have always thought this with Solarized, on many monitors over many years. Perhaps my eyes aren't as good as others, but i found it instantly fatiguing
- adql 4y ago
  Same, I don't get why that theme is that popular.
Gordonjcp 4y ago
Why is this supposed to be good? What's with the fashion for very-pale-grey-on-slightly-paler-grey text?
- adql 4y ago
  I have suspicion people doing that have their gamma different or something, it just looks unreadable
zokier 4y ago
One thing I'm bit confused about is the relationship between oklab(/oklch) and different colorspaces; are srgb-oklab and p3-oklab different things? Or is oklab something that exists independent of srgb/p3/whatever? In web they seem bit intermixed in a confusing way. And does HDR add yet another dimension here is needed for "full" color specification.
- hmry 4y ago
  Any links on srgb-oklab or p3-oklab? I have never heard of either of them, and Google doesn't seem to know either. Generally, OKLab is its own independent color space. It's not like HSV for example, which is just a transformation of sRGB.
- panzerboiler 4y ago
  The best example I know of is the OkLCH color picker from Evil Martians (https://oklch.evilmartians.io https://oklch.evilmartians.io), linked at the end of the article. It shows the gamuts of sRGB, p3 and rec2020. You need a screen capable of showing them to appreciate the difference (recent Apple devices are all p3 capable).
bloopernova 4y ago
I don't mean for this to sound negative but I'm confused by the effort to make the different shades the same perceived brightness. Isn't a significant part of a colour scheme the ability to more easily distinguish between elements? In my terminal and text editor I want to pick out the relevant information quickly. I hate asking stuff like this because it sounds like I'm dismissive of the really cool article/experiment I just read.
- deleted 4y ago
  [deleted]
- rcthompson 4y ago
  I guess the goal is for all text elements to be readable against the background, which requires a certain minimum perceptual contrast regardless of hue. I don't know if there's also some constraint on the maximum contrast as well. Perhaps readability is compromised when contrast varies to much from word to word?
floatrock 4y ago
Anyone assemble this into a jetbrains theme file? Author links to a json file https://meat.io/oksolar.json https://meat.io/oksolar.json but haven't done manual jetbrains theming so hoping more experienced eyes have taken a stab at it.

90 points by zacharyvoase 4y ago

jeffreygoesto 4y ago

Paying attention to details can really make a difference. Looks as if it reduces latent stress when using it.

Terretta 4y ago

So familiar, but improved.

ibotty 4y ago

Great to see that getting more traction than my submission. I hope to find time to incorporate it into my terminal. Are there already some projects generating the various color schemes?

antman 4y ago

Removing contrast towards more washed out colors does not look like an improvement. Examples at the end look less legible both in too much light and in less light.

luguenth 4y ago
I can't see your point towards the washed out colors. Did you really compare the two Examples? I did compare both color schemes (the dark blue ones), and they seem very close together with a bit (nearly unnoticeable) more contrast for the OKSolar Color Scheme. Here is it side by side (the bottom one is oksolar): https://i.imgur.com/wcu2r7O.png https://i.imgur.com/wcu2r7O.png
- Narishma 4y ago
  Those two look identical to me.
- onli 4y ago
  I definitely can relate. In the light version, the background has now less color, it looks more washed out. However, the author did improve the contrast when looking at the numbers. I ran the default text color through a contrast check and see this results (I hope I took the correct colors): solarized: https://webaim.org/resources/contrastchecker/?fcolor=657B83&bcolor=FDF6E3 https://webaim.org/resources/contrastchecker/?fcolor=657B83&... (4.12:1) OkSolar: https://webaim.org/resources/contrastchecker/?fcolor=657377&bcolor=FBF7EF https://webaim.org/resources/contrastchecker/?fcolor=657377&... (4.6:1) selenized: https://webaim.org/resources/contrastchecker/?fcolor=53676D&bcolor=FBF3DB https://webaim.org/resources/contrastchecker/?fcolor=53676D&... (5.36:1) So this is likely better, but not as accessible as selenized. When looking at the writeup there was maybe a bit too much focus on equal color contrast vs raising the contrast in general? Regardless, this is a nice evolution, and the equal contrast approach combined with selenized higher contrast approach could make for the perfect combination.

throwaway104739 4y ago

Selenized[0] is an another attempt at improving on solarized. [0]: https://github.com/jan-warchol/selenized/ https://github.com/jan-warchol/selenized/

Tade0 4y ago
It goes well with dotfiles from the same author: https://github.com/jan-warchol/sensible-dotfiles https://github.com/jan-warchol/sensible-dotfiles
ninjin 4y ago
After having used Solarized Light for about a decade, I have now tried out Selenized Light for nearly two weeks and I am liking it a lot. It is a gradual improvement, but very much an improvement nonetheless. In particular, respecting the ANSI colour codes makes pretty much every programme work great out of the box. I respect that Solarized tried to pack the entire colour scheme into the ANSI colour codes, but the occasional breakages are less than ideal.
jeffbee 4y ago
Yeah the main problem with Solarized is not the coordinate system, it's the bizarre mapping of ANSI terminal colors. The way Selenized does bold/bright/reverse text makes far more sense to me. Perhaps Selenized could also be adjusted according to the same process described in the article.

bscphil 4y ago

> For me, the contrast between text and the background is just a little too low (especially if I’m working in a bright space), and you can see that it also varies between different token types. Strange. For the dark scheme, it fixes the saturation and lightness difference between colors, but it doesn't seem to improve the contrast ... at all? Are my eyes lying to me? You decide: https://i.imgur.com/vFa06CE.png https://i.imgur.com/vFa06CE.png I think this is an interesting approach, maybe I'll try using it with a significantly darker background color.

Semaphor 4y ago
Slightly better for orange and secondary. Though, it’s only an issue on one of my 2 monitors.

jnsaff2 4y ago

To me the problem with solarized dark has always been that my brain keeps telling me that my monitor is broken as it "bleeds backlight". I like the rest of it but whenever I use it I just turn the background to more or almost completely black. So much better. I guess the same very low contrast is a problem for the light one too. This here did not improve it. Nowadays I mostly use something else.

adql 4y ago
I wish there was a theme generator that just took few colors and palletes on input then generated config for a bunch of apps I took some dark theme (twilight anti-bright from emacs) and just tweaked some values to my liking (making background darker was one), then moved with same theme (manually...) to IntelliJ IDEA and few other apps
- CUViper 4y ago
  Base16 does that: https://github.com/chriskempson/base16 https://github.com/chriskempson/base16

hnbad 4y ago

It's funny how the last section with the screenshots mentions "preserving accessibility". "Fixing the lightness and only modifying hue and chroma" is not a recipe for good accessibility and the screenshots demonstrate it. I'm severely green-blind and in the earlier screenshots of the Solarized palette I already hat issues telling red and orange, and blue and violet apart. But with the new palette I now struggle with red, orange AND green, and magenta and cyan also have become less distinct from each other. Solarized wasn't very accessible to begin with (few syntax highlighting color palettes are) but this is just worse. If you learn about color theory as a hobby, please also take the time to learn about color vision and before making claims about accessibility also learn about how color vision deficiencies affect perception. It's nice that the author admits they had to learn about color theory in order to approach this, i.e. they didn't know much about color before, but please don't claim this is an "improvement" if you really only tried to increase the light-dark contrast of the text against the background. Solarized is a fairly low-contrast theme to begin with and increasing its contrast while maintaining its general aesthetic would have been an interest goal but this article doesn't seem to actually be interested in doing that.

Fnoord 4y ago
Preface: I am autistic, and live in a non-autistic world. Yes, I want to be taken into account, but not by default. It can really hurt if you cannot be taken into account though. I believe a color scheme or font should not, by default, take into account color blindness or dyslexia. I mean, we could do that, but the reward would be too low compared to the cost because the amount of people with such disability is too low compared to healthy amount. Instead, users should have the option to opt for a colorblind or dyslexia color scheme or font, just like there's lifts in public space but also stairs, and its assumed most users can use the stairs (else you'd get congestion). The only exception is things like traffic signs. But given HN is an American website, I believe the US is putting emphasis on written text on traffic signs where symbols (picture language) would suffice, and improve on the matter (not just because not all speak English but more because of reading taking more effort than observing a sign, leading to errors).
- hnbad 4y ago

easytiger 4y ago

> For me, the contrast between text and the background is just a little too low I have always thought this with Solarized, on many monitors over many years. Perhaps my eyes aren't as good as others, but i found it instantly fatiguing

adql 4y ago
Same, I don't get why that theme is that popular.

Gordonjcp 4y ago

Why is this supposed to be good? What's with the fashion for very-pale-grey-on-slightly-paler-grey text?

adql 4y ago
I have suspicion people doing that have their gamma different or something, it just looks unreadable

zokier 4y ago

One thing I'm bit confused about is the relationship between oklab(/oklch) and different colorspaces; are srgb-oklab and p3-oklab different things? Or is oklab something that exists independent of srgb/p3/whatever? In web they seem bit intermixed in a confusing way. And does HDR add yet another dimension here is needed for "full" color specification.

hmry 4y ago
Any links on srgb-oklab or p3-oklab? I have never heard of either of them, and Google doesn't seem to know either. Generally, OKLab is its own independent color space. It's not like HSV for example, which is just a transformation of sRGB.
panzerboiler 4y ago
The best example I know of is the OkLCH color picker from Evil Martians (https://oklch.evilmartians.io https://oklch.evilmartians.io), linked at the end of the article. It shows the gamuts of sRGB, p3 and rec2020. You need a screen capable of showing them to appreciate the difference (recent Apple devices are all p3 capable).

bloopernova 4y ago

I don't mean for this to sound negative but I'm confused by the effort to make the different shades the same perceived brightness. Isn't a significant part of a colour scheme the ability to more easily distinguish between elements? In my terminal and text editor I want to pick out the relevant information quickly. I hate asking stuff like this because it sounds like I'm dismissive of the really cool article/experiment I just read.

deleted 4y ago
[deleted]
rcthompson 4y ago
I guess the goal is for all text elements to be readable against the background, which requires a certain minimum perceptual contrast regardless of hue. I don't know if there's also some constraint on the maximum contrast as well. Perhaps readability is compromised when contrast varies to much from word to word?

floatrock 4y ago

Anyone assemble this into a jetbrains theme file? Author links to a json file https://meat.io/oksolar.json https://meat.io/oksolar.json but haven't done manual jetbrains theming so hoping more experienced eyes have taken a stab at it.