Speaker A
Colors are hard.
Discover why the 60-30-10 color rule fails in product design and learn a 4-layer color theory approach for richer UI designs.
Key Takeaways
- The 60-30-10 rule oversimplifies color use in product UI, which requires nuanced layering and semantic meaning.
- Neutral backgrounds need multiple layers and subtle variations rather than pure white or stark contrasts.
- Functional accent colors should be used as a scale with different shades for states like hover and links.
- Dark mode demands greater contrast spacing and lighter elevated surfaces to maintain visual hierarchy.
- Semantic colors and perceptually uniform palettes like OKLCH are essential for meaningful UI communication and theming.
Summary
- The traditional 60-30-10 color rule is often ineffective for product UI design, as shown by examples like Vercel’s mostly black interface.
- Layer 1 covers neutral foundations, emphasizing multiple background layers, subtle strokes, and varied text shades for balanced design.
- Layer 2 introduces functional accent colors as scalable ramps rather than single hues, aiding consistency and dark mode adaptation.
- Dark mode requires doubling color contrast distances and lighter surfaces for elevated elements to maintain clarity and hierarchy.
- Layer 3 focuses on semantic colors for meaningful communication, using perceptually uniform OKLCH palettes for charts and notifications.
- Layer 4 explains theming by adjusting lightness, chroma, and hue in OKLCH space to create consistent color variants across designs.
- The video recommends tools like UI Colors and oklch.com for palette generation and highlights the importance of color theory in UI UX.
- Practical advice includes avoiding black borders, using white at ~85% for edges, and making important buttons darker for emphasis.
- Sponsored content promotes Zero to Mastery’s UI/UX career path with extensive courses, community, and resources.
- A downloadable Figma file with color variables is offered to help viewers apply these concepts directly.
Full Transcript — Download SRT & Markdown
Speaker A
If you've ever designed a website, you've probably heard of the 60 30 10 rule.
Speaker A
It's simple, it creates balanced interfaces and prevents many designers from rage quitting.
Speaker A
But in product design, things change.
Speaker A
Take Vercel, it's like 90% black, 8% white, and 2% red, which sometimes isn't even there.
Speaker A
In this video, I'm going to walk you through the four layers of color theory for product design, so by the end, you can create rich, interactive designs without any guesswork.
Speaker A
Layer number one is our neutral foundation.
Speaker A
So let's talk backgrounds first.
Speaker A
Linear uses 99% white, Notion is 100%, Vercel is 98%.
Speaker A
There is some variance, but nothing to say you can't use pure white.
Speaker A
Now, for a landing page, three to five neutrals works great.
Speaker A
But for a product design, you'll generally want four layers of backgrounds, at least one stroke, often two, and then about three text variants.
Speaker A
This ignores the chart, which we'll talk about in a bit, and that's not even counting any hover states or interactivity.
Speaker A
So, how do we choose all these colors?
Speaker A
Let's start with the frame of your web app.
Speaker A
This is a slightly darker anchor, for example, Mercury adds 2% blue to their sidebar.
Speaker A
Because it's a pretty large element, it only needs to be very slightly darker, especially on light mode.
Speaker A
As we add content to the dashboard, it's important to know that light mode is very flexible.
Speaker A
Because we can have a dark background with lighter cards like Vercel, or a light background with darker cards like Notion.
Speaker A
Or monochromatic layers like Supabase.
Speaker A
Darker cards are often the same color as your sidebar, and lighter cards can be pure white.
Speaker A
Which is a good reason not to have pure white as your background.
Speaker A
Now, if I have cards on this background, it looks very washed out.
Speaker A
It's only slightly better if I add a subtle drop shadow.
Speaker A
You might reach for a thin black border.
Speaker A
Don't.
Speaker A
Instead, use roughly 85% white to define the edge, but not overpower it.
Speaker A
Another great rule is the more important a button is, the darker it is.
Speaker A
That goes for ghost buttons all the way to black buttons with white text, and everything else within that range.
Speaker A
Though most multi-purpose buttons sit around 90 to 95% white.
Speaker A
Finally, text.
Speaker A
The darkest colors are reserved for important headings, but even those are still about 11% white.
Speaker A
The majority of your text should fall around 15 to 20% white and subtext around 30 to 40%.
Speaker A
Now, layer two is about adding a functional accent.
Speaker A
Some products stay neutral, like Vercel.
Speaker A
But if you think of Linear, you think blue purple, or Supabase as bright green.
Speaker A
Now, first, don't think of your color as a single color.
Speaker A
Rather, think of it as a scale, from the lightest version of it to the darkest.
Speaker A
You'll really only use the 500 or 600 as your main color.
Speaker A
But a hover would step up to a 700, and a link might be 400 or 500.
Speaker A
To generate a palette like this, I used UI colors to get a ramp, which will also help when we switch to dark mode in a second.
Speaker A
But if you want a deeper understanding of UI and colors that we can't get to in just one YouTube video, you should check out today's sponsor, Zero to Mastery.
Speaker A
They have a fantastic UI UX design career path, which guides you through seven courses and 139 hours of instruction.
Speaker A
To deepen your understanding and land jobs.
Speaker A
Also, with a Discord community of over half a million students, you'll be joining a thriving group of learners.
Speaker A
These courses include in-depth video instruction, helping you build real-world practical designs.
Speaker A
And you'll even earn a certificate of completion once you finish a course to showcase on your resume or portfolio.
Speaker A
They also currently have a free UI UX cheat sheet that I will link to down below.
Speaker A
But if you're interested, the link and promo code will be down below to get you 10% off.
Speaker A
Now, when you turn down the lights for dark mode, the rules change.
Speaker A
The first is that dark colors look more similar, so they require more distance to look as different as lighter colors.
Speaker A
That's a bit of a mouthful, but if you just reflect your light palette.
Speaker A
The background elements will lose all of their distinction.
Speaker A
So, a good rule of thumb is double the distance.
Speaker A
Most of our light colors have distances of about 2% white between them.
Speaker A
So, on dark mode, we'll want 4 to 6% between those colors.
Speaker A
Stretching out our color palette with that rule results in actually a pretty reasonable design.
Speaker A
Now, for the main color.
Speaker A
Once again, we can break out the color ramp to choose a 300 or 400 as our primary brand color on dark mode.
Speaker A
With hover being a 400 or 500.
Speaker A
You'll also need to dim the text and brighten any borders.
Speaker A
And if you stare at this screen all day, you'll definitely start to notice the difference.
Speaker A
Now, where light mode was more flexible, dark mode is not.
Speaker A
Surfaces always get lighter as they elevate.
Speaker A
So, any raised cards need to have a lighter color or just a border like the search bar.
Speaker A
And just like that, we've created an enterprise grade light and dark mode.
Speaker A
But now let me show you how to handle charts, chips, notifications.
Speaker A
And all the other wildly colored components.
Speaker A
Our third layer is all about semantic communication.
Speaker A
Colors convey meaning.
Speaker A
And because of that, we have to break the system that we've built.
Speaker A
Vercel understands this, so even with a brand color of black and white, you can tell which builds are successful, failed, or in progress.
Speaker A
Even if your brand color is purple, it's pretty much a design sin to make destructive actions anything other than red.
Speaker A
So, you'll always need some semantic colors.
Speaker A
When it comes to charts, a neutral color chart is super lame.
Speaker A
And if we just use our brand color ramp, things look a bit too similar.
Speaker A
So we need a full spectrum.
Speaker A
But ever notice how bright greens seem so much more neon than bright blue?
Speaker A
There's a whole bunch of very interesting science behind that, which I won't get into today.
Speaker A
But we need some way to get the same tone of color across the entire spectrum.
Speaker A
And the solution is the OKLCH palette, which depends on human perception of color.
Speaker A
Meaning we can get the same perceived brightness across different colors.
Speaker A
To do this, I go to oklch.com and set the lightness and chroma.
Speaker A
Then you can pretty simply increment the hue by about 25 to 30 and grab that color for the chart.
Speaker A
Last but not least, layer four, theming.
Speaker A
If you want to convert any of your designs into a color themed version, it's actually a lot easier than you think.
Speaker A
You could take all of your neutrals and guess.
Speaker A
But this is where the OKLCH color system becomes super useful.
Speaker A
For every neutral you have, plug in the hex value and drop the lightness by 0.03 and increase the chroma by 0.02.
Speaker A
And then just adjust the hue to get any themed output.
Speaker A
This means you can theme any design to red, green, blue, bang on the money every single time.
Speaker A
And this trick also works super well, maybe even better for dark mode.
Speaker A
And those four levels are everything you'll need to take your design game to the next level for more complex designs and applications.
Speaker A
If you'd like to check out Zero to Mastery, it'll be the first link down below.
Speaker A
And if you want to download the Figma file with all the colors and variables in it.
Speaker A
It'll be down there too.
Speaker A
Thank you so much for watching.
Speaker A
And I'll see you in the next one.
Topics:UI designcolor theory60-30-10 ruleproduct designdark modesemantic colorsOKLCH palettecolor themingUI UXFigma
![The Wounded Spirit – Timothy Keller [Sermon] — Transcript](https://i.ytimg.com/vi/pkL3R27ZV1o/maxresdefault.jpg)
