from Hacker News

You need 4 colors

by s4i on 12/11/24, 6:31 AM with 133 comments

  • by latexr on 12/11/24, 12:21 PM

    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.

  • by velcrovan on 12/11/24, 4:09 PM

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

        background-color: hsl(var(--base-temp),50%,96%);
    [1]: https://joeldueck.com/code/jdcom/file?ci=tip&name=static/res...

  • by mxfh on 12/11/24, 3:57 PM

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

  • by drpossum on 12/11/24, 11:59 AM

    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.

  • by gradstudent on 12/11/24, 12:32 PM

    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?

  • by cluckindan on 12/11/24, 10:56 AM

    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.

  • by Vampiero on 12/11/24, 9:41 AM

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

  • by Night_Thastus on 12/11/24, 4:52 PM

    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.

  • by philippta on 12/11/24, 2:59 PM

    Refactoring UI suggest you need a wide range of colors:

    https://www.refactoringui.com/previews/building-your-color-p...

  • by eadmund on 12/11/24, 1:33 PM

    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!

  • by barbequeer on 12/11/24, 8:35 PM

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

  • by esher on 12/11/24, 12:47 PM

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

  • by vunderba on 12/11/24, 3:45 PM

  • by xwall on 12/11/24, 11:44 AM

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

  • by snvzz on 12/11/24, 3:31 PM

    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.

  • by oneeyedpigeon on 12/11/24, 11:51 AM

    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.

  • by rinzero on 12/11/24, 9:39 PM

    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.

  • by KTibow on 12/11/24, 7:55 PM

    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.

  • by Someone on 12/11/24, 1:37 PM

    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.

  • by butz on 12/11/24, 3:14 PM

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

  • by krsdcbl on 12/11/24, 8:25 PM

    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.

  • by red_admiral on 12/11/24, 2:04 PM

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

  • by vardump on 12/11/24, 10:23 PM

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

  • by agos on 12/11/24, 12:01 PM

    does this pass any contrast check for accessibility?

  • by bryanrasmussen on 12/11/24, 6:51 PM

    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.

  • by lovegrenoble on 12/11/24, 11:50 AM

    Did not find my favorite combination...

  • by robertoandred on 12/11/24, 5:18 PM

    "How it works?"

    Where did this crazy sentence construction come from? I'm Ron Burgundy?