5 ms·

These kind of palettes always struggle with brighter yellows like #ffe400 because of the necessary normalization across hues to make it a full palette in first

These kind of palettes always struggle with brighter yellows like #ffe400 because of the necessary normalization across hues to make it a full palette in first place, which of course prevents some colors to fulfill their potential (which is often at their peak chromacity). No AI can solve this problem because it's how colors work. I think it's best to keep the palette separate from the code (e.g. store palettes in an app like Sip), and not insist on the replaceability of colors across a range. E.g. instead of blue-500 use functional names like btn-color or brand-color and alias the colors that way in code.

sillysaurusx 6y ago
AI can solve it better than normal code can: you have to train on how humans see color. (This has been a long-standing ambition of mine, but sadly there's not yet much work or infrastructure in the field of "graphics AI." There's barely one software rasterizer. https://github.com/vahidk/tf.rasterizer https://github.com/vahidk/tf.rasterizer) The key would be to spend an absurd amount of time carefully cataloguing good colors – by hand – and training it to extrapolate from that information. That's basically how the Musnell color system was created. https://en.wikipedia.org/wiki/Munsell_color_system https://en.wikipedia.org/wiki/Munsell_color_system It's the realization that color space isn't spherical, it's not a cube, it's not any shape at all except "how humans happened to evolve." Even the term "max chromaticity" is just a reflection of the weird way our brains happen to work, not an intrinsic property of color. In that context, a universal curve fitting algorithm might be handy. Which of course is all that AI is.
- deltron3030 6y ago
  HSLuv is a sphere: https://www.hsluv.org/ https://www.hsluv.org/ They took the CIELUV/LCH/HCL solid and compressed it into a sphere, similar to HSL on top of RGB. The L* (perceptual luminance) value is consistent across hues, it can also replace the 100/200/300 scale for design systems. But even the CIE model has flaws, chromacity is inherently linked with brightness/luminance, no color model can change that. A more saturated/chromatic color will always be perceived as more bright than a less chromatic one at the same luminance. And in order to create a palette you need normalization, which will always weed out individual color defining peaks.
  - sillysaurusx 6y ago
    I gave up trying to reason about color models when I realized the CIE model wasn't determined rigorously and empirically. A full critique is beyond the scope of 3AM, but, it's kind of fascinating to go back to the roots of color models and read about how precisely they came up with them. Remember to turn on your skepticism when you do. "X is a sphere" has to be reconciled with "What are the chances that our visual system would evolve into a perfect sphere with no flaws?" For some reason, people are so determined to turn complicated phenomena into a pure and simple form. Even astronomy wanted to believe that orbits were circles, since circles are clearly more perfect. But nature isn't perfect; it simply exists.
    - deltron3030 6y ago
      For me, their (CIEs) color opponents are already wrong, I prefer NCS: https://en.wikipedia.org/wiki/Natural_Color_System https://en.wikipedia.org/wiki/Natural_Color_System
      - trevyn 6y ago
        Are there any NCS-based web tools for generating such a palette? The "official" tool is... bad.
        deltron3030 6y ago
        Not to my knowledge. Their official tool is for interior designers I think, and their system is copyrighted. I'm using a custom "color wheel" that's inspired by NCS opponents and CIE. I might release it open source as a web app though. It's actually part of a bigger design system for design systems I'm working on, but I'll see if I can break it off into it's own thing somehow.
        trevyn 6y ago
        That would be awesome, thank you.
    - 6y ago
- deleted 6y ago
  [deleted]
- mpetroff 6y ago
  > The key would be to spend an absurd amount of time carefully cataloguing good colors – by hand – and training it to extrapolate from that information. It's a bit more nuanced than that. Not only do you need to catalog good colors (and color combinations), you need to have it done by a large number of people, since different people perceive color differently and have different aesthetic preferences. This is something I've been working on in the limited context of color cycles for data visualization and plotting [1][2]. Based on my preliminary analysis, these data are quite noisy. [1] https://colorcyclesurvey.mpetroff.net/ https://colorcyclesurvey.mpetroff.net/ [2] https://mpetroff.net/2020/01/color-cycle-survey-update/ https://mpetroff.net/2020/01/color-cycle-survey-update/
  - suby 6y ago
    Not to mention are viewing the colors on different screens, with possibly different tv/monitor modes enabled which will alter colors. I have two monitors where colors can look noticeably different. Unfortunately it's probably not feasible to account for this.
    - sillysaurusx 6y ago
      You're absolutely right, and that's an exciting area: viewing conditions matter! Well, different monitors aren't really different viewing conditions, but it's a similar idea. When people can't see colors too well, they turn up the brightness. But that changes the problem entirely. Even something like whether a window has curtains or not will completely change whether you can perceive a certain "vibrance." Lots of the conversation in parallel replies has probably suffered due to such confusions.
aurbano 6y ago
Fully agree with this, I think having color variables like blue-500, orange-100 is completely counter-productive. What's the point of color variables, if they just describe the color they are... We already have color names for that.
- trevyn 6y ago
  The intention is that colors of the same number have a similar luminance, so you can easily adjust contrast and hue independently while designing. These schemes also keep a relatively consistent saturation profile across the palette. It's the kind of thing professional designers do intentionally, but set up in a system that makes it easier to get a "designed" look without much effort.
- deltron3030 6y ago
  The numbers describe the brightness, they can be useful if they're linked to UI usecases and if you're ok with limiting yourself to a prebuild color palette. It's just that functional names (btn-fg, btn-bg etc.) are better imo because they separate concerns. You could link them to a grayscale when prototyping and then later switch the colors in the stylesheet. It's also slower if you have to think about picking colors when coding.
- dkersten 6y ago
  I thought this immediately too but tailwind does allow you to use generic names too: https://tailwindcss.com/docs/customizing-colors#naming-your-colors https://tailwindcss.com/docs/customizing-colors#naming-your-...

sillysaurusx 6y ago

AI can solve it better than normal code can: you have to train on how humans see color. (This has been a long-standing ambition of mine, but sadly there's not yet much work or infrastructure in the field of "graphics AI." There's barely one software rasterizer. https://github.com/vahidk/tf.rasterizer https://github.com/vahidk/tf.rasterizer) The key would be to spend an absurd amount of time carefully cataloguing good colors – by hand – and training it to extrapolate from that information. That's basically how the Musnell color system was created. https://en.wikipedia.org/wiki/Munsell_color_system https://en.wikipedia.org/wiki/Munsell_color_system It's the realization that color space isn't spherical, it's not a cube, it's not any shape at all except "how humans happened to evolve." Even the term "max chromaticity" is just a reflection of the weird way our brains happen to work, not an intrinsic property of color. In that context, a universal curve fitting algorithm might be handy. Which of course is all that AI is.

deltron3030 6y ago
HSLuv is a sphere: https://www.hsluv.org/ https://www.hsluv.org/ They took the CIELUV/LCH/HCL solid and compressed it into a sphere, similar to HSL on top of RGB. The L* (perceptual luminance) value is consistent across hues, it can also replace the 100/200/300 scale for design systems. But even the CIE model has flaws, chromacity is inherently linked with brightness/luminance, no color model can change that. A more saturated/chromatic color will always be perceived as more bright than a less chromatic one at the same luminance. And in order to create a palette you need normalization, which will always weed out individual color defining peaks.
- sillysaurusx 6y ago
  I gave up trying to reason about color models when I realized the CIE model wasn't determined rigorously and empirically. A full critique is beyond the scope of 3AM, but, it's kind of fascinating to go back to the roots of color models and read about how precisely they came up with them. Remember to turn on your skepticism when you do. "X is a sphere" has to be reconciled with "What are the chances that our visual system would evolve into a perfect sphere with no flaws?" For some reason, people are so determined to turn complicated phenomena into a pure and simple form. Even astronomy wanted to believe that orbits were circles, since circles are clearly more perfect. But nature isn't perfect; it simply exists.
  - deltron3030 6y ago
    For me, their (CIEs) color opponents are already wrong, I prefer NCS: https://en.wikipedia.org/wiki/Natural_Color_System https://en.wikipedia.org/wiki/Natural_Color_System
    - trevyn 6y ago
      Are there any NCS-based web tools for generating such a palette? The "official" tool is... bad.
      - deltron3030 6y ago
        Not to my knowledge. Their official tool is for interior designers I think, and their system is copyrighted. I'm using a custom "color wheel" that's inspired by NCS opponents and CIE. I might release it open source as a web app though. It's actually part of a bigger design system for design systems I'm working on, but I'll see if I can break it off into it's own thing somehow.
        trevyn 6y ago
        That would be awesome, thank you.
  - 6y ago
deleted 6y ago
[deleted]
mpetroff 6y ago
> The key would be to spend an absurd amount of time carefully cataloguing good colors – by hand – and training it to extrapolate from that information. It's a bit more nuanced than that. Not only do you need to catalog good colors (and color combinations), you need to have it done by a large number of people, since different people perceive color differently and have different aesthetic preferences. This is something I've been working on in the limited context of color cycles for data visualization and plotting [1][2]. Based on my preliminary analysis, these data are quite noisy. [1] https://colorcyclesurvey.mpetroff.net/ https://colorcyclesurvey.mpetroff.net/ [2] https://mpetroff.net/2020/01/color-cycle-survey-update/ https://mpetroff.net/2020/01/color-cycle-survey-update/
- suby 6y ago
  Not to mention are viewing the colors on different screens, with possibly different tv/monitor modes enabled which will alter colors. I have two monitors where colors can look noticeably different. Unfortunately it's probably not feasible to account for this.
  - sillysaurusx 6y ago
    You're absolutely right, and that's an exciting area: viewing conditions matter! Well, different monitors aren't really different viewing conditions, but it's a similar idea. When people can't see colors too well, they turn up the brightness. But that changes the problem entirely. Even something like whether a window has curtains or not will completely change whether you can perceive a certain "vibrance." Lots of the conversation in parallel replies has probably suffered due to such confusions.

aurbano 6y ago

Fully agree with this, I think having color variables like blue-500, orange-100 is completely counter-productive. What's the point of color variables, if they just describe the color they are... We already have color names for that.

trevyn 6y ago
The intention is that colors of the same number have a similar luminance, so you can easily adjust contrast and hue independently while designing. These schemes also keep a relatively consistent saturation profile across the palette. It's the kind of thing professional designers do intentionally, but set up in a system that makes it easier to get a "designed" look without much effort.
deltron3030 6y ago
The numbers describe the brightness, they can be useful if they're linked to UI usecases and if you're ok with limiting yourself to a prebuild color palette. It's just that functional names (btn-fg, btn-bg etc.) are better imo because they separate concerns. You could link them to a grayscale when prototyping and then later switch the colors in the stylesheet. It's also slower if you have to think about picking colors when coding.
dkersten 6y ago
I thought this immediately too but tailwind does allow you to use generic names too: https://tailwindcss.com/docs/customizing-colors#naming-your-colors https://tailwindcss.com/docs/customizing-colors#naming-your-...