I’ve seen better designed and clearer websites with two colours.
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.
So often I see variations of this rather than "How does it work?"
Holding them to a professional writing standard is a bit odd.
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.
https://www.theverge.com/22652920/android-12-how-to-pixel-st...
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)
The color combinations are sometimes pretty pleasant, e.g. check out valued like 30 or 70 or 335.
The page is missing a "contrast" slider, and also a "saturation" slider, to make the combinations more agreeable.
Also, dark highly saturated colors often look problematic unless they cover a large enough area; the --color-accent has this problem.
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.:
background-color: hsl(var(--base-temp),50%,96%);
(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.)
See the HSL .vs OKLCH plots here; https://evilmartians.com/chronicles/oklch-in-css-why-quit-rg...
That's even before going into accessibility considerations with safeguarding the sets for common types of color vision deficiencies.
Also I only clicked, because I thought it was some kind of demo on the https://en.wikipedia.org/wiki/Four_color_theorem
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.
Something something glass houses?
--primary-color: hsl(var(--hue), 50%, 90%);
--pre-primary-color: hsl(var(--hue), 50%, 95%);
--secondary-color: hsl(var(--hue), 50%, 10%);
--tertiary-color: hsl(var(--tertiary-hue), 80%, 20%);
--accent-color: hsl(var(--accent-hue), 80%, 20%);
(Yes, probably there are arguments against this, but in terms of colour theory for dummies.)
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.
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.
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.
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.
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.
https://www.refactoringui.com/previews/building-your-color-p...
https://tedium.co/2017/06/15/ibm-pc-cga-graphics-cards-legac...
This could be so much more practical with simple css definitions.
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.
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.
“You need 4 colors
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.
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.
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.
Like 320 in dark mode, makes the filled buttons, white text, invisible
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.
Where did this crazy sentence construction come from? I'm Ron Burgundy?