[HN Gopher] You need 4 colors
___________________________________________________________________
You need 4 colors
Author : s4i
Score : 138 points
Date : 2024-12-11 06:31 UTC (16 hours ago)
(HTM) web link (www.iamsajid.com)
(TXT) w3m dump (www.iamsajid.com)
| Vampiero wrote:
| Maybe some prettier ones though. Crusty vomit green on skin rash
| pink is not my ideal for a webpage
| s4i wrote:
| I think the dark mode colors look way better than the light
| mode (you can switch at the top).
| wruza wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| With the cancel action, that's 4 :p
| oneeyedpigeon wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| > 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?
| v-erne wrote:
| 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.
| GarnetFloride wrote:
| 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.
| GuB-42 wrote:
| 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.
| xwall wrote:
| good but this is already available and a lot better!
| https://uicolors.app/create
| high_priest wrote:
| Why does everything have to be tailwind now?
|
| This could be so much more practical with simple css
| definitions.
| dhfuuvyvtt wrote:
| Why is a tailwind palette generator tailwind?
| turnsout wrote:
| That would require developers to learn CSS... sadly I think
| they just "learn Tailwind" now
| deprecative wrote:
| 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 wrote:
| 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.
| zazaulola wrote:
| 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.
| lovegrenoble wrote:
| Did not find my favorite combination...
| 7bit wrote:
| I didn't not find any combination that I liked
| oneeyedpigeon wrote:
| 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 wrote:
| 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.
| agos wrote:
| does this pass any contrast check for accessibility?
| high_priest wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| A matter of taste, both are fine grammatically. The verb "to
| do" isn't obligatory to form the present tense.
| ramon156 wrote:
| It was fine if the question mark wasn't there
| stavros wrote:
| "It _would be_ fine if the question mark _weren 't_
| there."
| d1sxeyes wrote:
| The subjunctive in English is dead, let it die
| peacefully.
| stavros wrote:
| If I'm going to be prescriptive, I'm going all the way.
| d1sxeyes wrote:
| That's exactly the kind of prescriptivism up with which I
| will not put.
| tczMUFlmoNk wrote:
| Your comma is spliced.
| d1sxeyes wrote:
| And I'm going to continue to blithely ignore outdated
| grammar rules.
| caseyohara wrote:
| It's not a matter of taste. You need an auxiliary verb to
| form a question, in this case the auxiliary verb "does",
| e.g. "How does it work?"
| miroljub wrote:
| As a non-native English speaker, why would I care?
| trimethylpurine wrote:
| Non-native speakers care about grammar.
| miroljub wrote:
| But not about grammar Nazis ;)
| deprecative wrote:
| We should all care about communicating our ideas in a
| correct and concise way. This rise of anti-
| intellectualism must end or we're all dead.
| Maken wrote:
| Because are hard languages to understand grammars without.
| sccomps wrote:
| that order of words makes perfect sense when literally
| translated into my native language.
| jszymborski wrote:
| 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.
| miroljub wrote:
| Just don't tell me you didn't understand "How it works?"
| jszymborski wrote:
| Just because I was able to ultimately understand what it
| meant doesn't mean that it required more effort to parse.
| cglace wrote:
| Native English speaker, and I had no problem reading this
| sentence.
|
| I had to read it twice to realize the word order was
| wrong.
| ffsm8 wrote:
| Just listen to some Hawaiian English and you'll get used
| to anything
|
| Dem lang be supreme fr
| cloud-oak wrote:
| 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>?".
| glorpsicle wrote:
| 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.
| rrrrrrrrrrrryan wrote:
| Surely, most of the usage is from non-native English
| speakers.
|
| Auxiliary verbs (like "does") are not required to form
| questions in Russian, Spanish, Chinese, and probably many
| other languages.
| stavros wrote:
| I think that's just that English isn't the author's native
| language.
| vidarh wrote:
| I feel it's a meek way of saying "how it works".
|
| 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.
| latexr wrote:
| Could've done exactly that and be grammatically correct by
| simply removing the question mark.
| vidarh wrote:
| My point is that it was still grammatically correct with
| the question mark, but the meaning is subtly different.
| dylan604 wrote:
| 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
| vidarh wrote:
| > 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.
| dylan604 wrote:
| 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.
| esafak wrote:
| "How it works, I think?"
|
| The author is not quite sure.
| vidarh wrote:
| 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.
| peter-m80 wrote:
| says the guy who only speaks english
| sccomps wrote:
| 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.
| stetrain wrote:
| I associate that variation specifically with non-native
| English speakers rather than a language evolution happening
| among native English speakers.
| Xelynega wrote:
| But you still understand it fine, no?
|
| Why does it matter how you feel about language
| evolving(especially bringing race into it)?
| deprecative wrote:
| Non-native English speakers is my favorite race.
| stetrain wrote:
| I didn't say how I feel about it or anything about race.
| estebarb wrote:
| 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.
| stetrain wrote:
| Agreed, and I didn't say otherwise.
| lawn wrote:
| One part of effective communication is making things easy
| to understand and to remove stumbling blocks.
|
| Removing uppercase or dots might still convey the same
| meaning but making it harder to read.
|
| It may not matter that much but it does matter.
| jaysonelliot wrote:
| 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.)
| bryanrasmussen wrote:
| If "Police police police police" is a grammatically correct
| English sentence, surely "how it works" is also.
| BobaFloutist wrote:
| This is a personal website highlighting a tech project from
| someone who's probably not a native speaker of the language.
|
| Holding them to a professional writing standard is a bit odd.
| timbit42 wrote:
| 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.
| eitally wrote:
| 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.
|
| https://www.theverge.com/22652920/android-12-how-to-pixel-st...
| petepete wrote:
| The most annoying bit is that it can't toggle the Google
| 'now' status thing, sometimes it's totally unreadable even
| with the built in wallpapers.
| refulgentis wrote:
| I made the logic / color space behind that.
|
| 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 L _a_ b* L _, and then
| you can describe contrasting colors by a delta in tone / L_)
| smitelli wrote:
| 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.
| weaksauce wrote:
| could be the latter. i lost clear vision gradually until not
| being able to read the tv was an in your face moment of
| clarity.
| rsktaker wrote:
| I thought the color combinations were nice, especially at
| around Hue = 190.
| karaterobot wrote:
| Turns out picking colors is harder than just a simple
| algorithm. Who knew? Well, every designer, certainly.
| gradstudent wrote:
| 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 wrote:
| 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.)
| hunter2_ wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| Well these are the colors they define:
| --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%);
|
| As I see it that's either 3 colors or 5 colors but not 4
| esher wrote:
| In defense of the project I have to say that I like the color
| naming of 'primary', 'secondary', 'tertiary', plus some 'accent'
| color.
| drpossum wrote:
| I'll not be snarky and just say that convention is not new nor
| is the use of it here innovative.
| eadmund wrote:
| 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 wrote:
| 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 wrote:
| Tertiary also by definition means "third" rather than "fourth".
| hunter2_ wrote:
| 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 wrote:
| 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 wrote:
| My terminal needs 8 colors - or more depending on how you count
| foreground/background, normal/intense etc.
| philippta wrote:
| Refactoring UI suggest you need a wide range of colors:
|
| https://www.refactoringui.com/previews/building-your-color-p...
| butz wrote:
| You should add min and max attributes to number input ;)
| snvzz wrote:
| 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 wrote:
| CGA would beg to differ.
|
| https://tedium.co/2017/06/15/ibm-pc-cga-graphics-cards-legac...
| mxfh wrote:
| 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
| velcrovan wrote:
| 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...
| karaterobot wrote:
| 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.
| Night_Thastus wrote:
| 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 wrote:
| "How it works?"
|
| Where did this crazy sentence construction come from? I'm Ron
| Burgundy?
| bryanrasmussen wrote:
| 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 wrote:
| 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 wrote:
| 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.
| barbequeer wrote:
| 105 comments and counting. I think this page was maybe an attempt
| to troll opinionated HN people
| rinzero wrote:
| 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 wrote:
| And those colors are cyan, magenta, white and black?
___________________________________________________________________
(page generated 2024-12-11 23:01 UTC)