13 ms·

Show HN: Penumbra, a perceptually optimized color palette based on natural light

267 points by solasluaith 4y ago

For this palette, I used recent advances in color science, which made perceptual design more accessible, to choose a set of colors (mainly for syntax highlighting) that have uniform luminance for less visually uneven, fluidly readable code, but at the same time maximally distinguishable hue and chroma. The background colors are based on natural (sun-)light and shade for a more pleasing look than equally neutral greys. For much more detailed info, including the construction, check out the repository. There’s also already a (bare-bones) VSCode extension, linked in the repository, but it could admittedly use more informed distribution of colors over tokens, language specific highlighting and perhaps more opinionated use in UI elements.

AndrewOMartin 4y ago
Looks nice. Fancy justification too. Are you claiming it's a significant improvement over Solarised? Either way, good stuff.
- solasluaith 4y ago
  Thank you! I’m claiming it is an improvement in terms of usability, simply because Solarised wasn’t designed with these properties in mind. Whether it’s significant everyone needs to judge for themselves. I personally was mostly annoyed by how some colours are over-emphasised with Solarised, especially magenta and red, to a lesser degree orange. You could take a fundamentally different approach and use different levels of emphasis for different colours, but I don’t think this was done in a quantitative and purposeful way. It’s also just not the approach I favour as I (and probably others) prefer an overall less busy look more like a text. And aesthetics in general are of course subjective and were admittedly only of secondary consideration.
  - wrycoder 4y ago
    To my eye, you've done an outstanding job.
    - hermitdev 4y ago
      I agree. For me, the DarkContrast++ looked best to me. Clear, crisp and easily readable after a long, sleep deprived day. I'll definitely be giving this a shot in the morning.
  - funcDropShadow 4y ago
    At first, your color palette made a very good first impression to me. > I’m claiming it is an improvement in terms of usability, simply because Solarised wasn’t designed with these properties in mind. Are you sure about that? On [1] and [2] the creator of Solarized describes why he choose low contrast and specific hue differences, representable in CIELAB. That sounds rather similar to your first three points in [3]. Even if the approaches have some similarities, it does doesn't denigrate your work. Thanks for continuing this line of work. And I am looking forward to test Penumbra in comparison to Solarized. [1]: https://ethanschoonover.com/solarized/#features https://ethanschoonover.com/solarized/#features [2]: https://ethanschoonover.com/solarized/ https://ethanschoonover.com/solarized/ [3]: https://github.com/nealmckee/penumbra#Features https://github.com/nealmckee/penumbra#Features
    - bXVsbGVy 4y ago
      It is like solarized in the sense the colors have same luminance and are analogous. But it uses OKLab instead of CIELab.
    - solasluaith 4y ago
      The reasoning on the first two points is the same, yes, simply because I agree with Ethan’s. The two big differences are: I’m aiming for perceptually uniform colour differences instead of the same luminance and my background colours are directly sampled from daylight. For the colours, this means uniform chroma and hues that aren’t hand-picked but optimised (on top of that using a more hue-accurate colour space). I’d argue there’s enough of a difference, especially in the visual result, to make this more than an iteration, but even if it was simple iterative, there’s nothing bad about that and it can still be valuable work without being plagiarism .
    - dngray 4y ago
      > The search for a theme led me to Solarized by Ethan Schoonover, which I was ultimately not satisfied with but inspired me to try and improve on its ideas. https://github.com/nealmckee/penumbra#acknowledgments https://github.com/nealmckee/penumbra#acknowledgments Which reminds me, of https://github.com/jan-warchol/selenized/blob/master/whats-wrong-with-solarized.md https://github.com/jan-warchol/selenized/blob/master/whats-w... Selenized is another theme which aims to improve on Solarized. https://github.com/jan-warchol/selenized/blob/master/features-and-design.md https://github.com/jan-warchol/selenized/blob/master/feature... https://github.com/jan-warchol/selenized/blob/master/balancing-lightness-of-colors.md https://github.com/jan-warchol/selenized/blob/master/balanci... Wonder how they compare.
powersnail 4y ago
I gave it a try, and in plain text files, it seems way too low contrast: [screenshot](https://i.postimg.cc/65Xcx9Cv/Screenshot-20220804-161004.png https://i.postimg.cc/65Xcx9Cv/Screenshot-20220804-161004.png).
- solasluaith 4y ago
  Good catch, that is an issue with the VSCode extension, apparently it’s using the colour for comments (which is purposefully low contrast) for plain text when it should be using the main foreground colour. I’ll try to look into that! Also, the light theme only has a “barely enough contrast” version due to constraints described in the README, the dark theme has options with much more. (compare it to the greys used in the samples and you’ll see what I mean)
  - powersnail 4y ago
    That makes sense; I thought it kinda looks like comment. Pretty pleasant colors, otherwise. Good work!
    - solasluaith 4y ago
      Thank you, I’m glad you enjoy them!
  - edwintorok 4y ago
    FWIW comments are quite an important part of reading code, it should not be hidden, at least when comments are used for documentation purposes. It shouldn't be as prominent as the main code, but should be pretty close to it. Very few color themes get this right.
    - solasluaith 4y ago
      I’m not sure if I’m already using the closest colour in terms of luminance or not, I’d have to check. If not, I’m very open to pull requests on the theme, including fundamental reworks. Otherwise there might be an argument whether one would want to make the closest de-emphasised colour less so, but that would require more fundamental changes to the palette (which I’m also open to for the background colours!). I think for this part I looked at what others were doing so I might have gotten it wrong from them.
pandoro 4y ago
Let me first state that I understand that your goal was not to create an "accessible" palette and you state in your README that the palette is not "particularly suitable for people with colour vision deficiency". But being colorblind myself (deuteranomaly, up to 8% of the male population), I would still like to offer feedback: it is extremely hard for me to distinguish most of the colors in this palette (especially in the light version); more so than with "normal/default" palettes
- solasluaith 4y ago
  I’m actually working on another project where I’m trying to design fully optimized categorical colour palettes for people with colour vision deficiency, so I’m fully aware of this issue. When trying to encode highlighting with only chroma and hue and still be accessible, one would probably have to limit the palette to two hues which obviously isn’t practical. This means it would be necessary to use luminance, which expressly goes against the design goals and would eliminate the advantages I’m trying to achieve for people with normal vision. But you're right, I should have been more clear in the docu, this palette is actually particularly unsuitable. (update: clarified it now)
travisd 4y ago
The images shown at the top are (probably) designed to show off the full "dynamic range" of the color palette, but reading those code snippets is a bit overwhelming (and I suspect it's just because you've crammed so many things into a very small space). I think it might be easier to get a visual "grok" of the color scheme with a longer snippet that is more representative of real code.
- solasluaith 4y ago
  Yep, that’s exactly how those came to be — as many colours in as short a snippet as possible. I honestly haven’t put much thought into “marketing” the theme yet and I would want to properly think about how to best do the highlighting before showing it off in real code. Ideally the latter also with the help of more seasoned programmers. I appreciate the feedback and will try to keep it in mind once I get to that stage!
  - junon 4y ago
    Those sorts of snippets, dark on left, light on right, with each row in different languages. Maybe 5 or 6 rows at least. That's what people want to see, at least.
RicoElectrico 4y ago
I think that pallettes with perceptually uniform brightness don't really make sense as generative models. Different colors have different apparent brightness and we're used to it. There's a kindergarten near me with different sections of the fence painted in different "basic" colors, it doesn't look jarring at all with yellow and cyan being brighter than red. Such colors spaces are great for color difference measurement, though.
- solasluaith 4y ago
  That’s the point though, these colours are great because they have (almost) uniform perceptual differences and that is what I was aiming for. Of course this means that “yellow” no longer looks like the (much brighter) yellow that we’re intuitively used to, but that yellow would also jump out from the page much more than the main text colour or other “naturally” darker colours. And I still tried to position them as close as possible to intuitively named colours though with all the other constraints there wasn’t much room for that. Whether you think this even luminance is something desirable is up to your personal preference, but in my opinion it makes the code more readable as your eye isn’t drawn to things as much when you’re not actively scanning for them.
junon 4y ago
I'm going to try this because I love the concept. However I have doubts - part of the reason I use syntax highlighting is to... well, highlight important things. Part of being able to skim code is to pick out the key words or symbols that denote control flow, important (exceptional, even) cases, etc. The dizzying array of identifiers is less important when trying to skim and pick apart the general "feel" of code quickly. In this pallette, at least with python, the identifiers are red, everything is "flat" (due to the perceptual brightness) and thus nothing really sticks out or gives me "grit" to hold on to when navigating around. I could be wrong. This is just my hypothesis going in. Cool project nonetheless, I love the idea to use color science as the basis for this.
- maegul 4y ago
  Feel the same way. I’ve made my own personal colour scheme over time by manually adjusting colours by eye (fun procrastination). Following personal and intuitive preferences this way has lead to a palette that is almost certainly not uniform but one that I mostly like. I suspect a useful tool would be one that starts with vision science based uniformities but that then enables personalised tweaks, ideally with vision science guidance. To your point, it matters what kind of tokens a colour is going to be used for. If they’re small (eg operators), then the effective perceptual uniformity is broken. They’ll be less conspicuous. Being brighter and more saturated would probably help. Perceptual salience can be tricky, and it’s useful to remember that our colour vision is flawed and finicky. Similarly but inverted for large tokens such as class names. Beyond that, once you start modulating saturation and brightness to get a nicer look, you’re back into a 3D colour space where the evenly spaced hues idea starts to make less sense, or so I suspect. Nonetheless, cool work! I would have liked to do the same if I was able!
  - edwintorok 4y ago
    Try https://huetone.ardov.me/ https://huetone.ardov.me/ for a tool based on vision science guidance.
  - bXVsbGVy 4y ago
    > Perceptual salience This is defined by luminance. This is the 'L' in Lab and OKLab (and in their polar representation: LCH and OKLCH).
tra3 4y ago
This is timely. I’m creating a webapp and I’m simply unable to create a good looking Color combination. Going to give this a try. I like the fact that each Color has an associated meaning.
- solasluaith 4y ago
  If you care about accessibility and these colours have any sort of function or meaning within the app, I’m afraid I would advise against using these colours as they were created for a quite specific use-case — colouring tokens within “fluid” text. If you just like them aesthetically and all they’re meant to do is look good, feel free, though I have to say they weren’t designed with aesthetics in mind at all. For accessible categorical colour schemes, check out Okabe-Ito, Paul Tol or colour brewer.
  - tra3 4y ago
    Thanks, that's very kind of you. I'm using an open source calendar component to visualize my agenda. I have various types of events I'm showing (scheduled work items, events and completed items). I'm having a difficult time deciding on a color scheme. Upcoming events should be emphasized. Completed work items are useful information ("I finished this") but they should be least noticeable. I'll play around with both your color scheme and the references you provided just to see if something sticks.
rguiscard 4y ago
I put colours from Penumbra in palettes for easier comparison: https://codepen.io/rguiscard/full/OJvZLpd https://codepen.io/rguiscard/full/OJvZLpd
- solasluaith 4y ago
  Thank you, I might incorporate that into the README at some point!
  - ffhhj 4y ago
    When comparing them side by side, bluish purple is too similar to cyan.
    - solasluaith 4y ago
      The perceptual distance is the same between all colours according to the most recently available scientific data (with a relatively small margin of error for technical reasons). There could be issues with your display calibration (most likely), things like f.lux/night shift and so on that cause these to deviate from the calculated ideal values.
yarg 4y ago
I found the colours here to be a little bit muted - since you're using Oklab [0], it would be quite nice to make the saturation level user defined. I was messing around with something similar (before I found out about Oklab), that generated a nice pastel colour ring. (I didn't (at the time) know how to get the colours to a fixed perceptual saturation level, so gave up intending to come back to it.) //something like this static final int MAX = 255; static final float OFFSET_R = 0f; static final float OFFSET_G = (float)(TWO_PI/3); static final float OFFSET_B = 2 * OFFSET_G; public int buildColour(float theta){ final int r = round(MAX * sin(theta + OFFSET_R)); final int g = round(MAX * sin(theta + OFFSET_G)); final int b = round(MAX * sin(theta + OFFSET_B)); return 0xFF000000 | (r << 0x10) | (g << 0x08) | b; } (If I were doing it now, I'd use Oklab for normalisation.) [0] - https://bottosson.github.io/posts/oklab/ https://bottosson.github.io/posts/oklab/
- yarg 4y ago
  //fix the sine wave amplitude and offset static final float CHANNEL_MUL = 127.5f; static final float OFFSET_R = 0f; static final float OFFSET_G = (float)(TWO_PI/3); static final float OFFSET_B = 2 * OFFSET_G; public int buildColour(float theta){ final int r = round(CHANNEL_MUL * (1f + sin(theta + OFFSET_R))); final int g = round(CHANNEL_MUL * (1f + sin(theta + OFFSET_G))); final int b = round(CHANNEL_MUL * (1f + sin(theta + OFFSET_B))); return 0xFF000000 | (r << 0x10) | (g << 0x08) | b; }
- solasluaith 4y ago
  The saturation (or to be more accurate in this case, chroma) is actually already as high as possible (unless I’ve made a fundamental mistake) given the constraint that we want it to be uniform across colours and also uniform luminance. sRGB simply doesn’t allow for more sadly and I’m afraid it will probably be a long time before a new standard colour space for consumer displays comes around that would improve this. This tool that others have linked is pretty good if you’re fine with relaxing the constraints (just make sure to change to colour space to LCH OKlab): https://huetone.ardov.me https://huetone.ardov.me.
egypturnash 4y ago
So, um, I am a professional artist, and one of my regular tricks for figuring out why a drawing isn't working is to throw a desaturation layer on the top of the stack. Quite often it turns out that I have chosen colors that have contrast in saturation and hue, but very similar values. I play with the colors until they work in greyscale, then turn off that desaturation layer, do some small tweaks to make sure their hue/saturation work with their new values, and things look a lot better. A drawing with little contrast in its values is a drawing that is muddy and hard to make out. If the values are the same and it's high-saturation then it can even be actively painful to look at, as the colors start vibrating against each other in your visual cortex. Sometimes I do that deliberately; all rules of art are really guidelines, and any rule that says "never do this" actually means "don't do this without knowing damn well that you are going into difficult territory, and if you have a solid reason to do it anyway, make sure you're doing everything else extra well to make up for this". Good luck making this work despite having next to no value contrast.
- tshaddox 4y ago
  Having little contrast in lightness is mentioned multiple times on that page as being an explicit design goal.
  - egypturnash 4y ago
    Yes. It is. Like I said: good luck making this work, because you sure are breaking a pretty important rule of choosing colors.
    - svrtknst 4y ago
      Not saying you're right or wrong - personally I like the palette but not the theme - but these comments give off a pretty arrogant attitude that I think is uncalled for.
      - washbrain 4y ago
        It's not at all arrogant in my reading, more like lightly exasperated? They understand exactly what the color scheme is trying to do, they gave reasons why it is naive, and they basically said, "go with God".
Klonoar 4y ago
This is gonna sound a bit absurd for HN, but you need to tl;dr that README. Or at the very least give a link/jump first to the core files needed to try it out.
- solasluaith 4y ago
  I guess there’s an argument to be made to put the “available for” section closer to the top, but the main repository I linked is meant more as a design template that needs all this explanation, the VSCode extension for example is a lot more succinct. Plus the folders in the repo are named after what implementation they contain which I hoped was self-explanatory.
klabb3 4y ago
As I was designing UI for a recent project a realized that color is a subtle but powerful tool in providing a sense of depth and layering for human eyes. It's arguably even more important in today's trends of flat designs which has much less shadows, gloss, bevel and other 3d effects that were common 10-15 years ago. In a nutshell, warmer colors for foreground content and cooler for background goes a long way in adding depth. Even when working with the same base hue. The fundamental reason this works is precisely sky/sun interaction, which is fascinating. I used chroma.js with oklab as color space (importantly: it's perceptual). Working with HSV or RGB directly is very difficult in comparison.
- solasluaith 4y ago
  In this case, I was trying to keep the actual code as “flat” as possible, while offering exactly that pleasing sense of depth for the UI. For the latter, it could probably be better utilised in the VSCode extension but I hope at least the colours offer a good basis to work off of. Imho OKLab should be the defacto standard for designing with colour, I’m a big fan. Using the colour space based on the display technology never really made sense in this context as we are designing for humans and the display is merely a constraint.
  - klabb3 4y ago
    > Imho OKLab should be the defacto standard for designing with colour Agreed. It's a little challenging to make color picking UIs and programmatic interfaces I guess. Before seeing oklab in action, I never knew just how distorted a typical HSV picker is, it doesn't map to our vision at all.
ac130kz 4y ago
It looks great on the screenshots, but pretty dull and low contrast in VSCode, something is definitely not right. I believe it is due to rgb subpixel aliasing, which shifts the colors on smaller sized fonts. https://i.ibb.co/1GkpLw7/2022-08-05-T04-00-27-UTC.png https://i.ibb.co/1GkpLw7/2022-08-05-T04-00-27-UTC.png
- solasluaith 4y ago
  I’m on a Mac with a Retina display so that’s probably why I haven’t noticed this issue. I don’t know of any way to account for this off hand though, even if I had noticed it. Is it at least acceptable with the contrast++ version?
c_o_n_v_e_x 4y ago
The light color background is strikingly similar to the color of the paper used to print the Financial Times (FT) newspaper. I'd always thought of the color as an easy way differentiate the paper amongst others in a stack, as well as a potential way of signalling to other people that you read the FT. I had never considered the readability aspect before.
cjsawyer 4y ago
I am having trouble seeing a visible difference between half of the colors in the data visualization images. As far as I know, I don’t have any color vision issues. The green, cyan, and magenta colors all look basically the same. Am I alone here?
- solardev 4y ago
  You're talking about the "eight, seven, six" variations under each named color, right? Like it's hard to tell the 3 cyans apart from each other? If so, they look the same to me too. On the other hand, if you can't tell apart the cyan from the magenta, something else is going on.
  - JohnHaugeland 4y ago
    You're not supposed to see differences between the different palettes. They're not to be used concurrently.
pyjamafish 4y ago
Very interesting to see this, because a few days ago I started using a theme that takes the complete opposite approach: limited hue range, but wide luminance range. https://github.com/mcchrish/zenbones.nvim https://github.com/mcchrish/zenbones.nvim I've found it to be quite practical because it makes keywords easier to pick out, and it allows search matches and diagnostics to stand out better.
- solardev 4y ago
  This looks really cool!
- maegul 4y ago
  Nice work ... really like these! Personally, I could see myself tweaking the palettes to have a bit more saturation and maybe even have a particular hue palette or have the hues centre around a particular value as you do with the "warm" variant or the "Zenburned" (my fav, and similar to my own manual scheme) in the showcase (https://github.com/mcchrish/zenbones.nvim/blob/main/doc/showcase.md https://github.com/mcchrish/zenbones.nvim/blob/main/doc/show...). Interesting to compare to the the parent post as luminance/brightness contrast based perception is generally better than our colour contrast based perception. There's arguably less information, as colours are categorical (not continuous like brightness) and colours multiplex brightness with hue and saturation, but there are probably some pretty objective metrics in which your kind of scheme would tend to be better in readability.
  - solasluaith 4y ago
    I actually think that in overall perceptual difference, using hue and chroma only is in the same ballpark as luminance only. The relationship between colours would also be totally different as they are arranged on a line vs a circle/polygon in terms of perceptual difference. Would be interesting to compare quantitatively. Of course that doesn’t tell the whole story because in the end luminance and chroma are not perceived the same way as we tend to associate luminance with more with distance and light and hue and chroma more with the surface properties of the object. (As you mentioned we also tend to treat luminance as a continuous variable and colour as categorical even though both are continuous.) So if you want to use luminance because of this difference, that is a valid, but fundamentally different approach, but I don’t think it would necessarily be superior outright and I’ve tried to make the argument of why I prefer mine.
grimgrin 4y ago
If anyone is keen on making some vim colorschemes based off of this, you might like romainl's colorscheme template: https://github.com/romainl/vim-rnb https://github.com/romainl/vim-rnb > RNB is a template designed to help vimmers create their own colorschemes without much effort.
- solasluaith 4y ago
  I’m not a vim user but I’ll make a note of this in case I get around to implementing it myself. Realistically I would definitely need to work off of a template like this. Thanks!
jobarion 4y ago
I have deuteranomaly (the most common form of red-green deficiancy), and this doesn't work for me at all. I often rely on colors having both different hues and different saturation/brightness. I realize this is very likely not a goal of this color palette, but I thought I'd mention it anyway.
- mhd 4y ago
  Are there any color palettes like this or solarized specifically aiming at various types of color blindness? I think the Emacs "modus" themes allow for this[1], but I've rarely seen something that's "optimized" for some type of color blindness instead of not just being completely unreadable. [1]: https://protesilaos.com/codelog/2021-02-25-modus-themes-diffs-deuteranopia/ https://protesilaos.com/codelog/2021-02-25-modus-themes-diff...
  - OJFord 4y ago
    I think colour blindness varies too much - I am too but I think solarized is great, and this looks (at first glance, afk to compare) very similar. Just have to find something that looks good, or that almost does and tweak it slightly. But red/green in slide decks to draw distinctions/emphasise things should be banned. Except perhaps absolute #f00/#0f0, which nobody uses because they're not pastelly and subtle (and identical-looking to a chunk of the room) enough.
  - jobarion 4y ago
    Solarized is fine, so is any theme that emphasizes the red-blue or blue-yellow axis instead of the red-green one. Deuteranomaly is often misunderstood to mean that red and green are close to identical (which they are not necessarily), and everything else remains unaffected. It's much more complicated than that and e.g. different shades of red / green / orange can be hard to differentiate as as well. What's a little frustrating sometimes is that deuteranomaly affects around 8% of men, but is quite often ignored simply ignored. Using red-blue instead of red-green by default would make a lot of problems disappear.
  - fsloth 4y ago
    See https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0199239 https://journals.plos.org/plosone/article?id=10.1371/journal... and the "cividis" colour palette for one approach to colour blindness friendly colour scheme.
edwintorok 4y ago
I like that this uses OKLab instead of hsv/HSL that some colormaps use (which are not based on color theory). It would be nice if this used the upcoming WCAG3 contrast algorithm https://www.myndex.com/APCA/ https://www.myndex.com/APCA/ and ensured it's minimum contrast meets the recommended values there for body text, etc. There is a tool that can assist in designing color maps taking APCA into account https://huetone.ardov.me/ https://huetone.ardov.me/ For perceptually uniform colormaps see also https://colorcet.com/ https://colorcet.com/
- solasluaith 4y ago
  I was not aware of the new algorithm, thanks for bringing that up! Meeting the minimum values for body text in this new standard is unfortunately straight up impossible if you want to maintain uniform chroma for the syntax colouring as the contrast requirements are simply too strict and the sRGB colour space too small. I’ll try to read through all the justifications at some point and aim to meet their goals as best as possible once I understand them. Luckily the high contrast version is already very close to meeting the standard for fluent text and also has maximum chroma so at least there’s already a version that’s at least usable under these guidelines. The tool you linked is great and honestly if it would be updated to use OKLab instead of CIELab and allowed for additional constraints, would make my efforts obsolete. As it is, they are using maximum chroma per hue and non-uniform hue differences (plus CIELab has hue prediction errors in the first place).
  - edwintorok 4y ago
    You can use OKLch and APCA with that huetone website. See the gear icon in top right. I don't think your efforts are obsolete though, the 2 approaches could be combined IIUC your approach is based on computing values based on color science, and the tool/website is a more visual approach, it won't design the colorscheme for you, but you can use it to validate the colorscheme, or tweak it after the fact.
    - solasluaith 4y ago
      Oh awesome! I didn’t have time to look that deep into it, sorry for missing that part. Switching to OKLab actually reveals how narrow the bands of available colours can be in the different dimensions and how difficult it would probably be to hand-pick the colours that I’ve chosen. I agree now that they’re probably more complementary. It would be awesome if the tool allowed you to set constraints like the ones I used.
null0pointer 4y ago
Wow you’re getting a fair bit of criticism for this. Maybe it’s warranted. I don’t know, I’m not a color theorist. But I do think that the colors you’ve chosen are pleasing to my eye and the text samples were very comfortable to read. Even if you are the only person to use this palette and enjoy it then I think what you’ve created is worth it. Thanks for sharing your work!
- solasluaith 4y ago
  I think most of the criticism is fair and to be expected, especially as the design goals are very “opinionated” in a sense and on the other hand, everyone will have a subjective opinion on a colour palette themselves. The original intent was really just to use it myself, but if at least a couple other people may benefit, I feel like putting in the effort to make it shareable is worth it.
Retr0id 4y ago
This looks great, and I've just installed it. However, please increase the contrast of comments! They are borderline illegible, when they're generally more important than the code itself. Edit: I tweaked my config to make comments green - as someone who writes a lot of Python, this makes sense to me, since python multi-line strings are also used as comments.
- deleted 4y ago
  [deleted]
- Nic0 4y ago
  > I've just installed it Me too, on VSCode. looks nice, let's have a try.
- solasluaith 4y ago
  I just oriented myself on some other themes I found where comments were using a de-emphasised foreground colour. You could switch to one of the more high contrast versions but I can totally see how it would potentially make sense to use the same luminance level as the code. For the theme, I’m totally open to changing things around based on feedback like this.
  - dsego 4y ago
    This is actually my beef with almost all cool looking syntax color themes for sublime, they make comments fade into the background. And imho it should be the opposite, comments should jump out at you. https://www.benkuhn.net/syntax/ https://www.benkuhn.net/syntax/ https://jameshfisher.com/2014/05/11/your-syntax-highlighter-is-wrong/ https://jameshfisher.com/2014/05/11/your-syntax-highlighter-...
    - czottmann 4y ago
      100% ACK.
beanjuice 4y ago
What are the recent advances in color science which led you here? I will say that your color palettes look like they are out of a structural color publication.
- wongarsu 4y ago
  Not the author, but I guess that's mainly referencing Oklab (and everything that lead to its creation). https://bottosson.github.io/posts/oklab/ https://bottosson.github.io/posts/oklab/
  - solasluaith 4y ago
    Correct, OKlab is nothing fundamentally new in terms of the underlying science as it’s based mainly on CIECAM16, but it makes working with perceptual distances of colours a lot more user friendly.
jasonm23 4y ago
This looks like an almost carbon copy of the research done for Solarized. "Great"
- JohnHaugeland 4y ago
  They're really quite different Making the public accusation of plagiarism is a serious thing to do
- solasluaith 4y ago
  I acknowledge at the bottom that Solarised was one of the inspirations for this and some similar design principles apply in terms of the background colours, but really the motivation was a lot more specific and the construction fundamentally different. I really don’t see where you are getting “carbon copy”.
dash2 4y ago
Hey, this is cool. I hacked together an R package to use this as a palette: https://github.com/hughjonesd/penumbra https://github.com/hughjonesd/penumbra
- solasluaith 4y ago
  Awesome, thank you! I’ll give you some comments in the issue you posted.
rvieira 4y ago
I don't know if it's placebo effect (i.e. I'm believing this is better), but I always struggle with dark mode colours and this felt very easy and natural on VSCode (using Dark+).
- solasluaith 4y ago
  I’m glad you enjoy it! If it’s not the actual design goals that work for you, it might also just be the fact that even the enhanced contrast versions are overall relatively low contrast compared to many other themes. Often times “just enough” can be more pleasing than maximum contrast.
monokai_nl 4y ago
I think the idea of using perceptually uniform luminance in the different colors makes a lot of sense. Most light color schemes suffer from too much variance in luminance I think and your light color scheme looks balanced. Uniform luminance was one of my own main goals when I updated the original Monokai palette to https://monokai.pro https://monokai.pro. I first experimented with mathematical values based on CIElab, and dove into obscure color lighting models to see if I could come up with some clever mathematics to prove my color scheme in a scientific way. But somehow these algorithmic colors never looked nice and "fun" for lack of a better word. In the end I adjusted every color manually. So, Monokai Pro is not perfect science, but for me it somehow works.
- solasluaith 4y ago
  That’s the great thing about OKLab, it makes this kind of design much easier and more accessible without having to resort to color appearance models like CIECAM16 or even just CIECAM UCS. Beyond luminance, I’m also adjusting for uniform chroma as otherwise the colours still stand out to different degrees from the background, so that might have been one of the issues you ran into. Your color scheme was actually one of the ones I looked into before making my own because it at least came close to what I was looking for — and while it was close, the perfectionist in me wanted to make it mathematically optimal once I’ve started to think about it in these terms.
cormullion 4y ago
Very nice work. But: > The recommended font is Fira Code. is probably a bit orthogonal to the color scheme... :)
- solasluaith 4y ago
  That’s true, it’s just what I prefer and was testing with but the line could probably be omitted.
MrYellowP 4y ago
I don't like it and it makes no sense at all, because screens not just not emit natural light, they emit far too much blue light, too, which means that everyone should be using some sort of filter (like windows' night-light), or blue-filtering glasses, causing the colours to be off. Perceptual optimization makes no sense, when you optimize for something that's harmfull to the eyes.
- solasluaith 4y ago
  Yes, the blue light content is higher as screens use RGB instead of the full spectrum of light, but for this purpose I care about colour perception and as long as the stimulus in the cones is the same (which it should be if your display is properly calibrated, most are actually quite decent at this point straight out of the factory), this does not make a difference. Limiting the blue part of RGB makes the available colour space so small, that the design goals of this palette will be impossible to achieve. As far as I know, the most recent science says that blue light levels from displays are actually pretty much negligible in terms of overall health, but don’t quote me on that. For wakefulness, ideally you should probably not be working that late at night anyways and there’s f.lux and night shift for that if you must. These inherently make legibility of any colour worse though, including this palette.
  - MrYellowP 4y ago
    > displays are actually pretty much negligible in terms of overall health, but don’t quote me on that. Yeah, forget that. It's unreasonable to assume "negligible" is in any way or form acceptable when it comes to vision. It fucking isn't. Here's something fun! You can actually subjectively measure how bad it is. All it takes is or white background, in full screen, full brightness, in a dark room. It creates a burning-like sensation in the eyes. Then stop, wait a few minutes until it fades and repeat the process with the filter on. You'll actually notice a difference.
    - solasluaith 4y ago
      You’re aware that turning on a blue filter at the same brightness level will obviously decrease the overall emittance of the display? Most displays are already way too bright for ideal viewing conditions at maximum brightness, let alone in a completely dark room. Of course it will blind you at that setting and of course mostly turning off a third of the sub-pixels will reduce the issue. That’s why one should trust science over anecdotal evidence because a good scientist would control for brightness...
chronogram 4y ago
I liked it, but I do prefer VS Code’s default+ colour themes (for light or dark). For the terminal I use the “USWDS: The United States Web Design System” colours, which I find have a great luminance balance and a huge palette, I use the middle 50 vivid variants. See: https://designsystem.digital.gov/design-tokens/color/system-tokens/ https://designsystem.digital.gov/design-tokens/color/system-...
SteeleDynamics 4y ago
This looks great, OP! I've starrred the GitHub repo! Any idea when a Vim and Airline colorscheme will be available?
- solasluaith 4y ago
  There’s no set timeline for further implementations. I’ll try to create the most requested ones whenever I can in my free time, but I’m also open for others to contribute!
deleted 4y ago
[deleted]
Poyeyo 4y ago
I can only use my own color palette, because it is designed to separate features by hue. In my case, comments are gray, constants are yellow, strings are purple, markup like HTML is green, some parts inside the markup are blue, and the hot colors are for code, red-orange for keywords, orange-salmon for variable names, etc. No matter the language, I can rely on my theme to identify sections of the code, and it feels safe and familiar. All the other color palettes seem, to me, a random assortment of colors that completely ignore function, and that makes them unusable, no matter how pretty they may appear. I don't think anyone else uses my color palette, besides me =) It can be seen and downloaded from here: https://colorsublime.github.io/themes/Poyeyo/ https://colorsublime.github.io/themes/Poyeyo/

267 points by solasluaith 4y ago

AndrewOMartin 4y ago

Looks nice. Fancy justification too. Are you claiming it's a significant improvement over Solarised? Either way, good stuff.

solasluaith 4y ago
Thank you! I’m claiming it is an improvement in terms of usability, simply because Solarised wasn’t designed with these properties in mind. Whether it’s significant everyone needs to judge for themselves. I personally was mostly annoyed by how some colours are over-emphasised with Solarised, especially magenta and red, to a lesser degree orange. You could take a fundamentally different approach and use different levels of emphasis for different colours, but I don’t think this was done in a quantitative and purposeful way. It’s also just not the approach I favour as I (and probably others) prefer an overall less busy look more like a text. And aesthetics in general are of course subjective and were admittedly only of secondary consideration.
- wrycoder 4y ago
  To my eye, you've done an outstanding job.
  - hermitdev 4y ago
    I agree. For me, the DarkContrast++ looked best to me. Clear, crisp and easily readable after a long, sleep deprived day. I'll definitely be giving this a shot in the morning.
- funcDropShadow 4y ago
  At first, your color palette made a very good first impression to me. > I’m claiming it is an improvement in terms of usability, simply because Solarised wasn’t designed with these properties in mind. Are you sure about that? On [1] and [2] the creator of Solarized describes why he choose low contrast and specific hue differences, representable in CIELAB. That sounds rather similar to your first three points in [3]. Even if the approaches have some similarities, it does doesn't denigrate your work. Thanks for continuing this line of work. And I am looking forward to test Penumbra in comparison to Solarized. [1]: https://ethanschoonover.com/solarized/#features https://ethanschoonover.com/solarized/#features [2]: https://ethanschoonover.com/solarized/ https://ethanschoonover.com/solarized/ [3]: https://github.com/nealmckee/penumbra#Features https://github.com/nealmckee/penumbra#Features
  - bXVsbGVy 4y ago
    It is like solarized in the sense the colors have same luminance and are analogous. But it uses OKLab instead of CIELab.
  - solasluaith 4y ago
    The reasoning on the first two points is the same, yes, simply because I agree with Ethan’s. The two big differences are: I’m aiming for perceptually uniform colour differences instead of the same luminance and my background colours are directly sampled from daylight. For the colours, this means uniform chroma and hues that aren’t hand-picked but optimised (on top of that using a more hue-accurate colour space). I’d argue there’s enough of a difference, especially in the visual result, to make this more than an iteration, but even if it was simple iterative, there’s nothing bad about that and it can still be valuable work without being plagiarism .
  - dngray 4y ago
    > The search for a theme led me to Solarized by Ethan Schoonover, which I was ultimately not satisfied with but inspired me to try and improve on its ideas. https://github.com/nealmckee/penumbra#acknowledgments https://github.com/nealmckee/penumbra#acknowledgments Which reminds me, of https://github.com/jan-warchol/selenized/blob/master/whats-wrong-with-solarized.md https://github.com/jan-warchol/selenized/blob/master/whats-w... Selenized is another theme which aims to improve on Solarized. https://github.com/jan-warchol/selenized/blob/master/features-and-design.md https://github.com/jan-warchol/selenized/blob/master/feature... https://github.com/jan-warchol/selenized/blob/master/balancing-lightness-of-colors.md https://github.com/jan-warchol/selenized/blob/master/balanci... Wonder how they compare.

powersnail 4y ago

I gave it a try, and in plain text files, it seems way too low contrast: [screenshot](https://i.postimg.cc/65Xcx9Cv/Screenshot-20220804-161004.png https://i.postimg.cc/65Xcx9Cv/Screenshot-20220804-161004.png).

solasluaith 4y ago
Good catch, that is an issue with the VSCode extension, apparently it’s using the colour for comments (which is purposefully low contrast) for plain text when it should be using the main foreground colour. I’ll try to look into that! Also, the light theme only has a “barely enough contrast” version due to constraints described in the README, the dark theme has options with much more. (compare it to the greys used in the samples and you’ll see what I mean)
- powersnail 4y ago
  That makes sense; I thought it kinda looks like comment. Pretty pleasant colors, otherwise. Good work!
  - solasluaith 4y ago
    Thank you, I’m glad you enjoy them!
- edwintorok 4y ago
  FWIW comments are quite an important part of reading code, it should not be hidden, at least when comments are used for documentation purposes. It shouldn't be as prominent as the main code, but should be pretty close to it. Very few color themes get this right.
  - solasluaith 4y ago
    I’m not sure if I’m already using the closest colour in terms of luminance or not, I’d have to check. If not, I’m very open to pull requests on the theme, including fundamental reworks. Otherwise there might be an argument whether one would want to make the closest de-emphasised colour less so, but that would require more fundamental changes to the palette (which I’m also open to for the background colours!). I think for this part I looked at what others were doing so I might have gotten it wrong from them.

pandoro 4y ago

Let me first state that I understand that your goal was not to create an "accessible" palette and you state in your README that the palette is not "particularly suitable for people with colour vision deficiency". But being colorblind myself (deuteranomaly, up to 8% of the male population), I would still like to offer feedback: it is extremely hard for me to distinguish most of the colors in this palette (especially in the light version); more so than with "normal/default" palettes

solasluaith 4y ago
I’m actually working on another project where I’m trying to design fully optimized categorical colour palettes for people with colour vision deficiency, so I’m fully aware of this issue. When trying to encode highlighting with only chroma and hue and still be accessible, one would probably have to limit the palette to two hues which obviously isn’t practical. This means it would be necessary to use luminance, which expressly goes against the design goals and would eliminate the advantages I’m trying to achieve for people with normal vision. But you're right, I should have been more clear in the docu, this palette is actually particularly unsuitable. (update: clarified it now)

travisd 4y ago

The images shown at the top are (probably) designed to show off the full "dynamic range" of the color palette, but reading those code snippets is a bit overwhelming (and I suspect it's just because you've crammed so many things into a very small space). I think it might be easier to get a visual "grok" of the color scheme with a longer snippet that is more representative of real code.

solasluaith 4y ago
Yep, that’s exactly how those came to be — as many colours in as short a snippet as possible. I honestly haven’t put much thought into “marketing” the theme yet and I would want to properly think about how to best do the highlighting before showing it off in real code. Ideally the latter also with the help of more seasoned programmers. I appreciate the feedback and will try to keep it in mind once I get to that stage!
- junon 4y ago
  Those sorts of snippets, dark on left, light on right, with each row in different languages. Maybe 5 or 6 rows at least. That's what people want to see, at least.

RicoElectrico 4y ago

I think that pallettes with perceptually uniform brightness don't really make sense as generative models. Different colors have different apparent brightness and we're used to it. There's a kindergarten near me with different sections of the fence painted in different "basic" colors, it doesn't look jarring at all with yellow and cyan being brighter than red. Such colors spaces are great for color difference measurement, though.

solasluaith 4y ago
That’s the point though, these colours are great because they have (almost) uniform perceptual differences and that is what I was aiming for. Of course this means that “yellow” no longer looks like the (much brighter) yellow that we’re intuitively used to, but that yellow would also jump out from the page much more than the main text colour or other “naturally” darker colours. And I still tried to position them as close as possible to intuitively named colours though with all the other constraints there wasn’t much room for that. Whether you think this even luminance is something desirable is up to your personal preference, but in my opinion it makes the code more readable as your eye isn’t drawn to things as much when you’re not actively scanning for them.

junon 4y ago

I'm going to try this because I love the concept. However I have doubts - part of the reason I use syntax highlighting is to... well, highlight important things. Part of being able to skim code is to pick out the key words or symbols that denote control flow, important (exceptional, even) cases, etc. The dizzying array of identifiers is less important when trying to skim and pick apart the general "feel" of code quickly. In this pallette, at least with python, the identifiers are red, everything is "flat" (due to the perceptual brightness) and thus nothing really sticks out or gives me "grit" to hold on to when navigating around. I could be wrong. This is just my hypothesis going in. Cool project nonetheless, I love the idea to use color science as the basis for this.

maegul 4y ago
Feel the same way. I’ve made my own personal colour scheme over time by manually adjusting colours by eye (fun procrastination). Following personal and intuitive preferences this way has lead to a palette that is almost certainly not uniform but one that I mostly like. I suspect a useful tool would be one that starts with vision science based uniformities but that then enables personalised tweaks, ideally with vision science guidance. To your point, it matters what kind of tokens a colour is going to be used for. If they’re small (eg operators), then the effective perceptual uniformity is broken. They’ll be less conspicuous. Being brighter and more saturated would probably help. Perceptual salience can be tricky, and it’s useful to remember that our colour vision is flawed and finicky. Similarly but inverted for large tokens such as class names. Beyond that, once you start modulating saturation and brightness to get a nicer look, you’re back into a 3D colour space where the evenly spaced hues idea starts to make less sense, or so I suspect. Nonetheless, cool work! I would have liked to do the same if I was able!
- edwintorok 4y ago
  Try https://huetone.ardov.me/ https://huetone.ardov.me/ for a tool based on vision science guidance.
- bXVsbGVy 4y ago
  > Perceptual salience This is defined by luminance. This is the 'L' in Lab and OKLab (and in their polar representation: LCH and OKLCH).

tra3 4y ago

This is timely. I’m creating a webapp and I’m simply unable to create a good looking Color combination. Going to give this a try. I like the fact that each Color has an associated meaning.

solasluaith 4y ago
If you care about accessibility and these colours have any sort of function or meaning within the app, I’m afraid I would advise against using these colours as they were created for a quite specific use-case — colouring tokens within “fluid” text. If you just like them aesthetically and all they’re meant to do is look good, feel free, though I have to say they weren’t designed with aesthetics in mind at all. For accessible categorical colour schemes, check out Okabe-Ito, Paul Tol or colour brewer.
- tra3 4y ago
  Thanks, that's very kind of you. I'm using an open source calendar component to visualize my agenda. I have various types of events I'm showing (scheduled work items, events and completed items). I'm having a difficult time deciding on a color scheme. Upcoming events should be emphasized. Completed work items are useful information ("I finished this") but they should be least noticeable. I'll play around with both your color scheme and the references you provided just to see if something sticks.

rguiscard 4y ago

I put colours from Penumbra in palettes for easier comparison: https://codepen.io/rguiscard/full/OJvZLpd https://codepen.io/rguiscard/full/OJvZLpd

solasluaith 4y ago
Thank you, I might incorporate that into the README at some point!
- ffhhj 4y ago
  When comparing them side by side, bluish purple is too similar to cyan.
  - solasluaith 4y ago
    The perceptual distance is the same between all colours according to the most recently available scientific data (with a relatively small margin of error for technical reasons). There could be issues with your display calibration (most likely), things like f.lux/night shift and so on that cause these to deviate from the calculated ideal values.

yarg 4y ago

I found the colours here to be a little bit muted - since you're using Oklab [0], it would be quite nice to make the saturation level user defined. I was messing around with something similar (before I found out about Oklab), that generated a nice pastel colour ring. (I didn't (at the time) know how to get the colours to a fixed perceptual saturation level, so gave up intending to come back to it.) //something like this static final int MAX = 255; static final float OFFSET_R = 0f; static final float OFFSET_G = (float)(TWO_PI/3); static final float OFFSET_B = 2 * OFFSET_G; public int buildColour(float theta){ final int r = round(MAX * sin(theta + OFFSET_R)); final int g = round(MAX * sin(theta + OFFSET_G)); final int b = round(MAX * sin(theta + OFFSET_B)); return 0xFF000000 | (r << 0x10) | (g << 0x08) | b; } (If I were doing it now, I'd use Oklab for normalisation.) [0] - https://bottosson.github.io/posts/oklab/ https://bottosson.github.io/posts/oklab/

yarg 4y ago
//fix the sine wave amplitude and offset static final float CHANNEL_MUL = 127.5f; static final float OFFSET_R = 0f; static final float OFFSET_G = (float)(TWO_PI/3); static final float OFFSET_B = 2 * OFFSET_G; public int buildColour(float theta){ final int r = round(CHANNEL_MUL * (1f + sin(theta + OFFSET_R))); final int g = round(CHANNEL_MUL * (1f + sin(theta + OFFSET_G))); final int b = round(CHANNEL_MUL * (1f + sin(theta + OFFSET_B))); return 0xFF000000 | (r << 0x10) | (g << 0x08) | b; }
solasluaith 4y ago
The saturation (or to be more accurate in this case, chroma) is actually already as high as possible (unless I’ve made a fundamental mistake) given the constraint that we want it to be uniform across colours and also uniform luminance. sRGB simply doesn’t allow for more sadly and I’m afraid it will probably be a long time before a new standard colour space for consumer displays comes around that would improve this. This tool that others have linked is pretty good if you’re fine with relaxing the constraints (just make sure to change to colour space to LCH OKlab): https://huetone.ardov.me https://huetone.ardov.me.

egypturnash 4y ago

So, um, I am a professional artist, and one of my regular tricks for figuring out why a drawing isn't working is to throw a desaturation layer on the top of the stack. Quite often it turns out that I have chosen colors that have contrast in saturation and hue, but very similar values. I play with the colors until they work in greyscale, then turn off that desaturation layer, do some small tweaks to make sure their hue/saturation work with their new values, and things look a lot better. A drawing with little contrast in its values is a drawing that is muddy and hard to make out. If the values are the same and it's high-saturation then it can even be actively painful to look at, as the colors start vibrating against each other in your visual cortex. Sometimes I do that deliberately; all rules of art are really guidelines, and any rule that says "never do this" actually means "don't do this without knowing damn well that you are going into difficult territory, and if you have a solid reason to do it anyway, make sure you're doing everything else extra well to make up for this". Good luck making this work despite having next to no value contrast.

tshaddox 4y ago
Having little contrast in lightness is mentioned multiple times on that page as being an explicit design goal.
- egypturnash 4y ago
  Yes. It is. Like I said: good luck making this work, because you sure are breaking a pretty important rule of choosing colors.
  - svrtknst 4y ago
    Not saying you're right or wrong - personally I like the palette but not the theme - but these comments give off a pretty arrogant attitude that I think is uncalled for.
    - washbrain 4y ago
      It's not at all arrogant in my reading, more like lightly exasperated? They understand exactly what the color scheme is trying to do, they gave reasons why it is naive, and they basically said, "go with God".

Klonoar 4y ago

This is gonna sound a bit absurd for HN, but you need to tl;dr that README. Or at the very least give a link/jump first to the core files needed to try it out.

solasluaith 4y ago
I guess there’s an argument to be made to put the “available for” section closer to the top, but the main repository I linked is meant more as a design template that needs all this explanation, the VSCode extension for example is a lot more succinct. Plus the folders in the repo are named after what implementation they contain which I hoped was self-explanatory.

klabb3 4y ago

As I was designing UI for a recent project a realized that color is a subtle but powerful tool in providing a sense of depth and layering for human eyes. It's arguably even more important in today's trends of flat designs which has much less shadows, gloss, bevel and other 3d effects that were common 10-15 years ago. In a nutshell, warmer colors for foreground content and cooler for background goes a long way in adding depth. Even when working with the same base hue. The fundamental reason this works is precisely sky/sun interaction, which is fascinating. I used chroma.js with oklab as color space (importantly: it's perceptual). Working with HSV or RGB directly is very difficult in comparison.

solasluaith 4y ago
In this case, I was trying to keep the actual code as “flat” as possible, while offering exactly that pleasing sense of depth for the UI. For the latter, it could probably be better utilised in the VSCode extension but I hope at least the colours offer a good basis to work off of. Imho OKLab should be the defacto standard for designing with colour, I’m a big fan. Using the colour space based on the display technology never really made sense in this context as we are designing for humans and the display is merely a constraint.
- klabb3 4y ago
  > Imho OKLab should be the defacto standard for designing with colour Agreed. It's a little challenging to make color picking UIs and programmatic interfaces I guess. Before seeing oklab in action, I never knew just how distorted a typical HSV picker is, it doesn't map to our vision at all.

ac130kz 4y ago

It looks great on the screenshots, but pretty dull and low contrast in VSCode, something is definitely not right. I believe it is due to rgb subpixel aliasing, which shifts the colors on smaller sized fonts. https://i.ibb.co/1GkpLw7/2022-08-05-T04-00-27-UTC.png https://i.ibb.co/1GkpLw7/2022-08-05-T04-00-27-UTC.png

solasluaith 4y ago
I’m on a Mac with a Retina display so that’s probably why I haven’t noticed this issue. I don’t know of any way to account for this off hand though, even if I had noticed it. Is it at least acceptable with the contrast++ version?

c_o_n_v_e_x 4y ago

The light color background is strikingly similar to the color of the paper used to print the Financial Times (FT) newspaper. I'd always thought of the color as an easy way differentiate the paper amongst others in a stack, as well as a potential way of signalling to other people that you read the FT. I had never considered the readability aspect before.

cjsawyer 4y ago

I am having trouble seeing a visible difference between half of the colors in the data visualization images. As far as I know, I don’t have any color vision issues. The green, cyan, and magenta colors all look basically the same. Am I alone here?

solardev 4y ago
You're talking about the "eight, seven, six" variations under each named color, right? Like it's hard to tell the 3 cyans apart from each other? If so, they look the same to me too. On the other hand, if you can't tell apart the cyan from the magenta, something else is going on.
- JohnHaugeland 4y ago
  You're not supposed to see differences between the different palettes. They're not to be used concurrently.

pyjamafish 4y ago

Very interesting to see this, because a few days ago I started using a theme that takes the complete opposite approach: limited hue range, but wide luminance range. https://github.com/mcchrish/zenbones.nvim https://github.com/mcchrish/zenbones.nvim I've found it to be quite practical because it makes keywords easier to pick out, and it allows search matches and diagnostics to stand out better.

solardev 4y ago
This looks really cool!
maegul 4y ago
Nice work ... really like these! Personally, I could see myself tweaking the palettes to have a bit more saturation and maybe even have a particular hue palette or have the hues centre around a particular value as you do with the "warm" variant or the "Zenburned" (my fav, and similar to my own manual scheme) in the showcase (https://github.com/mcchrish/zenbones.nvim/blob/main/doc/showcase.md https://github.com/mcchrish/zenbones.nvim/blob/main/doc/show...). Interesting to compare to the the parent post as luminance/brightness contrast based perception is generally better than our colour contrast based perception. There's arguably less information, as colours are categorical (not continuous like brightness) and colours multiplex brightness with hue and saturation, but there are probably some pretty objective metrics in which your kind of scheme would tend to be better in readability.
- solasluaith 4y ago
  I actually think that in overall perceptual difference, using hue and chroma only is in the same ballpark as luminance only. The relationship between colours would also be totally different as they are arranged on a line vs a circle/polygon in terms of perceptual difference. Would be interesting to compare quantitatively. Of course that doesn’t tell the whole story because in the end luminance and chroma are not perceived the same way as we tend to associate luminance with more with distance and light and hue and chroma more with the surface properties of the object. (As you mentioned we also tend to treat luminance as a continuous variable and colour as categorical even though both are continuous.) So if you want to use luminance because of this difference, that is a valid, but fundamentally different approach, but I don’t think it would necessarily be superior outright and I’ve tried to make the argument of why I prefer mine.

grimgrin 4y ago

If anyone is keen on making some vim colorschemes based off of this, you might like romainl's colorscheme template: https://github.com/romainl/vim-rnb https://github.com/romainl/vim-rnb > RNB is a template designed to help vimmers create their own colorschemes without much effort.

solasluaith 4y ago
I’m not a vim user but I’ll make a note of this in case I get around to implementing it myself. Realistically I would definitely need to work off of a template like this. Thanks!

jobarion 4y ago

I have deuteranomaly (the most common form of red-green deficiancy), and this doesn't work for me at all. I often rely on colors having both different hues and different saturation/brightness. I realize this is very likely not a goal of this color palette, but I thought I'd mention it anyway.

mhd 4y ago
Are there any color palettes like this or solarized specifically aiming at various types of color blindness? I think the Emacs "modus" themes allow for this[1], but I've rarely seen something that's "optimized" for some type of color blindness instead of not just being completely unreadable. [1]: https://protesilaos.com/codelog/2021-02-25-modus-themes-diffs-deuteranopia/ https://protesilaos.com/codelog/2021-02-25-modus-themes-diff...
- OJFord 4y ago
  I think colour blindness varies too much - I am too but I think solarized is great, and this looks (at first glance, afk to compare) very similar. Just have to find something that looks good, or that almost does and tweak it slightly. But red/green in slide decks to draw distinctions/emphasise things should be banned. Except perhaps absolute #f00/#0f0, which nobody uses because they're not pastelly and subtle (and identical-looking to a chunk of the room) enough.
- jobarion 4y ago
  Solarized is fine, so is any theme that emphasizes the red-blue or blue-yellow axis instead of the red-green one. Deuteranomaly is often misunderstood to mean that red and green are close to identical (which they are not necessarily), and everything else remains unaffected. It's much more complicated than that and e.g. different shades of red / green / orange can be hard to differentiate as as well. What's a little frustrating sometimes is that deuteranomaly affects around 8% of men, but is quite often ignored simply ignored. Using red-blue instead of red-green by default would make a lot of problems disappear.
- fsloth 4y ago
  See https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0199239 https://journals.plos.org/plosone/article?id=10.1371/journal... and the "cividis" colour palette for one approach to colour blindness friendly colour scheme.

edwintorok 4y ago

I like that this uses OKLab instead of hsv/HSL that some colormaps use (which are not based on color theory). It would be nice if this used the upcoming WCAG3 contrast algorithm https://www.myndex.com/APCA/ https://www.myndex.com/APCA/ and ensured it's minimum contrast meets the recommended values there for body text, etc. There is a tool that can assist in designing color maps taking APCA into account https://huetone.ardov.me/ https://huetone.ardov.me/ For perceptually uniform colormaps see also https://colorcet.com/ https://colorcet.com/

solasluaith 4y ago
I was not aware of the new algorithm, thanks for bringing that up! Meeting the minimum values for body text in this new standard is unfortunately straight up impossible if you want to maintain uniform chroma for the syntax colouring as the contrast requirements are simply too strict and the sRGB colour space too small. I’ll try to read through all the justifications at some point and aim to meet their goals as best as possible once I understand them. Luckily the high contrast version is already very close to meeting the standard for fluent text and also has maximum chroma so at least there’s already a version that’s at least usable under these guidelines. The tool you linked is great and honestly if it would be updated to use OKLab instead of CIELab and allowed for additional constraints, would make my efforts obsolete. As it is, they are using maximum chroma per hue and non-uniform hue differences (plus CIELab has hue prediction errors in the first place).
- edwintorok 4y ago
  You can use OKLch and APCA with that huetone website. See the gear icon in top right. I don't think your efforts are obsolete though, the 2 approaches could be combined IIUC your approach is based on computing values based on color science, and the tool/website is a more visual approach, it won't design the colorscheme for you, but you can use it to validate the colorscheme, or tweak it after the fact.
  - solasluaith 4y ago
    Oh awesome! I didn’t have time to look that deep into it, sorry for missing that part. Switching to OKLab actually reveals how narrow the bands of available colours can be in the different dimensions and how difficult it would probably be to hand-pick the colours that I’ve chosen. I agree now that they’re probably more complementary. It would be awesome if the tool allowed you to set constraints like the ones I used.

null0pointer 4y ago

Wow you’re getting a fair bit of criticism for this. Maybe it’s warranted. I don’t know, I’m not a color theorist. But I do think that the colors you’ve chosen are pleasing to my eye and the text samples were very comfortable to read. Even if you are the only person to use this palette and enjoy it then I think what you’ve created is worth it. Thanks for sharing your work!

solasluaith 4y ago
I think most of the criticism is fair and to be expected, especially as the design goals are very “opinionated” in a sense and on the other hand, everyone will have a subjective opinion on a colour palette themselves. The original intent was really just to use it myself, but if at least a couple other people may benefit, I feel like putting in the effort to make it shareable is worth it.

Retr0id 4y ago

This looks great, and I've just installed it. However, please increase the contrast of comments! They are borderline illegible, when they're generally more important than the code itself. Edit: I tweaked my config to make comments green - as someone who writes a lot of Python, this makes sense to me, since python multi-line strings are also used as comments.

deleted 4y ago
[deleted]
Nic0 4y ago
> I've just installed it Me too, on VSCode. looks nice, let's have a try.
solasluaith 4y ago
I just oriented myself on some other themes I found where comments were using a de-emphasised foreground colour. You could switch to one of the more high contrast versions but I can totally see how it would potentially make sense to use the same luminance level as the code. For the theme, I’m totally open to changing things around based on feedback like this.
- dsego 4y ago
  This is actually my beef with almost all cool looking syntax color themes for sublime, they make comments fade into the background. And imho it should be the opposite, comments should jump out at you. https://www.benkuhn.net/syntax/ https://www.benkuhn.net/syntax/ https://jameshfisher.com/2014/05/11/your-syntax-highlighter-is-wrong/ https://jameshfisher.com/2014/05/11/your-syntax-highlighter-...
  - czottmann 4y ago
    100% ACK.

beanjuice 4y ago

What are the recent advances in color science which led you here? I will say that your color palettes look like they are out of a structural color publication.

wongarsu 4y ago
Not the author, but I guess that's mainly referencing Oklab (and everything that lead to its creation). https://bottosson.github.io/posts/oklab/ https://bottosson.github.io/posts/oklab/
- solasluaith 4y ago
  Correct, OKlab is nothing fundamentally new in terms of the underlying science as it’s based mainly on CIECAM16, but it makes working with perceptual distances of colours a lot more user friendly.

jasonm23 4y ago

This looks like an almost carbon copy of the research done for Solarized. "Great"

JohnHaugeland 4y ago
They're really quite different Making the public accusation of plagiarism is a serious thing to do
solasluaith 4y ago
I acknowledge at the bottom that Solarised was one of the inspirations for this and some similar design principles apply in terms of the background colours, but really the motivation was a lot more specific and the construction fundamentally different. I really don’t see where you are getting “carbon copy”.

dash2 4y ago

Hey, this is cool. I hacked together an R package to use this as a palette: https://github.com/hughjonesd/penumbra https://github.com/hughjonesd/penumbra

solasluaith 4y ago
Awesome, thank you! I’ll give you some comments in the issue you posted.

rvieira 4y ago

I don't know if it's placebo effect (i.e. I'm believing this is better), but I always struggle with dark mode colours and this felt very easy and natural on VSCode (using Dark+).

solasluaith 4y ago
I’m glad you enjoy it! If it’s not the actual design goals that work for you, it might also just be the fact that even the enhanced contrast versions are overall relatively low contrast compared to many other themes. Often times “just enough” can be more pleasing than maximum contrast.

monokai_nl 4y ago

I think the idea of using perceptually uniform luminance in the different colors makes a lot of sense. Most light color schemes suffer from too much variance in luminance I think and your light color scheme looks balanced. Uniform luminance was one of my own main goals when I updated the original Monokai palette to https://monokai.pro https://monokai.pro. I first experimented with mathematical values based on CIElab, and dove into obscure color lighting models to see if I could come up with some clever mathematics to prove my color scheme in a scientific way. But somehow these algorithmic colors never looked nice and "fun" for lack of a better word. In the end I adjusted every color manually. So, Monokai Pro is not perfect science, but for me it somehow works.

solasluaith 4y ago
That’s the great thing about OKLab, it makes this kind of design much easier and more accessible without having to resort to color appearance models like CIECAM16 or even just CIECAM UCS. Beyond luminance, I’m also adjusting for uniform chroma as otherwise the colours still stand out to different degrees from the background, so that might have been one of the issues you ran into. Your color scheme was actually one of the ones I looked into before making my own because it at least came close to what I was looking for — and while it was close, the perfectionist in me wanted to make it mathematically optimal once I’ve started to think about it in these terms.

cormullion 4y ago

Very nice work. But: > The recommended font is Fira Code. is probably a bit orthogonal to the color scheme... :)

solasluaith 4y ago
That’s true, it’s just what I prefer and was testing with but the line could probably be omitted.

MrYellowP 4y ago

I don't like it and it makes no sense at all, because screens not just not emit natural light, they emit far too much blue light, too, which means that everyone should be using some sort of filter (like windows' night-light), or blue-filtering glasses, causing the colours to be off. Perceptual optimization makes no sense, when you optimize for something that's harmfull to the eyes.

solasluaith 4y ago
Yes, the blue light content is higher as screens use RGB instead of the full spectrum of light, but for this purpose I care about colour perception and as long as the stimulus in the cones is the same (which it should be if your display is properly calibrated, most are actually quite decent at this point straight out of the factory), this does not make a difference. Limiting the blue part of RGB makes the available colour space so small, that the design goals of this palette will be impossible to achieve. As far as I know, the most recent science says that blue light levels from displays are actually pretty much negligible in terms of overall health, but don’t quote me on that. For wakefulness, ideally you should probably not be working that late at night anyways and there’s f.lux and night shift for that if you must. These inherently make legibility of any colour worse though, including this palette.
- MrYellowP 4y ago
  > displays are actually pretty much negligible in terms of overall health, but don’t quote me on that. Yeah, forget that. It's unreasonable to assume "negligible" is in any way or form acceptable when it comes to vision. It fucking isn't. Here's something fun! You can actually subjectively measure how bad it is. All it takes is or white background, in full screen, full brightness, in a dark room. It creates a burning-like sensation in the eyes. Then stop, wait a few minutes until it fades and repeat the process with the filter on. You'll actually notice a difference.
  - solasluaith 4y ago
    You’re aware that turning on a blue filter at the same brightness level will obviously decrease the overall emittance of the display? Most displays are already way too bright for ideal viewing conditions at maximum brightness, let alone in a completely dark room. Of course it will blind you at that setting and of course mostly turning off a third of the sub-pixels will reduce the issue. That’s why one should trust science over anecdotal evidence because a good scientist would control for brightness...

chronogram 4y ago

I liked it, but I do prefer VS Code’s default+ colour themes (for light or dark). For the terminal I use the “USWDS: The United States Web Design System” colours, which I find have a great luminance balance and a huge palette, I use the middle 50 vivid variants. See: https://designsystem.digital.gov/design-tokens/color/system-tokens/ https://designsystem.digital.gov/design-tokens/color/system-...

SteeleDynamics 4y ago

This looks great, OP! I've starrred the GitHub repo! Any idea when a Vim and Airline colorscheme will be available?

solasluaith 4y ago
There’s no set timeline for further implementations. I’ll try to create the most requested ones whenever I can in my free time, but I’m also open for others to contribute!

deleted 4y ago

[deleted]

Poyeyo 4y ago

I can only use my own color palette, because it is designed to separate features by hue. In my case, comments are gray, constants are yellow, strings are purple, markup like HTML is green, some parts inside the markup are blue, and the hot colors are for code, red-orange for keywords, orange-salmon for variable names, etc. No matter the language, I can rely on my theme to identify sections of the code, and it feels safe and familiar. All the other color palettes seem, to me, a random assortment of colors that completely ignore function, and that makes them unusable, no matter how pretty they may appear. I don't think anyone else uses my color palette, besides me =) It can be seen and downloaded from here: https://colorsublime.github.io/themes/Poyeyo/ https://colorsublime.github.io/themes/Poyeyo/