Is there any reason to use the word uchu? It seems like almost everything (colour schemes, AI models, startups, tools, apps, ...) is named using a single randomly-selected Japanese word these days. But... why?
The Chinese (on e.g. AliExpress) do this, too. With... mixed results. Small typo's, for example. Intentional (NOKlA) or not. Or, case in point: "NICGIGA is a technology enterprise focusing on communication network products. We have a perfect R&D team and Reliability laboratory."
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.
Does it bother you to have a product name like Galaxy or Forester?
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?
I'm not as bothered by it as you seem to think; I was more just pointing out that the trend of naming everything after random Japanese words is a bit stale — especially if there's no relation to Japan and you don't speak 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?
Yes. Apart from my children, who will be named things like X Æ A-Xii.
'Gestalt,' like 'pajamas,' is also now an English-language word. (Though, admittedly, I think people use it with some level of awareness that it is borrowed from German. So it's different from 'pajamas' in that respect.)
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.)
I picked the second example exactly to elicit a response such as yours.
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
Or because they differentiate you from others. English is full of that; there's "cow" for the commoners (from Germanic) vs "beef" for the rich (from French). Or thee/thous for commoners vs you (from French 'vous') for the rich. I suppose the new purpose in those cases were to differentiate from the lower classes.
"uchu" translates closer to "space" (spaceship -> uchusen), (alien -> uchujin), "I want to go to outerspace" -> "uchi e ikitai".
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"
It’s true that the concept of ‘universality’ wouldn’t be expressed using a word like uchu — perhaps more likely something like fuhenteki (普遍的) or just fuhen ? — but this is how one Japanese dictionary chooses to define 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.
IMHO, it's more misleading than helpful to try translating single words, devoid of context. That said, 宇宙 and 全宇宙 are definitely used in space documentaries and academic cosmology contexts where English would use "universe", so I'm not really sure what OP in on about.
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.
"宇宙" 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?
In practice, language has no bounds or rules. You can literally name anything you want with any name you feel appropriate. This cultural gatekeeping is so pedantic
Short, pronounceable words are scarce. If you want a 4-6 character project name Japanese words often fit the bill. Japanese culture is also very well exported.
Newer generations growing up more familiar with Japanese culture (e.g. anime), videogames, and non-retro cultural references, naming things after words they find pleasant (for a lack of better word) to hear.
I suppose that short Japanese words have the advantage of being something that the Anglosphere knows about enough to be acquainted with, distant enough to not have too many opinions about, while also being easily pronounceable from the transliteration. If so, I'm going to provide a few examples:
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)
Having heard enough Americans cringe-inducingly mangle Japanese, I’m going to have to disagree with you there. I had someone serve me an order of ’guy ohza’ just a couple of weeks ago. If the people selling the products can’t even pronounce the names correctly, I definitely don’t want to hear the customers’ attempts.
You have a point, English proper lacks the semivocalic-i after a consonant (as /Cj/), except where followed by /uː/. So also "Bee-ORN" for Björn, and "MA-fee-uh" instead of Italian "MA-fya" for mafia.
What's interesting to me is that a "good enough" approximation of Japanese phonology is pretty easy for native English speakers to express. The issue is just they have to understand the really consistent syllable structure to parse it out of the romaji.
Throwing stereotypical random Japanese language and culture references around isn't exactly a new phenomenon, otaku culture and all. If anything, it can be considered retro at this point.
Japanese and Scandinavian design have a long history of simplicity and subtlety; addition by subtraction and minimalism. Makes sense for projects with those principles in mind.
Have you tried running any readability analysis on this? Feels like the contrast on the background and foreground is too low to make for comfortable (long term) reading.
I think there's too much focus on 'readability' these days. At work we have a new team that's making us measure all the contrasts for people with reading difficulties. Contrast has to be > 80% or something. And text sizes huge. And they don't allow us to change our themes. Or to install plugins like dark reader "for security".
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.
Colour blindness (to take a single issue) is commonly quoted at about 4.5% globally (exact percentage varies by ethnicity so it varies by country). Your "0.5%" figure wildly underestimates the issue IMO.
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).
4.5% includes everyone with some level of colourblindness, but total colourblindness is much, much smaller (at least by a couple of orders of magnitude). In terms of demographics, women are much less strongly impacted (around 0.5%), and Caucasian men the highest with almost 10%.
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).
By total colourblindness do you mean achromatopsia? It's like hearing someone says 42% of Americans have obesity and making a remark this may be true to some level of obesity, but TOTAL OBESITY is much much smaller, at least by a couple of orders of magnitude :D
Not quite. I'm talking about monochromacy, which includes achromatopsia, but casts a slightly wider net.
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.
Monitors also display things differently. We once had a designer with a high-end Mac who liked to use light gray font on a white background. I never understood why he did that - it was barely visible. Then I looked at his monitor, and everything was crisp.
The OS makers solved this long ago -- settings. That team could just listen to the OS settings for 'high contrast', font size, etc and adjust their UI to match.
OS settings are targeted towards people with health issues. Usability guidelines are meant for people who want to see some text once in a while. Low-contrast “dark mode” is much, much more problematic than typical OS defaults.
Lack of contrast hinders everyone with any kind of vision issues (old/colorblind etc.)
“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.
> Lack of contrast hinders everyone with any kind of vision issues (old/colorblind etc.)
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.
> Let's not trivialize disabilities we don't even know exist.
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.
An honest interest, have you tried a dark mode on any device? Every time I tried it (sometimes as a new default setting after update for some JetBrains IDE), I did not like it at all for some reason as too much eye stress.
I use it a lot, even though it's supposed to be bad for me (astigmatism).
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).
I prefer high-contrast dark mode, it seems less tiring to me, but I think it depends on the light conditions around the PC. It's usually not very bright where I work.
For contrast, do you mean the swatch portions? If so, the smaller color values are there more for visual than information because the repo has the values in readable form. I wouldn't want to read light orange on orange for more than a paragraph, for example.
I'm confused by the usage of the word color scheme.
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.
This is similar to how Tailwind provides a complete color palette to use in UI development.
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.
Color Scheme is indeed more appropriate as they area specific set of colours this guy has used throughout his career. I can tell you one more specific reason for 47x points -- he actually includes the hex numbers for the colours!!! No more copying and pasting into a third app that can guestimate. It's a real time saver.
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.
> 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):
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.
Choosing a color palette is actually quite a difficult task from a design perspective. You have to take into account color contrast and many other accessibility measures. When I start small projects I often reach for Open Color[0] or TW's palette[1] (even if I don't use TW) because they've done all that work for me. Having a third option to choose from is something I look forward to
I don't mind that it has that many points - I actually really like the work that guy did. What I don't understand is why all the comments are so weird. It's like everyone who had a bad day decided to come here and take it out on this his work.
This isn't preschool where you present your work to the teacher to receive a gold star. This is someone presenting something to "professionals" providing critical feedback. That's always going to be ripe for someone getting their feelings hurt.
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.
The palette doesn't seem perceptually uniform, i.e. the contrast ratios of each tint vs. white/black aren't the same across all colors. Did your try analysing the palette in https://huetone.ardov.me/ ?
I've analyzed the palette with my own tool, a11y-contrast[1], and indeed the luminance is not uniform. I wrote [2] about why this might be a desired property of a color palette.
You have to convert your OKLCH colors to RGB hex codes before you can import them to Huetone, and that's little bit annoying, but worthwhile. I wouldn't use any palette that isn't perceptually uniform anymore. Being able to switch e.g. red-400 to blue-400 and to retain same contrasts is very valuable.
No, this is not how words work. You may also love making chocolate, and love dogs, but you would not make chocolate and claim it was for dogs simply because you love both things.
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.
I don't want to start an argument or anything, but I honestly do not understand your take.
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.
Your example is perfectly reasonable. There is a relationship between cocktails and chocolate, and you expressed what that relationship is: he is making cocktails specifically oriented at people who love the flavor of chocolate.
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”
Thanks for the background! It leaves me confused since this is marketed for internet lovers yet the connection to a love for the internet isn’t answered. For instance, I see a bunch of Cat6 cable colors as your choices, or perhaps you could’ve selected a ranked collection of the most popular colors used on the internet, or even the colors for best legibility on digital screens. Where’s the connection, what in particular should fans of the internet be drawn to about your particular palette?
comparing # to # the blue seems far more vibrant and opaque to the others.
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.
Same, with Firefox on a Linux desktop, even after enabling JS.
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.
If you can’t scroll down to see various swatch sets grouped by shade then you’re not seeing what you’re supposed to see. Works fine on FF for me but I don’t have Android.
Maybe a broken cache on an edge network serving up a bad asset to only some geographic areas, or something that was served broken for a moment but got cached.
I suppose there is no hard requirement for consistent saturation between hues, but that seems a bit inconsistent to my tastes. Darker yellow and orange colours seem a little too washed out.
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.
I have a similar thing going on, so I sort of know what I'm talking about.(1)
But this is just list of colors made to look fancy. Though I like the oklch color space. But what's up with this orange `oklch(78.75% 0.14163582809066333 54.32911089172009)`. Why the needlessly long decimals. The difference I can spot is minimal, when truncating a few decimals.
Very nice colours. However I am mildly red-green colour blind like 5% of men (and very few women) and the two in the middle look practically the same to me. The left and third from left are almost indistinguishable too. I'm guessing this isn't the case for everybody?
This is exactly why I read HN! So cool. And a fellow Svelte lover. 10/10.
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!
Thank you! We need more Svelte lovers against the tyranny of React.
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
I really love the principles that Svelte tries to advance but I find some of their design decisions downright puzzling.
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.
Svelte 5 reimagines the reactivity features (“runes”) and gets rid of the foot-guns, I know exactly what you’re referring to with state management. V5 is much more straightforward to both reason about and bug fix.
To echo mglikesbikes, I remember wracking my brain trying to figure out state stuff for more involved things like session management at the time. Svelte 5 was released recently and changed how they were doing state.
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.
That’s so funny — my social network[1] was paid, too! People hated that shit but — this was when Twitter had just started dying. Maybe there’s more appetite for sustainable alternatives now. I certainly see lots of projects in process on TikTok.
“The tyranny of react” is spot on. React single-handedly killed my passion for web development, but Svelte brought me back.
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! :)
I doubt emacs supports that or that it needs that. Can't you just run the colors through some oklch->rgba converter once to get a palette in a more standard format that works everywhere?
If you design a webpage that looks like an app loading screen, and have to put the word "SCROLL" at the bottom, I think that's a design failure, for the same/similar reasons that "click here" links are.
This loaded most of the way down the page for me, with the little grid diagram thing at the top of the screen. Causing me to immediately scroll upwards (a non-intuitive direction) really exemplifying the point, haha.
In UX terms, the page above the fold doesn't afford scrolling. With a blank white background and nothing to help the eyes explore, it can take a bit to notice the scrollbar, especially if one's browser/OS doesn't have an obvious scrollbar style.
What? That makes no sense -- scrollbars are there so you can drag them around and scroll, not just to indicate scrollable content. Not at all analogous in this case. The site looks nice overall, but the explicit indicator is bad design regardless.
Historically, at least, that is exactly what the scrollbar indicates, which is why it is either not shown at all, or shown disabled (i.e. visually distinct) if content is not scrollable.
I absolutely despise anything moving or blinking on websites when it's not in response to my own command. I usually immediately close tabs that do it. If I absolutely need to read a website, I will first use the inspector to nuke the element that is exhibiting the distraction. Otherwise I simply can't read anything and also retain it.
I think they were going for a very clean aesthetic that focused attention, which it does well. My only gripe is I find the blinking a bit annoying, it could have been a more subtle gradient.
Very nice, I'm saving it! The red palette looks extremely pink on my screen though.
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?
Just a heads up that this site has an animated SVG favicon. I had added it to my Firefox bookmarks bar and the favicon kept animating its color changes. Looked pretty neat, but then realised after a day or so that Firefox was chewing up 50-60% CPU on my MacBook Air. Turns out it was down to this bookmark, after I removed it, the CPU levels were much much lower.
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.
This seems like a neat idea, importing something simple like a colour pallette to get a small project started with some sane choices. Not sure why the negativity on a project like this.
I have no feelings about the palette, as I would need to spent time applying it to really get a feel for it, but I like the website. The cleanliness and simplicity is nice.
A website about color scheme that does not respect my darkmode browser preference and burns my eyes on my large screen in the middle of the night with its white background. It also prevents my dark reader extension from doing its job (in all 4 modes!)
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.
Sorry for the angry reactions. The funniest one so far are the people who are upset that there is no rigorous connection to internet love spelt out for them.
FWIW, these colors look fun and made my winter Monday morning a little brighter. Thanks!
I tried it a couple of times on your homepage and in your blog, but I still can't auto-detect it. I don't see a <link rel="alternate" type="application/rss+xml"> in the source, to be honest. Maybe I'm doing something wrong here.
Your feed works flawlessly though, long live the interwebz!
> If you want more granularity (read: opacity), you can call the raw version of the color (append -raw to the variable name) which will return the OKLCH values so you can do something like this: oklch(var(--uchu-gray-1-raw) / 40%).
TIL about oklch()
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...
I learned about it from https://evilmartians.com/chronicles/oklch-in-css-why-quit-rg...
And when I tried it out for myself I was amazed at the color boost. That's when I decided to create a theme!
https://v0-oklch-visualiser-e69nx1.vercel.app/
Made a visualiser using v0 to understand it better :)
There's also https://oklch.com/#70,0.1258,108,100
My favorite tool, I used it to convert my initial HEX values to OKLCH and tweak.
Aha, so L=70% C=0.04 and you have unlocked the secret to Farrow & Ball paint colors!
Last week I was windowshopping in a furniture store and saw this brand for the first time. I had the same thought, nail on the head.
Is this and OP website supposed to be broken on iOS safari? I see no colors
Good to know that it's also supported by most browsers.
https://caniuse.com/?search=oklch
the future of colors!
Yeah I only found out about it recently myself, but my colleague is a bit more on the ball with developments like this.
Is there any reason to use the word uchu? It seems like almost everything (colour schemes, AI models, startups, tools, apps, ...) is named using a single randomly-selected Japanese word these days. But... why?
Sorry to be negative, but it does seem kind of overdone now.
Funnily enough in Japan the same thing happens with seemingly randomly-selected English words, so I suppose it's not completely without precedent.
The Chinese (on e.g. AliExpress) do this, too. With... mixed results. Small typo's, for example. Intentional (NOKlA) or not. Or, case in point: "NICGIGA is a technology enterprise focusing on communication network products. We have a perfect R&D team and Reliability laboratory."
> Intentional (NOKlA)
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
GP is referring to "NOKLA" phones[1][2]. The "L" is intentionally lower-cased to make it look like a capital "I."
[1] https://www.engadget.com/2009-04-01-keepin-it-real-fake-part...
[2] https://www.alibaba.com/showroom/nokla-mobile-phone.html
Oh wow I had totally missed that. Nasty!
I suspect rather [Nokian tyres](https://en.wikipedia.org/wiki/Nokian_Tyres), rather than Nokia.
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,...)
Yes but this once was the same company.
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 definitely had Nokia wellies in the mid eighties. I think the boots-and-tyres brand name changed from Nokia to Nokian around 1990-ish.
That was informative. I always thought it was a company founded on the principle of expressing disdain for a certain korean auto manufacturer.......
There is too much products or brands using a single English word being released too.
There are too many people who seemingly forgot that the word "are" exists
Does it bother you to have a product name like Galaxy or Forester?
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?
I'm not as bothered by it as you seem to think; I was more just pointing out that the trend of naming everything after random Japanese words is a bit stale — especially if there's no relation to Japan and you don't speak 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?
Yes. Apart from my children, who will be named things like X Æ A-Xii.
Pinterest names their design system "Gestalt" but they're not a German company. GitLab names theirs "Pajamas" but they're not primarily Urdu speaking.
Your second example is a bit disingenuous since the word ‘pyjamas’ is a perfectly normal English word, regardless of its etymology.
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.
'Gestalt,' like 'pajamas,' is also now an English-language word. (Though, admittedly, I think people use it with some level of awareness that it is borrowed from German. So it's different from 'pajamas' in that respect.)
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.)
I picked the second example exactly to elicit a response such as yours.
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
That’s basically how words are borrowed from one language and brought into another.
I don’t think it is. It’s not random. Words are borrowed because they’re useful and fill in some gap or serve some new purpose.
Or because they differentiate you from others. English is full of that; there's "cow" for the commoners (from Germanic) vs "beef" for the rich (from French). Or thee/thous for commoners vs you (from French 'vous') for the rich. I suppose the new purpose in those cases were to differentiate from the lower classes.
Which Galaxy? Do you mean Galaxy, Galaxy, Galaxy, Galaxy or Galaxy?
[dead]
"uchū" means "universe" in Japanese. I use this theme for all of my projects so...universal.
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.
"uchu" translates closer to "space" (spaceship -> uchusen), (alien -> uchujin), "I want to go to outerspace" -> "uchi e ikitai".
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"
It’s true that the concept of ‘universality’ wouldn’t be expressed using a word like uchu — perhaps more likely something like fuhenteki (普遍的) or just fuhen ? — but this is how one Japanese dictionary chooses to define 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.
Genuine question as an amateur, what would be a better translation for "universe" than 宇宙?
IMHO, it's more misleading than helpful to try translating single words, devoid of context. That said, 宇宙 and 全宇宙 are definitely used in space documentaries and academic cosmology contexts where English would use "universe", so I'm not really sure what OP in on about.
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.
As a native Japanese, we think it means "universe" when I hear it. And in my opinion there are no people who think it means "universal".
My apologies for not being fluent in the Japanese language.
I didn't look deeper than WordHippo[1] for translation.
---
[1]: https://www.wordhippo.com/what-is/the/japanese-word-for-244f...
Then don't use words you don't understand fully? Seems stupid to me to use a whole culture as your "aesthetic".
Lmao, HN will complain about anything. Leave the guy alone
The 'Universe' wikipedia page in Japanese is this: "宇宙"
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.
I already pointed this out above. It translates to ‘universe’ as in ‘space’ but not really ‘universe’ in the sense of ‘universal’.
Anyway… this business of translating individual words is basically nonsense.
In practice, language has no bounds or rules. You can literally name anything you want with any name you feel appropriate. This cultural gatekeeping is so pedantic
It's more like space / cosmos.
yeah if i had to pick a single word it'd be "cosmos"
I interpret uchuu as "space"
I don't think you actually understand how the translation works here.
Short, pronounceable words are scarce. If you want a 4-6 character project name Japanese words often fit the bill. Japanese culture is also very well exported.
Newer generations growing up more familiar with Japanese culture (e.g. anime), videogames, and non-retro cultural references, naming things after words they find pleasant (for a lack of better word) to hear.
Japanese words are just better Feng Shui. Everybody knows that.
I suppose that short Japanese words have the advantage of being something that the Anglosphere knows about enough to be acquainted with, distant enough to not have too many opinions about, while also being easily pronounceable from the transliteration. If so, I'm going to provide a few examples:
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)
Having heard enough Americans cringe-inducingly mangle Japanese, I’m going to have to disagree with you there. I had someone serve me an order of ’guy ohza’ just a couple of weeks ago. If the people selling the products can’t even pronounce the names correctly, I definitely don’t want to hear the customers’ attempts.
No, this is just how languages generally work, how loanwords come to be, and how cultures influence each other.
You have a point, English proper lacks the semivocalic-i after a consonant (as /Cj/), except where followed by /uː/. So also "Bee-ORN" for Björn, and "MA-fee-uh" instead of Italian "MA-fya" for mafia.
What's interesting to me is that a "good enough" approximation of Japanese phonology is pretty easy for native English speakers to express. The issue is just they have to understand the really consistent syllable structure to parse it out of the romaji.
Throwing stereotypical random Japanese language and culture references around isn't exactly a new phenomenon, otaku culture and all. If anything, it can be considered retro at this point.
Japanese and Scandinavian design have a long history of simplicity and subtlety; addition by subtraction and minimalism. Makes sense for projects with those principles in mind.
Things need names. All the simple English words have been used many times. Seems logical to me.
What's next: 本(běn), "the root of all colors"?
I mean it’s a color space. ;)
And you can say: “I choose you, Uchū!” ;)
But yeah, jūiro would have been more fitting.
Wait till you see their cat named "Neko".
[dead]
Have you tried running any readability analysis on this? Feels like the contrast on the background and foreground is too low to make for comfortable (long term) reading.
I think there's too much focus on 'readability' these days. At work we have a new team that's making us measure all the contrasts for people with reading difficulties. Contrast has to be > 80% or something. And text sizes huge. And they don't allow us to change our themes. Or to install plugins like dark reader "for security".
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.
Colour blindness (to take a single issue) is commonly quoted at about 4.5% globally (exact percentage varies by ethnicity so it varies by country). Your "0.5%" figure wildly underestimates the issue IMO.
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).
4.5% includes everyone with some level of colourblindness, but total colourblindness is much, much smaller (at least by a couple of orders of magnitude). In terms of demographics, women are much less strongly impacted (around 0.5%), and Caucasian men the highest with almost 10%.
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).
By total colourblindness do you mean achromatopsia? It's like hearing someone says 42% of Americans have obesity and making a remark this may be true to some level of obesity, but TOTAL OBESITY is much much smaller, at least by a couple of orders of magnitude :D
Not quite. I'm talking about monochromacy, which includes achromatopsia, but casts a slightly wider net.
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.
Monitors also display things differently. We once had a designer with a high-end Mac who liked to use light gray font on a white background. I never understood why he did that - it was barely visible. Then I looked at his monitor, and everything was crisp.
The OS makers solved this long ago -- settings. That team could just listen to the OS settings for 'high contrast', font size, etc and adjust their UI to match.
OS settings are targeted towards people with health issues. Usability guidelines are meant for people who want to see some text once in a while. Low-contrast “dark mode” is much, much more problematic than typical OS defaults.
From the comment I replied to (emphasis mine):
> At work we have a new team that's making us measure all the contrasts for *people with reading difficulties*
Lack of contrast hinders everyone with any kind of vision issues (old/colorblind etc.)
“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.
> Lack of contrast hinders everyone with any kind of vision issues (old/colorblind etc.)
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
> Let's not trivialize disabilities we don't even know exist.
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'm not colorblind, but I'm older, and I can't read the kind of low-contrast stuff I wouldn't even notice as being low-contrast in my 20s or 30s.
An honest interest, have you tried a dark mode on any device? Every time I tried it (sometimes as a new default setting after update for some JetBrains IDE), I did not like it at all for some reason as too much eye stress.
I use it a lot, even though it's supposed to be bad for me (astigmatism).
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).
I prefer high-contrast dark mode, it seems less tiring to me, but I think it depends on the light conditions around the PC. It's usually not very bright where I work.
If it's very bright, I prefer light mode.
For contrast, do you mean the swatch portions? If so, the smaller color values are there more for visual than information because the repo has the values in readable form. I wouldn't want to read light orange on orange for more than a paragraph, for example.
I'm confused by the usage of the word color scheme.
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.
This is similar to how Tailwind provides a complete color palette to use in UI development.
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.
color palette would be more accurate
Hmm yeah, I like that better.
EDIT: Updated
For completeness, the repo's "About" still reads "the color scheme for internet lovers"
I missed that, thanks!
Color Scheme is indeed more appropriate as they area specific set of colours this guy has used throughout his career. I can tell you one more specific reason for 47x points -- he actually includes the hex numbers for the colours!!! No more copying and pasting into a third app that can guestimate. It's a real time saver.
I do not see the hex.
you could also update the HN submission title, technically...
I don't see that option at this point. I don't know how to tag @dang either.
Yeah imo they should've used "color palette". Similar to:
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.
> 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.
I'm also equally confused how essentially a list of boxes with colours gets 476 points.
Choosing a color palette is actually quite a difficult task from a design perspective. You have to take into account color contrast and many other accessibility measures. When I start small projects I often reach for Open Color[0] or TW's palette[1] (even if I don't use TW) because they've done all that work for me. Having a third option to choose from is something I look forward to
[0] https://yeun.github.io/open-color/
[1] https://tailwindcss.com/docs/colors
Which is even more frustrating that the linked site does not have a good set of colours per the comments...
Yeah I posted before seeing the reviews about the a11y shortcomings. I probably won't include this palette into my rotation after all
I don't mind that it has that many points - I actually really like the work that guy did. What I don't understand is why all the comments are so weird. It's like everyone who had a bad day decided to come here and take it out on this his work.
This isn't preschool where you present your work to the teacher to receive a gold star. This is someone presenting something to "professionals" providing critical feedback. That's always going to be ripe for someone getting their feelings hurt.
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.
Welcome to Hacker News, a news site for autistic geeks who take your work apart in their anger for the world.
This autistic geek finds the excessive cynicism here really tiresome.
hey man, this site might be full of assholes but you shouldn't group in the autistics, they didn't do anything to you
The palette doesn't seem perceptually uniform, i.e. the contrast ratios of each tint vs. white/black aren't the same across all colors. Did your try analysing the palette in https://huetone.ardov.me/ ?
I've analyzed the palette with my own tool, a11y-contrast[1], and indeed the luminance is not uniform. I wrote [2] about why this might be a desired property of a color palette.
[1] https://github.com/darekkay/a11y-contrast
[2] https://darekkay.com/blog/accessible-color-palette/
Nope, I just did what felt good. Does the huetone tool support OKLCH? I didn't see a toggle for it.
You have to convert your OKLCH colors to RGB hex codes before you can import them to Huetone, and that's little bit annoying, but worthwhile. I wouldn't use any palette that isn't perceptually uniform anymore. Being able to switch e.g. red-400 to blue-400 and to retain same contrasts is very valuable.
Why is this the color scheme for internet lovers?
I love the internet, and I love great colors...surely I cannot be the only one! ;)
No, this is not how words work. You may also love making chocolate, and love dogs, but you would not make chocolate and claim it was for dogs simply because you love both things.
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.
See: https://www.merriam-webster.com/dictionary/for
I don't want to start an argument or anything, but I honestly do not understand your take.
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.
Your example is perfectly reasonable. There is a relationship between cocktails and chocolate, and you expressed what that relationship is: he is making cocktails specifically oriented at people who love the flavor of chocolate.
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”
I'm glad I'm not the only one annoyed. It's a clickbait title, whether intentional or not.
having a bad day on the internet, huh?
How were these specific colors chosen to represent the internet?
Idk about "represent the internet" but here's how I came up with the palette: https://news.ycombinator.com/item?id=43072869
Thanks for the background! It leaves me confused since this is marketed for internet lovers yet the connection to a love for the internet isn’t answered. For instance, I see a bunch of Cat6 cable colors as your choices, or perhaps you could’ve selected a ranked collection of the most popular colors used on the internet, or even the colors for best legibility on digital screens. Where’s the connection, what in particular should fans of the internet be drawn to about your particular palette?
comparing # to # the blue seems far more vibrant and opaque to the others.
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.
Not necessarily. No "formula" helped me arrive at these colors, I just eyed it and made adjustments until they worked for me.
All I see is black text on a white background. I'm using Firefox on Android. I assume it's supposed to show more?
It uses CSS nesting[1] (think SCSS) which requires Firefox 117 and Chrome 120 for full support[2]
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_sel...
[2] https://caniuse.com/css-nesting
Same, with Firefox on a Linux desktop, even after enabling JS.
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...
If you can’t scroll down to see various swatch sets grouped by shade then you’re not seeing what you’re supposed to see. Works fine on FF for me but I don’t have Android.
Same on FF 50 on Linux.
I don't know how to call people who ignore backwards-compatibility. My sites work on IE6 if needed.
Same here, but on chromium PC.
Maybe a broken cache on an edge network serving up a bad asset to only some geographic areas, or something that was served broken for a moment but got cached.
Also using ff on Android.
No problems.
I also see just black text on white, on iOS / Mobile Safari.
I assumed it was a joke, like motherfuckingwebsite.com. But it seems that other people are seeing colors.
I've been using Tailwind's palette for this, even though I don't use Tailwind.
https://tailwindcss.com/docs/colors
You should watch out, they have again updated their colours between version 3 and 4. This is the third time this has happened.
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.
I suppose there is no hard requirement for consistent saturation between hues, but that seems a bit inconsistent to my tastes. Darker yellow and orange colours seem a little too washed out.
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/
Thank you! Yellow and orange are tricky, for sure. Thanks for the link, those hues look great.
I have a similar thing going on, so I sort of know what I'm talking about.(1) But this is just list of colors made to look fancy. Though I like the oklch color space. But what's up with this orange `oklch(78.75% 0.14163582809066333 54.32911089172009)`. Why the needlessly long decimals. The difference I can spot is minimal, when truncating a few decimals.
^1: https://codeberg.org/39zde/euma
Very nice colours. However I am mildly red-green colour blind like 5% of men (and very few women) and the two in the middle look practically the same to me. The left and third from left are almost indistinguishable too. I'm guessing this isn't the case for everybody?
How does the reduced palette work for you? https://uchu.style/simple.html
That’s purplish vs blueish, and greyish vs pinkish respectively. For me they’re different fyi.
could you show some example page where you use this color pallete?
What would this example page have on it? Do you have a favorite layout?
You mention elsewhere that you used this on a bunch of your own projects, are there any you can share?
https://blog.neuenet.com, https://webb.page, and https://inc.sh...https://dsgn.agency will get updated with it soon (it's using Sapper, the awkward stand-in before SvelteKit).
I'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
For the japanese in your tagline on socials, you might be meaning ウィビ (wibi/wibby) if you were trying to write your name. I might be wrong!
webb.page is fun!
Envious of that beard bro. Respect.
Maybe an example dashboard or something that is GUI-heavy, to show off how your colors interact with each other?
That sounds like a good idea actually
I imagine at least something mapping each color to what it applies to.
This is exactly why I read HN! So cool. And a fellow Svelte lover. 10/10.
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!
Thank you! We need more Svelte lovers against the tyranny of React.
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
I really love the principles that Svelte tries to advance but I find some of their design decisions downright puzzling.
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.
Svelte 5 reimagines the reactivity features (“runes”) and gets rid of the foot-guns, I know exactly what you’re referring to with state management. V5 is much more straightforward to both reason about and bug fix.
To echo mglikesbikes, I remember wracking my brain trying to figure out state stuff for more involved things like session management at the time. Svelte 5 was released recently and changed how they were doing state.
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.
That’s so funny — my social network[1] was paid, too! People hated that shit but — this was when Twitter had just started dying. Maybe there’s more appetite for sustainable alternatives now. I certainly see lots of projects in process on TikTok.
“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
I like PocketRides, you've given me some ideas on how to incentivize creators. We certainly have the same ethos; people over bots.
no :D
Sounds easy enough!
Looks nice, but hard to get a feel for it without a real UI. I have to imagine it looks great
What kind of UI, just any ol' app?
I think something you really like!
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! :)
Ah, that makes a lot of sense.
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
The gray palette would make a good Emacs colorscheme. By the way, great web site! [0]. Been quite a while since I thought that.
[0] https://webb.page
Ayy, thank you!
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).
I doubt emacs supports that or that it needs that. Can't you just run the colors through some oklch->rgba converter once to get a palette in a more standard format that works everywhere?
gave me k10k vibes
If you design a webpage that looks like an app loading screen, and have to put the word "SCROLL" at the bottom, I think that's a design failure, for the same/similar reasons that "click here" links are.
This is why in metro microsoft made the first screen go like 90% there instead of 100%, makes it clear that there is more content beneath.
It's also a recommendation in Material Design:
"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...
This loaded most of the way down the page for me, with the little grid diagram thing at the top of the screen. Causing me to immediately scroll upwards (a non-intuitive direction) really exemplifying the point, haha.
That's not a bad idea, I've done something similar on other sites I've built before. The landing doesn't need to be 100vh.
Are scrollbars to indicate scrollable content a design failure too? The site seems great to me, and I don't have issue with the explicit indicator.
In UX terms, the page above the fold doesn't afford scrolling. With a blank white background and nothing to help the eyes explore, it can take a bit to notice the scrollbar, especially if one's browser/OS doesn't have an obvious scrollbar style.
Any scrollbar would be nice, but I'd like to introduce you to mobile browsers that hide scrollbars by default.
Most desktops do that too, these days, and only display them on hover.
Sadly, Firefox doesn't show the scrollbar by default. Stupid decision imo, but here we are.
What? That makes no sense -- scrollbars are there so you can drag them around and scroll, not just to indicate scrollable content. Not at all analogous in this case. The site looks nice overall, but the explicit indicator is bad design regardless.
Historically, at least, that is exactly what the scrollbar indicates, which is why it is either not shown at all, or shown disabled (i.e. visually distinct) if content is not scrollable.
It was invisible to me. I just started scrolling without thinking. I guess I'm an Internet lover.
I disagree, and perceived it as a fun invitation. Come on- it was blinking!
I absolutely despise anything moving or blinking on websites when it's not in response to my own command. I usually immediately close tabs that do it. If I absolutely need to read a website, I will first use the inspector to nuke the element that is exhibiting the distraction. Otherwise I simply can't read anything and also retain it.
Glass houses man : https://theandrewbailey.com/
Would you mind expanding that thought? I don't literally tell people to scroll or to 'click here', and it hardly looks like a loading screen.
It's really clear that scrolls, as a post is cut off partway.
The site's been updated to reduce the intro height
I did not mind it.
Nudges can be helpful.
I think they were going for a very clean aesthetic that focused attention, which it does well. My only gripe is I find the blinking a bit annoying, it could have been a more subtle gradient.
I have no idea what to do with this.
https://github.com/NeverCease/uchu/blob/primary/documentatio...
Very nice, I'm saving it! The red palette looks extremely pink on my screen though.
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?
Yes, I'm still working on socii! I took a hiatus to work on something else which ultimately didn't work out so I'm back on socii.
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
Just a heads up that this site has an animated SVG favicon. I had added it to my Firefox bookmarks bar and the favicon kept animating its color changes. Looked pretty neat, but then realised after a day or so that Firefox was chewing up 50-60% CPU on my MacBook Air. Turns out it was down to this bookmark, after I removed it, the CPU levels were much much lower.
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.
Oh wow that's interesting! Thanks for the note, I'll probably remove it.
I had to follow like four links to figure this out. If you just want the CSS variable declarations, the file is here.
https://uchu.style/color.css
What's with the raw and then pushing it into the definitions via a var? I don't understand why there is an extra step?
Maybe for editor auto complete?
https://news.ycombinator.com/item?id=43076068
The "Repo" link on the very first screen would have brought you to the repo with both the CSS and SCSS.
I'm sure it's somewhere in there. How many clicks does it take you to get from the repo to the CSS?
One, if you mean the directory containing the css files (helpfully called 'css') or two, if you mean one of the files.
My comment was just to help people like me, not smarty pants.
Love this! Would also really like to see it used in a full example though
I'm gonna work on this since it's been a common wish.
What went into creating the color scheme?
Blog post coming soon!
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.
This seems like a neat idea, importing something simple like a colour pallette to get a small project started with some sane choices. Not sure why the negativity on a project like this.
"HN is a site for professionals and I should've known better to show something that isn't perfect"
Glad you like it!
I have no feelings about the palette, as I would need to spent time applying it to really get a feel for it, but I like the website. The cleanliness and simplicity is nice.
This is nice.
Recently discovered something similar: Flexoki - https://stephango.com/flexoki
Steph's theme is super appealing on the eyes as well.
Very cool! A similar app that I've been using a lot lately is: https://grayscale.design
What color space does it use when generating the brightness variations?
A website about color scheme that does not respect my darkmode browser preference and burns my eyes on my large screen in the middle of the night with its white background. It also prevents my dark reader extension from doing its job (in all 4 modes!)
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.
Hackernews users are getting softer and softer. Such a childish reaction to a simple website.
You can't please every body. ¯\\_(ツ)_/¯
I just made something for me and shared for maybe 10 other people to possibly like? I didn't expect to be angering people.
Sorry for the angry reactions. The funniest one so far are the people who are upset that there is no rigorous connection to internet love spelt out for them.
FWIW, these colors look fun and made my winter Monday morning a little brighter. Thanks!
[flagged]
I agree. A color scheme website should do color schemes right. Beside the white background, why colors are the same in light and dark mode?
A well thought out color palette should have light, dark and low/high contrast variants.
Love the web(b) page! I guess you also use your color palette there?
P.S. Subscribed to the RSS feed, but I noticed it's not auto detectable from main URL.
I fixed my feeds, all three of them had issues SMH!
That's what I get for importing modules.
I tried it a couple of times on your homepage and in your blog, but I still can't auto-detect it. I don't see a <link rel="alternate" type="application/rss+xml"> in the source, to be honest. Maybe I'm doing something wrong here. Your feed works flawlessly though, long live the interwebz!
Y'know what, I didn't think of adding my feeds to the head. SMDH
They're just links in the footer.
Okay, NOW it's fixed haha! Good grief.
Yeah I gotta fix that, probably this week!
I love the look! If I have the time I'll probably add a CSS theme using this to some of my apps.
Thank you for sharing. I have a home cooked web-app i use for saving recipes and I've implemented this into it.
That's awesome, glad it could be of use so quickly!
Ok this is beautiful, I love it, I was looking for something exactly like this earlier today. Nice one.
I love the color schemes, very simple! Although can’t beat “catppuccin” :)
Ayu Light is one of my favorite themes so I understand!
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.
Cool colors! I'll use these in a project :D
I love it.
I'm curious what's your process to pick colors for a colorscheme that are so harmonious with each other.
Am I missing something? This is a color palette for a website? Is there something special going on here?
Don't hijack the back button...
Gotta love HN, only popular site in world where a list of hex codes on a nicely formatted website gets to top ranking
*oklch codes
And trust me, I didn't expect to get more than 10 upvotes max. I'm slightly bewildered.
I love the color choices, but what's the reason for defining each color twice, once with a "raw"?
> If you want more granularity (read: opacity), you can call the raw version of the color (append -raw to the variable name) which will return the OKLCH values so you can do something like this: oklch(var(--uchu-gray-1-raw) / 40%).
via https://github.com/NeverCease/uchu/blob/primary/documentatio...
technically, all websites are just a bunch of nicely formatted hex codes.
perhaps off topic, but I love your personal site being webb.page… that’s perfect
It's a very cool design. The scrolling is weird but I like it.
Thank you! Haha, one of my favorite domains.
Great webpage name indeed. Have you considered having the about.webb.page not scroll with the column, rather be sticky on top?
Huh, that'd be interesting. I'll try that out.
You mean so it'd be persistent/visible with the scroll?
yup, i should have said for all section titles
Uchū ni mchū
Mada mada tochū
Shiritai koto ga afureru
Nande darō tte omou nara
Sa, sagashi ni yukō!
I guess we're re-inventing "web safe" colors?
I love it. Good work.
Well, I don't "love" it.
Very cool! Nice convenient OKLCH palette.
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.
Can I use this color scheme in Chrome?
I think you still need to import the css file https://github.com/NeverCease/uchu/blob/primary/css/color_ex...
after that it should be possible.
What do you do once you have that file?
Not sure these are ever needed.
It's very nice :)
Thank you!
Now, don't be an dick and do it in RGB so other 90% population can see it.
Please.