7 ms·

You need 4 colors

180 points by s4i 2y ago

Vampiero 2y ago
Maybe some prettier ones though. Crusty vomit green on skin rash pink is not my ideal for a webpage
- s4i 2y ago
  I think the dark mode colors look way better than the light mode (you can switch at the top).
  - wruza 2y ago
    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.
  - drpossum 2y ago
    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.
  - vidarh 2y ago
    If any site I used had a dark mode with horrific color schemes like that, I'd put in place a user stylesheet or never visit again.
cluckindan 2y ago
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.
- storm1er 2y ago
  With the cancel action, that's 4 :p
- oneeyedpigeon 2y ago
  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.
  - v-erne 2y ago
    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.
    - rcxdude 2y ago
      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)
    - oneeyedpigeon 2y ago
      > 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?
xwall 2y ago
good but this is already available and a lot better! https://uicolors.app/create https://uicolors.app/create
- high_priest 2y ago
  Why does everything have to be tailwind now? This could be so much more practical with simple css definitions.
  - dhfuuvyvtt 2y ago
    Why is a tailwind palette generator tailwind?
  - turnsout 2y ago
    That would require developers to learn CSS… sadly I think they just “learn Tailwind” now
    - deprecative 2y ago
      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.
      - turnsout 2y ago
        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.
    - maxbond 2y ago
      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.
lovegrenoble 2y ago
Did not find my favorite combination...
- 7bit 2y ago
  I didn't not find any combination that I liked
oneeyedpigeon 2y ago
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.
drpossum 2y ago
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.
- efilife 2y ago
  Design principles
agos 2y ago
does this pass any contrast check for accessibility?
- high_priest 2y ago
  No, it is a simple 1:1 hue relation. You have to match other components colors for accessibility. Like 320 in dark mode, makes the filled buttons, white text, invisible
latexr 2y ago
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.
- emmelaich 2y ago
  Also, "How it works?". Are we fighting a losing battle in grammar? So often I see variations of this rather than "How does it work?"
  - stvltvs 2y ago
    A matter of taste, both are fine grammatically. The verb "to do" isn't obligatory to form the present tense.
    - ramon156 2y ago
      It was fine if the question mark wasn't there
      - stavros 2y ago
        "It would be fine if the question mark weren't there."
        d1sxeyes 2y ago
        The subjunctive in English is dead, let it die peacefully.
        stavros 2y ago
        If I'm going to be prescriptive, I'm going all the way.
        2y ago
gradstudent 2y ago
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) Something something glass houses?
- d1sxeyes 2y ago
  White and grey are shades, rather than typical colours. Any hue with 0 saturation will be a shade between white and black. (Yes, probably there are arguments against this, but in terms of colour theory for dummies.)
  - deleted 2y ago
    [deleted]
  - hunter2_ 2y ago
    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...
    - d1sxeyes 2y ago
      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.
    - positus 2y ago
      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.
- aimor 2y ago
esher 2y ago
In defense of the project I have to say that I like the color naming of 'primary', 'secondary', 'tertiary', plus some 'accent' color.
- drpossum 2y ago
  I'll not be snarky and just say that convention is not new nor is the use of it here innovative.
eadmund 2y ago
I like it. Are these the best palettes ever? No. Are they better than what someone like me would come up with? Yes! Good for the author!
Someone 2y ago
FTA (emphasis added): “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.
- d1sxeyes 2y ago
  Tertiary also by definition means “third” rather than “fourth”.
  - hunter2_ 2y ago
    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.
- sjs382 2y ago
  I think the author's intent is that the color's existence isn't optional. Rather, it should be available with it's usage optional (as needed).
red_admiral 2y ago
My terminal needs 8 colors - or more depending on how you count foreground/background, normal/intense etc.
philippta 2y ago
Refactoring UI suggest you need a wide range of colors: https://www.refactoringui.com/previews/building-your-color-palette https://www.refactoringui.com/previews/building-your-color-p...
butz 2y ago
You should add min and max attributes to number input ;)
snvzz 2y ago
Amiga understood the concept. 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.
vunderba 2y ago
CGA would beg to differ. https://tedium.co/2017/06/15/ibm-pc-cga-graphics-cards-legacy/ https://tedium.co/2017/06/15/ibm-pc-cga-graphics-cards-legac...
mxfh 2y ago
Rotating hues in HSL is a start, but not something that yields consistent or equivalent results for every imaginable combination. See the HSL .vs OKLCH plots here; https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl 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 https://en.wikipedia.org/wiki/Four_color_theorem
velcrovan 2y ago
I do a (better-looking, I dare say) version of this on my site https://joeldueck.com 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.: background-color: hsl(var(--base-temp),50%,96%); [1]: https://joeldueck.com/code/jdcom/file?ci=tip&name=static/res/windfinger.js&ln=5-9 https://joeldueck.com/code/jdcom/file?ci=tip&name=static/res...
- karaterobot 2y ago
  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.
- przemub 2y ago
  Jesus, -18 degrees Celcius? Is that what you mean by "a little cold"? :)
  - velcrovan 2y ago
    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.)
Night_Thastus 2y ago
I am not a website designer, nor do I do much UX. 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.
robertoandred 2y ago
"How it works?" Where did this crazy sentence construction come from? I'm Ron Burgundy?
bryanrasmussen 2y ago
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.
KTibow 2y ago
Also see: Material You 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.
krsdcbl 2y ago
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.
- nottorp 2y ago
  As long as there is no contrast or it's made unreadable in some other way :)
- lelanthran 2y ago
  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.
barbequeer 2y ago
105 comments and counting. I think this page was maybe an attempt to troll opinionated HN people
- s4i 2y ago
  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).
rinzero 2y ago
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.
vardump 2y ago
And those colors are cyan, magenta, white and black?

You need 4 colors

180 points by s4i 2y ago

Vampiero 2y ago

Maybe some prettier ones though. Crusty vomit green on skin rash pink is not my ideal for a webpage

s4i 2y ago
I think the dark mode colors look way better than the light mode (you can switch at the top).
- wruza 2y ago
  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.
- drpossum 2y ago
  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.
- vidarh 2y ago
  If any site I used had a dark mode with horrific color schemes like that, I'd put in place a user stylesheet or never visit again.

cluckindan 2y ago

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.

storm1er 2y ago
With the cancel action, that's 4 :p
oneeyedpigeon 2y ago
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.
- v-erne 2y ago
  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.
  - rcxdude 2y ago
    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)
  - oneeyedpigeon 2y ago
    > 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?

xwall 2y ago

good but this is already available and a lot better! https://uicolors.app/create https://uicolors.app/create

high_priest 2y ago
Why does everything have to be tailwind now? This could be so much more practical with simple css definitions.
- dhfuuvyvtt 2y ago
  Why is a tailwind palette generator tailwind?
- turnsout 2y ago
  That would require developers to learn CSS… sadly I think they just “learn Tailwind” now
  - deprecative 2y ago
    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.
    - turnsout 2y ago
      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.
  - maxbond 2y ago
    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.

lovegrenoble 2y ago

Did not find my favorite combination...

7bit 2y ago
I didn't not find any combination that I liked

oneeyedpigeon 2y ago

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.

drpossum 2y ago

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.

efilife 2y ago
Design principles

agos 2y ago

does this pass any contrast check for accessibility?

high_priest 2y ago
No, it is a simple 1:1 hue relation. You have to match other components colors for accessibility. Like 320 in dark mode, makes the filled buttons, white text, invisible

latexr 2y ago

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.

emmelaich 2y ago
Also, "How it works?". Are we fighting a losing battle in grammar? So often I see variations of this rather than "How does it work?"
- stvltvs 2y ago
  A matter of taste, both are fine grammatically. The verb "to do" isn't obligatory to form the present tense.
  - ramon156 2y ago
    It was fine if the question mark wasn't there
    - stavros 2y ago
      "It would be fine if the question mark weren't there."
      - d1sxeyes 2y ago
        The subjunctive in English is dead, let it die peacefully.
        stavros 2y ago
        If I'm going to be prescriptive, I'm going all the way.
        2y ago

gradstudent 2y ago

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) Something something glass houses?

d1sxeyes 2y ago
White and grey are shades, rather than typical colours. Any hue with 0 saturation will be a shade between white and black. (Yes, probably there are arguments against this, but in terms of colour theory for dummies.)
- deleted 2y ago
  [deleted]
- hunter2_ 2y ago
  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...
  - d1sxeyes 2y ago
    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.
  - positus 2y ago
    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.
aimor 2y ago

esher 2y ago

In defense of the project I have to say that I like the color naming of 'primary', 'secondary', 'tertiary', plus some 'accent' color.

drpossum 2y ago
I'll not be snarky and just say that convention is not new nor is the use of it here innovative.

eadmund 2y ago

I like it. Are these the best palettes ever? No. Are they better than what someone like me would come up with? Yes! Good for the author!

Someone 2y ago

FTA (emphasis added): “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.

d1sxeyes 2y ago
Tertiary also by definition means “third” rather than “fourth”.
- hunter2_ 2y ago
  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.
sjs382 2y ago
I think the author's intent is that the color's existence isn't optional. Rather, it should be available with it's usage optional (as needed).

red_admiral 2y ago

My terminal needs 8 colors - or more depending on how you count foreground/background, normal/intense etc.

philippta 2y ago

Refactoring UI suggest you need a wide range of colors: https://www.refactoringui.com/previews/building-your-color-palette https://www.refactoringui.com/previews/building-your-color-p...

butz 2y ago

You should add min and max attributes to number input ;)

snvzz 2y ago

Amiga understood the concept. 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.

vunderba 2y ago

CGA would beg to differ. https://tedium.co/2017/06/15/ibm-pc-cga-graphics-cards-legacy/ https://tedium.co/2017/06/15/ibm-pc-cga-graphics-cards-legac...

mxfh 2y ago

Rotating hues in HSL is a start, but not something that yields consistent or equivalent results for every imaginable combination. See the HSL .vs OKLCH plots here; https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl 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 https://en.wikipedia.org/wiki/Four_color_theorem

velcrovan 2y ago

I do a (better-looking, I dare say) version of this on my site https://joeldueck.com 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.: background-color: hsl(var(--base-temp),50%,96%); [1]: https://joeldueck.com/code/jdcom/file?ci=tip&name=static/res/windfinger.js&ln=5-9 https://joeldueck.com/code/jdcom/file?ci=tip&name=static/res...

karaterobot 2y ago
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.
przemub 2y ago
Jesus, -18 degrees Celcius? Is that what you mean by "a little cold"? :)
- velcrovan 2y ago
  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.)

Night_Thastus 2y ago

I am not a website designer, nor do I do much UX. 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.

robertoandred 2y ago

"How it works?" Where did this crazy sentence construction come from? I'm Ron Burgundy?

bryanrasmussen 2y ago

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.

KTibow 2y ago

Also see: Material You 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.

krsdcbl 2y ago

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.

nottorp 2y ago
As long as there is no contrast or it's made unreadable in some other way :)
lelanthran 2y ago
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.

barbequeer 2y ago

105 comments and counting. I think this page was maybe an attempt to troll opinionated HN people

s4i 2y ago
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).

rinzero 2y ago

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.

vardump 2y ago

And those colors are cyan, magenta, white and black?