This website is the best argument against itself. Every single colour combination was awful, to the point it literally made my eyes hurt, and had so little contrast as to be useless.
I’ve seen better designed and clearer websites with two colours.
The problem, to my eye, is lack of contrast. It’s something I’ve started to notice more and more in modern designs — grey dividing lines/objects that are too close to the light background, failing to stand out.
My hypothesis is that the designers and developers are all using $3k MacBooks with the ultra high quality screens that can reproduce colors that humankind could never have imagined, while I’m using a ten year old piece of crap LCD monitor that seems to be staying alive simply to spite me.
Either that, or I’m getting old and my vision is starting to slowly fade.
I thought it was only me! This "inverse question phrasing" is something I see popping up more and more in forums and such, especially phrases starting with "How it <verb>?" or "Why it <verb>?".
I often see this with non-native English speakers, for better or worse, when looking at other comments from folks who write like that. With that in mind, issues like these bother me less.
Does it really matter? While it may not adhere strictly to the rules of grammar, it's not so incorrect that it becomes confusing or changes the intended meaning. This is simply how language evolves over time.
Kids born in "native english" change the language too. For example, treat irregular verbs like regular ones. Languages evolve with time, regardless of non-native speakers using it.
Yes, it really does matter.
The concept that "language evolves" is absolutely valid when you're talking about the introduction of new words and phrases and adapting existing words to new purposes.
It's not the principle to invoke when you're talking about simply making logical mistakes. A question mark is used at the end of a question, not a statement. "How it works" is a statement. "How does it work?" would be the way to word the same CTA as a question.
Details matter because they add up to an overall impression of the quality of your work. Think of it as the "Brown M&Ms" principle, if you're familiar with that story. (Google it if you're not, it's a great anecdote.)
Which is grand if your audience is entirely composed of folks who speak your native language, at which point you should probably just write your native language.
Look, write however you like. Just don't be surprised when people aren't willing or able to crack your personal cipher. I'm not a perscriptivist, and I'm not calling for capital punishment. Heck, I didn't even point out the grammatical mistake in the first place, nor would I have. I'm just agreeing that it's not clear.
Maybe you are built differently from myself, but as is the case with multiple people here, it causes mental whiplash to punctuate a statement like "How it works" with a question mark. I have to go back and parse it again and wonder what the question is and what I got wrong before realizing that it's just a grammatical error. When that happens, it wears on the limited attention I have to look at the thing you want me to look at.
Fix it, don't fix it, it's no skin off my nose. Lord knows every blog post or HN comment I've ever written is bedazzled with errors and typos. I haven't taken the trouble to fix it. I don't, however, pretend that so long as it's as or more intelligible than a Russian Numbers Station that it's "understandable enough".
Also, I invite you to call me a "pedant" or even a "general dumbass" before calling me a Nazi of any sort. Nothing I've (ever) written has warranted me being labelled as such, and I deeply resent it.
I think it’s less about whether it’s possible to understand and more about the increased cognitive load that comes with achieving that understanding.
When you’re used to seeing things a certain way, and you come across something that feels wrong, it derails your line of thought, takes you out of the experience and requires additional willpower and processing to maintain focus.
If it is equally understandable to most people and uses fewer words that would make it technically the most concise way to express the idea.
Defeating Anti-Intellectualism doesn't mean being antagonistic to non-native speakers. Intellectual != Asshole
Edit: Communicating in proper english is great till you're choking and you put your hands around your neck and pray the people around you understand your "sign language" so you don't die
For example, a direct translation from Spanish to English would result in that:
* "Cómo funciona" -> "How it works", as in "tell me how it works".
* "¿Cómo funciona?" -> "How does it work?".
The auxiliary "do/does" really looks like an extra unnecessary word, but omitting it sounds wrong to a native speaker or anyone already more used to English.
Part of the confusion could be because sentences like "but she does write" and "but she writes" mean basically the same thing (they imply different emphasis, but you know what I mean). So if someone incorrectly does pattern-matching based on those examples, I can see them thinking that "how does it work?" and "how it works?" mean the same thing.
After all, the "-s" suffix kinda looks like an abbreviation of "does", the same way the "-'re" suffix is an abbreviation of "are" ("writes" vs "does write", "they're" vs "they are").
Instead of saying "Click here and I'll tell you how it works", you're saying "did you have a question about how it works? If so, click here and I'll tell you". I'd argue it's still valid English, but it feels uncertain and weak, like you're not quite sure that's the right question to answer.
How it works - declarative statement. This is how it works
How it works? - an unsure comment about it kind of works but unsure how/why is correct reason. i typically add additional ??? to help convey the unsure nature without using shrug emoji
How does it work? - interrogatory of wanting the answer
> an unsure comment about it kind of works but unsure how/why is correct reason
I'd never interpret it that it way. "It works(?)" or "It works?!?" I'd interpret that way, but "How it works?" to me is firmly questioning the statement itself, not how it works.
Leaving out the How totally changes it though. "It works?!?" means it's working but you don't know how/why nor really care. Kind of like everyone importing 3rd party libraries. It works, but don't care to know how. Just move that card to the done column. "How it works?!?" means there's an attempt at the explanation but it might not be the best explanation if even correct.
Adding a question mark to a statement can imply they're not sure, but it can also they're no sure about the statement, rather than about the subject of the statement.
Seeing as 380 million English speakers are native and over 1 billion English speakers are not native, I think you are fighting a losing battle in grammar.
Every time i bring up someone confusing "it's" with "its" or "their" with 'they're" i get downvoted to oblivion and now suddenly everyone cares. Is "how it works" a greater offence than confusing words with different meanings?
Close enough to get mixed up, even if you know they're different words with different meanings. I often swap 2 completely unrelated words when typing if they sound kind of similar in my head. Called "spoonerism" apparently.
What about a complex algorithm? Seriously asking. There's a lot of color science.. I just don't know if we can put it into a formula or if there will always be ugly combos
I don't know, I guess one could always imagine a slightly more complex, slightly more sophisticated, slightly better algorithm than the ones available.
I think one problem is that human color perception isn't mathematically clean, we have (for instance) a bias toward perceiving colors differently on an anatomical level. And then you've got cultural connotations of colors, at different levels of granularity, right down to personal preferences. Insert shrug emoji here.
I can say I've never found one yet that I wouldn't trust without supervision.
My favorite is Huemint, it's very slick, but it's still not there.
I dunno. It honestly feels a lot like how Google must come up with their adaptive color schemes in newer Android versions. The difference is that Android provides two related colors plus a complementary accent color, and then the fourth is a base "off white" neutral. Sure, it may not stand out as particularly noteworthy or interesting, but it certainly doesn't rate highly on any "this color scheme is horrifying" scale, either.
There isn't actually 4, but that 4th one you perceive...Notice ex. search doesn't do this, it's a stubborn Android engineering politics thing.
I can't even begin to explain how this happened, but, tl;dr: that 4th color was a huge problem to everyone involved. But, once it became a Big Thing, engineer middle managers...sigh. Not worth trying to explain. The amount of chicanery was really astonishing, odds are I'll never work at a BigCo again.
Now, they're stuck with it, even though VPs were insisting it to be fixed since day -100.
To all of your points , it sure looks like he's imitating the same logic to get that off-white...but then isn't using the important part: gotta use my/Google's color space.
That's the magic to get contrast without even having to see the colors or measure ratios or any of that BS. (tl;dr: HCT color space, it's CAM16 strapped to Lab* L, and then you can describe contrasting colors by a delta in tone / L)
I do a (better-looking, I dare say) version of this on my site https://joeldueck.com , which changes the color scheme depending on the outside temp. Currently it's blue because it's a little cold outside. I also have a 1D slider you can play with in the page footer.
I have a script [1] grab the local temp and convert that to two hue values, which it stores as CSS variables --base-temp and --accent.
Then in my CSS I set colors of various things using hsl() values based on one or the other, e.g.:
Nice! My blog calculates a new color scheme every day, by interpolating between some predefined colors (which are based on the season), so sort of a similar thing.
Haha, yeah, when I wrote the comment it was more like -11 C (or +11 F) which is more normal. We're in a deep freeze now though, until tonight when we'll get back up to 0C/32F which is pretty warm for December in Minnesota.
(The other thing I'm proud of in that little script is that it shows you Celsius degrees unless it can determine your time zone has an American name.)
This is a really gross oversimplification of design principals that ventures into "not even wrong".
It makes a statement that you need four colors (as if you couldn't possibly make a usable site with more or less) and then locks you into a 1D slider. That slider gives you four colors without much explanation on that page itself on why this particular algorithm is useful as if this solves some general problem.
I count 8 colours on this website. The 4 mentioned, plus: white (appearing in the hue slider), light-pink (background of code box) and two types of gray (appearing in the up/down widget)
So is a change of hue required in order to say there's been a change of color? I'm not offering saturation in this question, since "oh that's just a less saturated red" seems similar enough to the notion of "oh that's just a lighter red" that the two ought to be in the same "not color" boat...
Assuming the hue and saturation components stay the same, changes in lightness would result in various shades of the same “color”. I think. Maybe. The problem is that in real life changes in lightness result in changes in saturation as well, so things get wonky.
I think that’s more of a question of semantics than colour theory, but maybe? Is pink just light red? Feels like the answer should be no, and that undermines my basic premise above, so I find myself doing mental gymnastics trying to answer your question, which more often than not is a sure fire way to tell that I’m wrong.
You need more when you have more functionalities. Destructive actions, errors, warnings, active/focus-hover/disabled states, etc.
Imagine operating industrial machinery where the ”self-destruct and kill everyone” buttons are the same color, shape and position as the ”shut down safely” button.
If your industrial machinery has a "self-destruct and kill everyone" button, then I think the colour of it is the LEAST of your problems!
Seriously, though, too much color is distracting and you should NEVER use it as the sole way of indicating something 'mission critical' since different people perceive colour very differently.
Who says that only the color is the distinguishing feature?
And if you are thinking about colorblind people when mentioning color perception, then either let them rely on other aspects (ex: shape) or don't allow colorblind people to operate the machine. I know it is not very inclusive, but if colorblindness make it more likely for the operator to kill everyone, then it is for the best (I am mostly thinking about commercial airline pilots here).
And I don't find too much color distracting. Bad use of color is, but signage often use the whole rainbow with great success. For example, metro systems all over the world assign each line a dedicated color, making for quite colorful maps, and it works, that's why they all do it.
Not OP but guessing that this is about metaphorical self-destruct button (that has other important functions beside killing everyone).
Have you every been in airplane cockpit?
There always is a switch that cuts enginees off and from what my pilot friend tells me using it in mid flight is more or less equal to killing everyone. And yes, as far as I remember it is big and red and have a lot of "do not touch" vibe around it.
The point is that it's distinguished by a lot more than just color. Shape, positioning, texture, etc are all used to seperate functionality (which is a hard-earned lesson in aircraft: there have been plenty of accidents because a pilot confused two similar levers/buttons/etc - one famous example was the lever to raise the landing gear being next to the throttle, which resulted in more than one case of it accidentally being raised while landing)
> There always is a switch that cuts enginees off and from what my pilot friend tells me using it in mid flight is more or less equal to killing everyone.
Now I'm curious about that! Is that for a situation in which there is absolutely no hope, but bringing the plane down *now* would be better than not doing so? I.e. it's a kind-of aerial trolley problem?
I actually did not ask when you should use this but I guess this could just be normal engine off switch that is always used when on ground (just you should never touch it mid air) or maybe something also usefull when when you have some fire-like situation going on. The whole not use when flying as far as I remember was because it can be really hard to get the engine to work again. And the look of the switch conveyed this message really well.
Yeah, we learned a lot about user interface design during WWII from things like this.
The B-17 was one of the first 4-engine planes and some people thought it was impossible to fly, but really there were issues because the "raise/lower landing gear" and the "dump fuel overboard" switches were basically next to each other and used identical toggles to save money.
Now the landing gear switch is a big handle with a wheel on the end aka it looks like a landing gear and the fuel dump switch is under a protective Molly cover and they are far apart.
While I generally agree with this particular site, it would have been nice if whoever made this put some better thought into making the light mode colors even remotely aesthetically pleasing. Supported by the other complaints in this thread it is currently completely self-defeating.
I scrolled through hue in both modes and didn’t find a position that I could call presentable. Some are not the worst, but that’s it. I believe it can be done with 4 base colors, but this site doesn’t follow well-known color scheming principles.
However, I definitely disagree with at the very least the implementation here.
To me, the background can't be some significantly saturated color. It has to be very muted. Otherwise my brain says something is wrong with it. The only combinations I found more tolerable were those where the background became a near-grey and the color was limited to the elements. It's just too much. I'm not sure why, it is just is.
And even then, the contrast felt low, like the whole page was 'foggy' or out of focus.
I think the maker of this had a point and I was curious what the crowd here thought about that. I think most people didn’t look further into his argument nor the linked YouTube video, where the idea was that you’d accompany these with darker/lighter variants (depending on dark vs light mode).
Which is a bit funny because tailwind is just smoke and mirrors CSS. Just write CSS if you're going to use Tailwind. You're already doing that but with a proprietary pseudo set of the syntax.
I once worked with a senior developer who had built out an Ember app, but then mentioned to me that he "didn't know Javascript." I was like… my dude, believe it or not, you are currently using Javascript.
It's not one or the other. I learned CSS by learning Tailwind and using my IDE's preview feature to see what each class did (as well as reading articles, listening to podcasts, etc, but Tailwind was the foundation of my learning). The other day I wrote a tabbed view (like those widgets that show the same example in different programming languages) with 0 JavaScript, using some more advanced features like `:has()` and `nth-child()`.
Not asking for a cookie or anything, but just demonstrating that my understanding of CSS wasn't harmed by learning Tailwind. It was the best path for me as a beginner.
Picking colors I still struggle with. I struggle to find a middle ground between "all gray but readable" (which a client once called "depressing" and compared to Soviet block housing) and "hideously garish". Gray is, unironically, one of my favorite colors, but this view is not popular.
I've never understood how generating dozens of variables containing the same color with a change in the value of one of the channels helps.
Can't you just write everything you need in simple CSS?
It would be better, really come up with a template in which you enter 2 colors, and it gives a unique full-color design for the site. CSS has all the possibilities for this! But most web-masters use CSS variables only to store the results of each iteration of cycles.
Thus workbench was originally 4 color, which did stay as default.
Conveiently, at the default hires (640x horiz resolution) 68k cpu would always be able to access chip ram, as the cpu is only able to use half the cycles, and at 4 color the blitter in Agnus uses most of the other half to stream bitplanes to Denise.
I get that the text tries to explain where the 4 colours are used on the page, but I would find it a LOT easier to use if there were a clear 'key' as well.
Then the user comes in with DarkReader, Dark Background With Light Text, their browser's integrated reader mode, or some other client-side stylesheet override and erases your effort.
The site is a good example of aesthetics taking precedent over accessibility. No matter what slider position I chose, I couldn't get an eye-friendly hue with good contrast.
Then I toggled on DarkReader and immediately got what I needed.
With Material 3 they released Material Color Utilities, a library that can generate more complicated color schemes from a source color. It uses a color space that properly accounts for perceived brightness so there's some contrast guarantees.
2 for text and background(primary & secondary colors). 1 accent color to highlight important elements(number 4 & buttons). And an OPTIONAL tertiary color to add a bit of personality(the hue slider).”
So, the article contradicts itself, saying that you need 3 colors.
Also, highlighting can be done by different means than color. You can use bold text, inverted video, a different font, blinking, more subtle animations, etc.
In fact, text and background need not be different colors. Varying brightness can be sufficient.
A nice example of all of that is the original Mac. It used two shades of gray (extremely dark aka ‘black’ and extremely light aka ‘white’), but many other monochrome interfaces also showed that two colors suffice.
I was going down the same path, about to suggest "quaternary" (also "quartary"), but the generated code reveals the rationale: there are 3 (not 4) in the ordered listing, plus an accent color. The explanation before the generator just happens to mention the accent color amidst mentioning the three ordered colors.
This is one of my main topics when integrating design systems for UI concerns, and imho this site does well at demonstrating a central problem and misunderstanding:
The author talking about "4 colors", when really he means 4 "color roles" or "theming swatches".
First of all, 4 don't cut it.
You'll need accents for all of them, to fade sidenotes, visual hierarchy and disabled elements; to differentiate states of interactive; for borders, separators, and other parts of the chrome, and visual distinction of illustrative elements like icons; to give just a few samples ..
But the shortcomings of building a design system on 3 swatches for "text, bg, button" will become obvious much sooner, since defining which of the text/bg colors works for the button text depends on the button color itself, etc.
What most frameworks, complex and simplistic alike, get wrong imho, is that you need TWO "layers" of color definition, not to cram your palette definition into semantic concerns of the ui to be decorated. Those are separate concerns!
Or better said: the purpose of design tokens is not to be an abstraction for css properties of distinctive components.
- One Layer is your brand definition, or the color palettes that will serve to define the GUIs design. These are your design tokens
- The other layer is a semantic abstraction of the requirements in the design context. These are your "text, bg, button text, button bg, ..."
The library of design tokens need to acommodate ANY context the brand design could be applied to, and thus provide a wide range of shades for whatever amount of base colors want to use in the brand design.
These will then be mapped to the second layer of "roles", and populate whatever distinct use cases in the design.
TLDR: there is no "text, bg, highlight" color. There are "primary, secondary, accent, neutral, ..." color palettes, and "copy text, copy bg, button text, button icon, button bg, hovered button, .." swatches to be populated with them.
Where can I read more about this? I ask because I'm not sure that I sufficiently understand well enough to implement the dual-layer approach.[1]
I get that there's "brand" colors and "role" colors.[2]
Naively, I would make a set of `--brand-*` colors consisting of actual color literals (RGB, HSL, whatever) for `--brand-primary-...`, `--brand-secondary-...`, etc.
I would then make a set of `--role-*` colors that is defined exclusively in terms of `var(--brand-...)`.
If an implementation like this is in line with what you are saying, where would I find an example list of "brand" colors (primary, secondary, accent, etc) and "role" colors (copy-text, copy-bg, button-..., etc) to use?
[1] Not because your explanation was not sufficient, but because I am not a UI designer at all.
[2] Maybe not just colors. Border radii could be part of the branding as well. Box-shadows (or lack thereof) could, too. Maybe minimum padding between border and content, margins between elements, etc.
When I saw the title I obviously thought it was going to be about 4 color theorem, so I was disappointed but then I considered...
Is there actually a 4 color theorem like rule for text and background colors needed, probably there is a design rule but that isn't a mathematical rule the way the 4 color theorem is. And I guess that the rule is just text and background each need a color - so two colors.
I’ve seen better designed and clearer websites with two colours.