Uchū – Color palette for internet lovers (uchu.style)
Hey everyone,
About a year ago I embarked on creating a color scheme for a project and I loved it so much I began using it for everything. I decided to make an official repo for it to share with the world.
Anyhoo, hope y'all enjoy it.
291 comments
[ 3.2 ms ] story [ 256 ms ] threadI'm also building a social network with it, here's a screenshot[1] and video[2]
---
[1]: https://social.coop/@netopwibby/113474209075638354
[2]: https://social.coop/@netopwibby/113329030542527807
You have the experience and obviously love the pallet in your contexts. Perhaps somehow show where you felt you stretched them, or where you really felt good about them.
Or just show something quick where you like how the colors compliment. Heck, even a text heavy page that looks punchy on your terms would be great.
Right now it feels like (the frequent experience where) I am seeing something great that has a lot of thought put in, but I don’t know enough to understand the design or recreate the thought. But in color! :)
Here's a text-heavy page[1] but it doesn't make use of many colors. My redesigned personal blog should be a proper showcase whenever I get that going.
---
[1]: https://blog.neuenet.com/post/vision
You mean so it'd be persistent/visible with the scroll?
P.S. Subscribed to the RSS feed, but I noticed it's not auto detectable from main URL.
That's what I get for importing modules.
They're just links in the footer.
Okay, NOW it's fixed haha! Good grief.
High-level though: looked at the Wikipedia page for Crayola colors, selected my favorites, put a filter over them in Affinity Designer, made more edits (have to research my notes to figure out details), and eventually landed at these color stops.
It took a long time to settle on yellow/orange because I've never been able to get a good yellow I was happy with, specifically.
Problem is, it makes everything super fugly and eye-straining for everyone else (considering no dark reader allowed anymore). And it's much harder to see which parts are important and which aren't. Because everything is super bold and screamy. I didn't buy a 4.7 million colour display to only show 10 of them. I tend to get headaches from really high contrast, I prefer using a softer theme like solarized.
The 0.5% of employees with vision issues would be equally well served with a browser plugin that adjusts it for their particular issue. Not everyone with visual difficulties has the same issue, after all. Some people can't see certain colour combinations so they need to be avoided or modified. Some just see blurry so they need large fonts but probably even larger than they are now. Some can't see at all and they're not helped by this either, they just need a braille ruler and good alt tags on images. Which is something nobody in the company seems to care about. They just care about things that are super noticeable.
We used to have a nice gentle email signature that is now all kindergarten colours and huge fonts and it's just so in your face. For something that nobody ever reads anyway. It was de-emphasised for a reason, so people know it's there but that it's not important information unless you're really looking for it. If you really want to read it you can always just highlight it. Or switch to plain text mode.
Ps: I'm not against catering for disabilities at all, but I'd like to see a more tailored approach. Not trying to fix one thing and breaking it for everyone else. I don't set my phone on huge text mode either but I'm happy it's there for people that do need it.
> At work we have a new team that's making us measure all the contrasts for *people with reading difficulties*
I agree that local settings should override. But lets start with something legible and override with finely-graduated pastels, not the other way around (as part of a wider push towards good UX defaults).
(Using a high contrast dark mode with small text over here. It's what works for me, and "you can't configure your own environment because security" would have me kicking and screaming like a toddler).
Addressing an issue that affects 10% of a particular demographic (especially when that demographic is over represented on the internet in general) is wise, but the answer is not just “choose better colours” because of the many different forms of colourblindness.
The answer is choosing sensible defaults (stick to frequently used patterns your users have encountered before), support with high-contrast iconography and shape where possible, and don’t rely on colour alone for any part of your design (use tools like https://www.toptal.com/designers/colorfilter to see how your design survives through colourblind eyes).
Anyway, my main point is that although I'm technically colour blind, unless you're using particularly muddy shades of red and green, or particularly small splashes of colour, it doesn't matter too much. The key goal is to avoid colour-dependent design, but not to be afraid of colour either.
“Too much” contrast means young hipsters complain it burns their eyes.
Even the highest standards for readability leave a comfortable range for expressing creativity (and soft colors), it’s not like they require #000 on #FFF.
False. Someone with some kind, but not everyone with any kind. This broad stroke that you've just painted is counter to the goals of accessibility.
> “Too much” contrast means young hipsters complain it burns their eyes.
Let's not trivialize disabilities we don't even know exist. But if you wanted to research this, you can look up the term "photophobia" or "light sensitivity".
> Even the highest standards for readability leave a comfortable range for expressing creativity (and soft colors), it’s not like they require #000 on #FFF.
Again, false.
Let's consult Accessibility Requirements for People with Low Vision:
> 2.4.2 Light and Glare Sensitivity
> Many people with low vision have extreme sensitivity to light (called photophobia). Bright light makes it difficult or impossible to see, and causes eye pain and headaches. For some people, the normal brightness of a computer screen with a light background is not readable and painful. They need to change the background to a darker color. Glare sensitivity is common with age-related vision changes and cataracts.
> [...]
> 3.1.2 Text Contrast
> As mentioned in the Light Sensitivity section, some people need low brightness, especially for backgrounds. Some people who need low brightness for backgrounds also need low brightness overall and thus need low brightness text.
> Other people need high contrast between text and background, including many older people who lose contrast sensitivity from ageing. Some read better with dark text on light background.
> For some people, common color combinations or colors from a limited color palette work fine, for example, black text on white background or the inverse with white text on black background. Other people need to select more specific background and text colors. For example, people who need low brightness overall, need to select the specific background and text colors that provide sufficient contrast for them yet not too high brightness. Readable and optimal color combinations differs vastly among individuals and can even vary for one individual depending on conditions such as fatigue and lighting.
(emphasis mine)
Source: https://w3c.github.io/low-vision-a11y-tf/requirements.html
Ok, fair. But I don’t think it’s an accident that all the people I hear complain about contrast being too high are 20-something engineers.
There’s nothing about good contrast that says it needs to blaze your eyes off. You can have perfectly good contrast with a completely black background and minimal amounts of light. Like I said, there’s no reason that “contrast” needs to mean black on white.
I agree it's not really a content issue as much as a hardware issue. LCD screens have a limited backlight range and seem to be optimised for peak brightness not lowest brightness. Probably because big numbers sell better on paper. Even reviews only talk about top brightness these days.
My screen only tops around 200 nits and the lowest setting is way too high.
Luckily my display doesn't do that. It's also very hard to figure out through reviews so I'm glad it doesn't.
I was thinking about such a filter. But I haven't seen them for sale, I just know they exist (I was thinking about ND filters used in photography). But I wasn't sure if they exist at this size.
Yeah, I'm also PWM sensitive. You can buy devices which measure it fortunately but I've been making do with a phone camera on a high/brief shutter speed.
Well, maybe that's because it isn't an accident at all! Maybe it isn't just them being a bunch of hipsters!
- Light sensitivity reduces with age, so those 20-year olds are actually more sensitive to light than people who are older than them.
- They're engineers, so there's a good chance they are looking at a screen 8+ hours a day. This means that they're greatly affected by anything that makes looking at a screen less comfortable.
- They're engineers, so they know how software works and that the color scheme isn't set in stone. My parents just accept that some things don't work how they want them to work. I try to find a tool to make it work how I want it to work, because I can.
Therein lies the problem: this assumption is incorrect. I encourage you to read what I quoted from that article again. Accessibility can not have a one-size-fits-all approach. Your suggested "medium contrast" to accommodate the different spectrums of visual impairment inevitably detriments both sides.
All you're arguing for here is exactly what you're purporting to argue against, which is to assume one party's request for accomodations is less legitimate than another's. It's a superficial form of advocacy, that, while I understand comes from a place of good intentions, does not actually accommodate disabilities in the true spirit of accessibility.
I can assure you that the low-contrast accomodation in the linked article would make it difficult for the person who needs a high-contrast accomodation, and vice versa.
The comment that started this conversation is correct: all approaches to accessibility must have levers to pull to accommodate everyone. That includes allowing for accomodations in whatever form is reasonable. Extensions that change the way a website is displayed are one such accomodation. By being so rigid, this company has not implemented accessibility, they have implemented changes that shift disadvantage to another party. It's not defensible.
If it's very bright, I prefer light mode.
I am very used to it though, as I started out when computers just showed green (or amber) text on a black background. And those displays could also be tuned much better than current ones. I have an old serial terminal that I can set so low I can barely make out the text in a pitch-black room, and it can go so bright that it is readable in a sunlit room. A lot of flexibility was lost with the move to LCD (and even more with Amoled, which suffers from black smearing at low brightness, and usually really bad PWM).
Btw, I miss reading the socii dev blog, I was working on something similar at the time and I found your posts super interesting. What happend with socii? Are you still working on it?
I've been posting to Mastodon[1] when I make progress, I should get back to posting on my blog though!
[1]: https://social.coop/@netopwibby/113329030542527807
No problems.
I assumed it was a joke, like motherfuckingwebsite.com. But it seems that other people are seeing colors.
Edit: apparently it uses Oklab/oklch() [1], which is supposet to work in Firefox since version 113, but does not seem to work in 115. Or possibly it also uses something else that breaks it.
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_sel...
[2] https://caniuse.com/css-nesting
I don't know how to call people who ignore backwards-compatibility. My sites work on IE6 if needed.
Funnily enough in Japan the same thing happens with seemingly randomly-selected English words, so I suppose it's not completely without precedent.
I'm not sure what your point is exactly, but fwiw, Nokia is the name of the Finnish town from which the Nokia company originates. They used to make rubber products such as rubber boots. I once had a bike with Nokia branded inner tyres (same logo, just without the "Connecting People" payoff). There's absolutely nothing Japanese about the word "Nokia", except maybe in the eye (ear?) of the beholder.
https://en.wikipedia.org/wiki/Nokia,_Finland
[1] https://www.engadget.com/2009-04-01-keepin-it-real-fake-part...
[2] https://www.alibaba.com/showroom/nokla-mobile-phone.html
Either way, yes, Nokia is for sure a Finnish word, not a Japanese one, but the confusion has been around [for more than quarter of a decade](https://www.wired.com/1999/09/nokia/#:~:text=A%20surprising,...)
Eg this image from your Wikipedia link: https://en.wikipedia.org/wiki/Nokian_Tyres#/media/File:Nokia... even has the same logo/font as Nokia used to have on their phones (except rendered here as an outline).
I can't speak to anything else but personally, I love Japan style/aesthetic/whatever so I'm gonna use a word if it fits.
You can't sub universe in those. Yes, a dictionary may use that translation, but watch a space documentary and they won't use "uchu" by itself for "universe".
Also, in English, "universal" and "universe" are clearly related, but in Japanese, the concept of "universal" has almost nothing in common with "uchu"
あらゆる存在物を包容する無限の空間と時間の広がり。
So it (if you trust this definition) refers to time as well as space. It’s slightly more abstract than just ‘space’.
The Japanese entry corresponding to the English Wikipedia entry for ‘universe’ is also called 宇宙, though it is of course effectively about space.
…considering it further, I think you’re completely right. I’ll leave what I’ve written above in case it’s of interest to others.
I didn't look deeper than WordHippo[1] for translation.
---
[1]: https://www.wordhippo.com/what-is/the/japanese-word-for-244f...
I could never be bothered by them
This is a pretty extreme reaction, honestly. I fail to see how a minor misunderstanding of a Japanese word could possibly affect anybody negatively. Could you give a single scenario where this use of this word is harmful?
I seriously hate this argument. "You are nit-picking", "and here you are nitpicking my nitpicking, interesting that we are on exactly equal ground now". It's a dumb turn-around that could be used to attempt to silence any criticism of any criticism.
Sometimes, a criticism or complaint is not valid or frivolous. Pointing that out is not inherently invalid or frivolous.
If you go back 150 years, you're more likely to encounter 天地 where now you'd see 宇宙, while the former incidentally does invoke the spiritual or religious overtones that "universe" can have, albeit those are stronger in 天地 as a function of it being a tad archaic.
You might see 万物 or the lyrical 森羅万象 where English uses "universe" to mean "all things"; 世界 when talking about a person's universe/world; 領域 for delimiting a universe or domain of consideration; 全人類 in places where English is being poetic about humanity; or even 宇宙 in certain mathematical contexts.
Those are just off he top of my head, but I think you get the drift.
https://ja.wikipedia.org/wiki/%E5%AE%87%E5%AE%99
"宇宙" seems to be pronounced "Uchū" by google translate. So uchu seems to very much translate to "universe". Maybe it's just not as fashionable to use in a documentary?
I can't comment on universe vs universal.
Anyway… this business of translating individual words is basically nonsense.
And you can say: “I choose you, Uchū!” ;)
But yeah, jūiro would have been more fitting.
It seems very odd to me that somebody would complain about single-word product names. Or are you complaining about the origin language? Or are you just jealous that somebody is using a two-syllable word instead of something like Navigator? Or perhaps you are peeved it isn't a single-syllable name like Chrome. Is a word like Ubuntu ok if it isn't Japanese? Or do you mean that words like Twitter and Yahoo should be phased out and everything should just be a single letter like X?
> Or do you mean that words like Twitter and Yahoo should be phased out and everything should just be a single letter like X?
Yes. Apart from my children, who will be named things like X Æ A-Xii.
As for the first: there isn’t a silly trend of naming everything after randomly-chosen German words, so at least it’s fairly original.
It's ultimately a word from a foreign language. At some point it got used by English-speakers and then it spread and got used more and more.
Lots of foreign words get used. Some catch on and some don't. That's just how language evolves. Pajamas is just an example of a foreign word in a late stage of this evolution
I would have thought that the explanation for the phenomenon you highlight is obvious: there is a strong current of Japanophilia in U.S. culture generally, and especially among the tech-minded. So, while people borrow words from languages around the globe, Japanese is especially well represented. I'm surprised people seem reluctant to acknowledge this.
Edit: German is another interesting example. Though perhaps among different people and different reasons, English speakers (at least Americans) do also seem to have a special fondness for German words. Gestalt, zeitgeist, schadenfreude, ersatz, etc. For me, these are evocative of the golden age of German-language science and philosophy running roughly from Kant through Jung. For product names, though, German words may tend to be a bit too long and challenging to pronounce for an Anglophone audience. Perhaps this highlights another reason for the popularity of Japanese for this purpose: in addition to providing a pool of 'cool' sounding words without preexisting connotations for English speakers, Japanese seems to have an abundance of short words that an English speaker may find easily pronounceable. (Not to say that the words are necessarily pronounces correctly from the perspective of a Japanese speaker.)
Other candidates with easily pronounceable romanizations (from an Anglophone perspective) that are more culturally proximate than Japanese: Italian, Spanish, Russian, Hawai'ian
Other candidates with easily pronounceable romanizations (from an Anglophone perspective) that are more culturally distant than Japanese: Other Austronesian languages including Tagalog and Malay/Indonesian. (and many others, but fewer speakers)
Overall I like the total palette though. Especially the avoidance of “red” red, which is a colour I think many designers dislike. I would love to see a study on colour preferences in relation to eye colour.
In the same vein, but with more hues… https://www.s-ings.com/scratchpad/oklch-smooth/
[0] https://webb.page
Does Emacs support oklch? I wish Sublime Text did but it doesn't (otherwise I'd have a few themes launch with this as well).
"Cut off grid tiles in the view’s initial scroll position to communicate the scroll direction for content overflow."
https://m1.material.io/components/grid-lists.html#grid-lists...
Nudges can be helpful.
Good luck with the social network! It’s brutal out there..
PS — would be so cool to see a tailwind plugin of this (which in v4 should be just copying the vars in.. I didn’t look at the repo super closely). Great shit!
RE: social network, I'm also gonna charge money to use it so I'm not yet another free option with a dubious future...an extremely tiny portion of people would pay for a social network so I'm hoping I can add enough features to make it feel worth it. So yeah, it's gonna be tough af out here LOL!
I've never used Tailwind because CSS-in-JS weirds me out. I looked at the docs and it seems like I just wrap my custom colors in `@theme.css`? Is there anything else I'd have to do? https://tailwindcss.com/docs/theme
About 2 years ago I had to make a decision about what framework we were going to use for a new project and one of our developers was really into Svelte. I went through the tutorial and made a sample site. It felt like there were always sharp edges I was catching myself on.
I don't remember the specific but I feel like state management got confusing and you had to use work arounds to manually trigger updates in certain situations. Just seemed odd.
For me it's annoying because I got used to the old way. For newcomers, it may make more sense by default.
To Svelte's credit, they don't allow you to mix old and new ways of doing state so that's a great way to force people to learn the (new) correct way of doing things. A lot of React's issues are the abundance of old tutorials on the 'net, confusing newcomers trying to do something.
“The tyranny of react” is spot on. React single-handedly killed my passion for web development, but Svelte brought me back.
Good luck!
1. https://pocketrides.com
https://uchu.style/color.css
after that it should be possible.
Mada mada tochū
Shiritai koto ga afureru
Nande darō tte omou nara
Sa, sagashi ni yukō!
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...
And when I tried it out for myself I was amazed at the color boost. That's when I decided to create a theme!
Made a visualiser using v0 to understand it better :)
https://caniuse.com/?search=oklch