There is also HPLuv which adds in absolute saturation, albeit at the cost of having even less saturated colors. https://www.hsluv.org/comparison/ would be interesting to see how much saturation changing from sRGB to e.g. DCI-P3 would bring.
I tried to do the same switch and found the results wildly unpredictable. That said, to get there I reverse engineered some demo code that was very hard to follow, and I probably made a mistake. Either way I’m perfectly happy with my HSLuv results so I reverted.
Kinda sad that there is no distinction made between color selection and color production. RGB based color opponents (e.g. red - cyan, green - purple) are less pleasing to the eye and culturally relevant than RYB ones (red - green, yellow - purple).
Let's say you develop a luxury theme, the yellow - purple opponency would naturally lead you to the classic colors of royality, purple and gold.
If (and that is a big if) using opponents results pleasing pairings only with some specially crafted wonky RYB colorspace then to me that is more just an indication that using opponents is not a robust way of picking pleasant pairings.
I am also very dubious about the claim of the color pairings being more or less "culturally relevant".
They're more pleasing because artists and graphic designers used RYB pairings for decades, these pairings all over the place in analog and digital media, people are more used to them. Even Adobe still uses an RYB wheel in their software, RGB only for color grading (it still deviates slightly from a normal RGB color distribution).
RYB is more culturally relevant because artists and designers "produce" culture based on it.
I've got an OLED and a some more conventional (I actually forget the tech, haha) monitor. HSLuv example actually looks less uniform on the OLED -- green, cyan, and to a lesser extent blue are notably brighter. Looks good on the conventional monitor, though. I could just be miscalibrated, though, my OLED is pretty cheap.
I would second this. If you care about seeing the right colors, get a monitor calibration tool. Although once you get one you'll see that everything is actually fucked and wrong.
Although of course a colour calibrator can't magically invent more colours, so if your panel can only do 80% sRGB, that's the absolute best a Spyder will get you. Still very much worth getting, but it won't fix a narrow gamut.
Erik Kennedy has an interesting hack[1] to naturally darken or lighten any color using the standard HSB color picker. He mimicks how colors generally change when shadows are cast on them in the real world—simply by twisting the Saturation and Brightness knobs in opposite directions.
I thought a lot about why that needs to happen. He describes it as an operation that is “adding or subtracting white”. Geometrically, you’re just moving the color closer or further from the white corner of the RGB cube. So I wonder if that maps close enough to moving up-and-down in the CIELAB/UV color spaces, where the Y-axis represents luminance.
For hue he noticed the correct trend but misattributed the reason. The reason for the color shift in sunlit shadows is that outdoors the fill light is blue-toned due to Raleigh scattering while the direct light is from the sun and is closer to yellow.
I realize the color palette might not be the most readable as I tried to use my "signature palette". Anyway I did check the contrast, and it passes the recommendations I found. If you can pin point a place where it does not, I'd be happy to fix it.
I wasn't trying to blame you specifically, so sorry if it feels that way. There's a lot of things posted about color. No one seems to take accessibility seriously, and in that space it should be one of the few things taken into account.
None of your header text or link text passes WCAG standards. So I don't know what recommendations you were looking at.
Your main heading is barely visible [1] (font-weight: 100 is only good on macs, where fonts all get thickened by the system on display).
The colour of it (#4D644F on #090D1D) fails WCAG AAA at both large and small sizes.
The colour of every code tag (#6B7280 on #281234) also fails WCAG AAA and has readability reduced by having a contrasting edge against the background.
Your "last update" text at the problem is also lacking contrast.
That was just from glancing through (and copying numbers around). However, it is made worse by blue-light exposure reduction software (like that built in to Windows 10, Android and others, or provided by f.lux).
surprised to see such poor color choice from an article talking about colors. Unless of course you're going for that green tinted matrix vibe. In which case, please carry on...
What I immediately noticed was how easy it was to read the article’s “dark mode” presentation.
Normally with very dark background and white or light gray or yellow text, I quickly develop weird persistent white and black ghost rows which eventually make reading very uncomfortable.
Even in ye olde days working on green on black CRTs I was uncomfortable.
Somehow the green and purple colors on the dark background are easily readable and leave no temporary burn-in on my eyes. This is amazing and wonderful.
34 comments
[ 2.9 ms ] story [ 95.3 ms ] threadhttps://bottosson.github.io/posts/colorpicker/
Let's say you develop a luxury theme, the yellow - purple opponency would naturally lead you to the classic colors of royality, purple and gold.
A good RYB based picker is the good old Paletton: https://paletton.com/
I think this is a stretch, red and blue are also classic colours of royalty.
I am also very dubious about the claim of the color pairings being more or less "culturally relevant".
RYB is more culturally relevant because artists and designers "produce" culture based on it.
I thought a lot about why that needs to happen. He describes it as an operation that is “adding or subtracting white”. Geometrically, you’re just moving the color closer or further from the white corner of the RGB cube. So I wonder if that maps close enough to moving up-and-down in the CIELAB/UV color spaces, where the Y-axis represents luminance.
[1] https://medium.com/@erikdkennedy/color-in-ui-design-a-practi...
I realize the color palette might not be the most readable as I tried to use my "signature palette". Anyway I did check the contrast, and it passes the recommendations I found. If you can pin point a place where it does not, I'd be happy to fix it.
None of your header text or link text passes WCAG standards. So I don't know what recommendations you were looking at.
The colour of it (#4D644F on #090D1D) fails WCAG AAA at both large and small sizes.
The colour of every code tag (#6B7280 on #281234) also fails WCAG AAA and has readability reduced by having a contrasting edge against the background.
Your "last update" text at the problem is also lacking contrast.
That was just from glancing through (and copying numbers around). However, it is made worse by blue-light exposure reduction software (like that built in to Windows 10, Android and others, or provided by f.lux).
[1] https://imgur.com/a/G6g0vNG
[1] https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-...
[2] https://news.ycombinator.com/item?id=18425916 similar thread from 3 years ago
It's a (very rudimentary) introduction to colour modes.
Normally with very dark background and white or light gray or yellow text, I quickly develop weird persistent white and black ghost rows which eventually make reading very uncomfortable.
Even in ye olde days working on green on black CRTs I was uncomfortable.
Somehow the green and purple colors on the dark background are easily readable and leave no temporary burn-in on my eyes. This is amazing and wonderful.