uchu.style
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.
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 :)
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.
[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
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)
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).
To me a color scheme is something like monokai. A small number of colors that go well together. The application (eg syntax highlighting in a code editor) is obvious and easy. This is just...lots of monochrome colors? How would I use this? Not trying to be dismissive, I'm just confused.
EDIT: Updated
Sometimes, it's well deserved feedback that is not pleasant to hear, but if you get bent out of shape as a developer because of it, then you're just going to have a tough life. No developer is perfect. There is always room for improvement. If you think you're perfect and your Show HN is flawless, then please wait while I grab some popcorn.
For this specific example, it's data inadequate type of release. I would say the landing page needs more information, but it's just one page, so the "top portion" definitely needs some work. Great, there's an acceptable display of the various color "charts" that the product actually is intended, but there's no information on what it is, why it works, or why "internet lovers" would be interested.
For instance, the name. I had to internet search to find the meaning of the name to see if maybe that would provide some insight. Nope. That didn't help much at all. Although, I now know a new Japanese word.
This is something that looks to be developed by someone that is passionate about this, but overlooked that not everyone that would view their post as intimately versed in the topic. Let's face it, most devs might as well be colorblind when it comes to the results of their UIs. You can always tell when the devs/coders built the UI vs when a team with actual design skills were involved. Just look at the beginnings of pretty much every single *nix.
Different shades of a single hue give you flexibility to create UI elements that feel like a family and coordinate well with each other. As an example, you might want a blue card with similarly blue borders. You may use a lighter blue for the background, and a darker one for the borders.
Instead of using a black border with opacity applied, each shade for this palette has been individually selected to fit within its hue family. The other benefit is, for each "shade level" you can guarantee they will be consistent across hues: 50% gray is near 50% red, etc.
More generally, this is designed so that each hue looks great with every other hue here. Not just any color will do, they need to coordinate.
Open Color from OpenProps https://yeun.github.io/open-color/
Tailwind's color palette https://tailwindcss.com/docs/colors
As far as design goes, color palettes can be extremely difficult to choose while maintaining good scores on color contrast and other accessibility measures. A standardized palette is useful because it does all that work for you. Having these 3 options to choose from is pretty nice since I often reach for OC or TW palettes but often find them lacking in hues I want.
I think it's easier than it looks with the right tooling. You could try my UI color palette creator (you can can customise every shade, so it's not a generator as such):
https://www.inclusivecolors.com/
It checks the contrast values against a live UI mockup so you get help knowing the contrast scores are good, and what the colors look like together.
I thought the same before, but feel with the right tooling like this, color palette design goes from extremely difficult (e.g. bouncing between multiple tools manually checking contrast between pairs and if colors look good to together) to much more manageable.
E.g. if you mostly want Tailwind but with a few different hues, you can try loading Tailwind from the "Example" menu, shift some of the hue curves, then tweak the saturation curves, and it'll have the same WCAG contrast guarantees (because it's using a "perceptually uniform" color space).
I use this tool myself for making custom branded palettes for projects, rather than picking from Tailwind colors that are seen often now.
For means there is a relationship, a benefit or inclusion between the two items. X for Y means that you have associated X with Y, and they should be used in conjunction.
There are so many valid uses of the word “for” and somehow this satisfies none of them.
If someone who loves and studies chocolate becomes, say, a bartender, and makes a cocktail specifically for the tastes of people who love chocolate in the same way they do, it is not unreasonable for them to advertise their cocktail as a "cocktail for chocolate lovers".
Will it be an appealing cocktail for all chocolate lovers? Conceivably not. Some may like more cocoa or some like a more buttery finish, some may be teetotalers and not want a cocktail at all -- but does that make it inaccurate advertising, or badly phrased? Not really, in my opinion.
This guy who loves the internet made a colour palette that he feels will be appreciated by those who love the same things about the internet as he does. Seems like reasonable and perfectly well formulated english to me.
When asked about the relationship between the color palette and the internet, his response failed to show any. He is not making an internet with colors, or colors with an internet, those are nonsensical statements. So in what sense is it for internet lovers? What characteristics of an “internet lover” would draw them to these colors?
When another commenter asked a similar question, his response was, “it’s not that deep”
compare all of the 5s next to each other and the blue is electric where the other colors look like a tint is applied.
obviously YMMV based on monitor gamma and color profile, but was the intention that each # have a similar tint to the pure color? Because this appears to essentially be a similar system to RGB/CMYK in different notation, over a Munsell Color System implementation that creates equivalence in color perception based on intensity scaling.
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...
I don't know how to call people who ignore backwards-compatibility. My sites work on IE6 if needed.
To be clear, upgrading your CSS library to the latest version should not subtly change the entire colour theme for your site yet here we are.
I have started moving towards radix colours.
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/
I'm also building a social network with it, here's a screenshot[1] and video[2]
---
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!
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.
---
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.
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!
I'm not sure if it's the same deal if I were to put the bookmark in a folder (so it's not in view all the time) but just something to note.
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.
Glad you like it!
Recently discovered something similar: Flexoki - https://stephango.com/flexoki
This little visual flashy aggression triggers a little angriness reaction.
I ended up escaping without reading what it was about.
If you love the internet, please respect dark mode.
I just made something for me and shared for maybe 10 other people to possibly like? I didn't expect to be angering people.
FWIW, these colors look fun and made my winter Monday morning a little brighter. Thanks!
A well thought out color palette should have light, dark and low/high contrast variants.
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.
Once Sublime Text supports OKLCH, I'll experiment with making my own syntax theme. Or, just make my version of Ayu Light using these colors.
I'm curious what's your process to pick colors for a colorscheme that are so harmonious with each other.
And trust me, I didn't expect to get more than 10 upvotes max. I'm slightly bewildered.
via https://github.com/NeverCease/uchu/blob/primary/documentatio...
You mean so it'd be persistent/visible with the scroll?
Mada mada tochū
Shiritai koto ga afureru
Nande darō tte omou nara
Sa, sagashi ni yukō!
Is it just me or do purples 5 through 8 not seem as differentiated as all the other colors across the palette?
Was this an intentional choice?
Note: I have no color sensitivity deficiencies and a reasonable understanding of color theory.
after that it should be possible.
Please.