Uchū – Color palette for internet lovers

[NetOpWibby]

Hey everyone,

About a year ago I embarked on creating a color scheme for a project and I loved it so much I began using it for everything. I decided to make an official repo for it to share with the world.

Anyhoo, hope y'all enjoy it.

[joshuamcginnis]

TIL about oklch()

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...

[NetOpWibby]

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!

[ashu1461]

https://v0-oklch-visualiser-e69nx1.vercel.app/

Made a visualiser using v0 to understand it better :)

[xanderlewis]

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?

[Aeolun]

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.

[dcchambers]

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.

[docmars]

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.

[xrisk]

color palette would be more accurate

[culi]

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.

[MortyWaves]

I'm also equally confused how essentially a list of boxes with colours gets 476 points.

[jakubmazanec]

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/ ?

[darekkay]

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/

[NetOpWibby]

Nope, I just did what felt good. Does the huetone tool support OKLCH? I didn't see a toggle for it.

[daft_pink]

Why is this the color scheme for internet lovers?

[NetOpWibby]

I love the internet, and I love great colors...surely I cannot be the only one! ;)

[frotty]

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.

[bl4kers]

All I see is black text on a white background. I'm using Firefox on Android. I assume it's supposed to show more?

[nullpilot]

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

[defanor]

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...

[chefandy]

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.

[IYasha]

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.

[James_K]

Same here, but on chromium PC.

[esseph]

Also using ff on Android.

No problems.

[zarzavat]

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.

[benhurmarcel]

I've been using Tailwind's palette for this, even though I don't use Tailwind.

https://tailwindcss.com/docs/colors

[sings]

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/

[39zde]

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

[jsmith99]

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?

[kkarpkkarp]

could you show some example page where you use this color pallete?

[mglikesbikes]

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!

[qq99]

Looks nice, but hard to get a feel for it without a real UI. I have to imagine it looks great

[NetOpWibby]

What kind of UI, just any ol' app?

[TheSmoke]

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

[NetOpWibby]

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).

[mglikesbikes]

gave me k10k vibes

[theandrewbailey]

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.

[actualwitch]

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.

[rendaw]

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.

[djmips]

It was invisible to me. I just started scrolling without thinking. I guess I'm an Internet lover.

[gnatman]

I disagree, and perceived it as a fun invitation. Come on- it was blinking!

[malux85]

Glass houses man : https://theandrewbailey.com/

[NetOpWibby]

The site's been updated to reduce the intro height

[lyime]

I did not mind it.

Nudges can be helpful.

[campbel]

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.

[n0id34]

I have no idea what to do with this.

[grimgrin]

https://github.com/NeverCease/uchu/blob/primary/documentatio...

[Unai]

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?

[NetOpWibby]

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

[acherion]

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.