104
votes
Accepted
What color to choose as "danger" if the main color of my app is red
I think you need to play around. If your screens are red and you are about to use a warning or Danger. I have the following suggestions:
1- You can still use red but in different degree in order to ...
- 1,244
96
votes
Best error color on blue color?
MD guidelines aren't rules
The Google Design team wanted to provide a good selection of colors for app devs who can't think in color. It's a solid palette (the whole UI framework is great), but it ...
- 21.3k
93
votes
Accepted
Should software for 8 to 14 year olds be colourful and "childish"?
What you have described here is not 'childishly' colourful - The colours represent different information: the colour has meaning beyond decoration.
Scratch colour codes its code blocks according to ...
- 14.2k
93
votes
Accepted
How do you decide UI colors when logo consist of three colors?
As written in the comments, it's not easy to define a color palette without all the conceptual and technical information of the project.
This answer is somewhat technical and generic based on three ...
- 18.3k
60
votes
Is colour alone enough to convey warning?
No, it is not enough. This is how your image looks for people with achromatopsia (grayscale vision)
This with Blue-Weak Tritanomaly
This with Blue-Blind Tritanopia
As you can see, there are evident ...
- 37.3k
55
votes
What color to choose as "danger" if the main color of my app is red
Rather than focusing just on the colour of the button, it's better to focus on the experience as a whole for that particular task. You don't necessarily need a separate danger colour for a delete ...
- 581
49
votes
Colour palette progression to indicate priority
I would split the 20 priority levels into 4 distinct sets (for the sake of colour coding at least). For example on Microsoft TFS (collaboration tools for software projects) there are 4 severity levels ...
- 6,143
37
votes
Accepted
Color coding Alerts
When doubting about how to differentiate graphic elements, a good tool is to test all visual contrasts in design.
Shape contrast
Size contrast
Texture contrast
Color contrast
If the color contrast ...
- 18.3k
36
votes
What color to choose as "danger" if the main color of my app is red
One absolutely key thing to note here:
Do not rely solely on colour to convey meaning.
Colours are handy for conveying a visual message, but you need to consider accessibility when making these ...
- 461
36
votes
Colorblindness-friendly color scale with a clear progression, without using red/purple/pink
It's not that complicated to create a custom color scheme, you have enough information to do it easily:
Five colors
Avoid warm colors close to red
Colorblind friendly
High contrast
And a fact that ...
- 18.3k
32
votes
Accepted
Colours that represent beginner, intermediate and expert
The use of distinct colours (e.g. green, orange, red or bronze, silver, gold) can be subject to interpretation, as there are usual meaning associated with specific colours depending on cultural, ...
- 26.7k
31
votes
Accepted
What is the color associated with lukewarm?
Beige
Windows 10 has a color temperature meter for Night light.
Using that as a starting point, I extracted the main colors from the gradient, inverted the colors to extrapolate the 'cool' half of ...
- 9,597
29
votes
Colour palette progression to indicate priority
I know that we should answer based on your requirements, but in this case, there is a chance your requirements are wrong.
Let me explain.
there are 20 priority levels.
You can not have 20 ...
- 778
28
votes
Accepted
Colorblindness-friendly colors called "green", "blue", "yellow", and "red"
Would patterns work for your use case?
You could keep the shape, size, position and orientation the same for each one and have a 'colour blindness mode' where instead of colours to distinguish the ...
- 2,588
27
votes
What is the color associated with lukewarm?
There isn't really a color associated with lukewarm. As the diagram in xiota's answer shows, the color association humans have (red = warm, blue = cold) are even the opposite to what you'd expect from ...
- 3,310
26
votes
Accepted
What colour should Register and Login buttons be?
The color of the login button should match the primary color of your style theme.
Apparently, you're using material design. If your theme, for example, uses blue (#2196F3) as a primary color, your ...
- 11.5k
25
votes
Accepted
Logical colors for a wireframe
Logical colors would be to show visual hierarchy with a range of one color. Exactly like you did in your wireframe. I can see clearly how text is built (title vs body), what the position and ...
- 7,905
24
votes
What is the color associated with lukewarm?
Violet and Light Green
In color perception theory, at the color wheel there's a division that differentiates warm and cold colors. This division is the one set by violet and light green: above this ...
- 18.3k
24
votes
Accepted
When to use white text on top of a color for readability?
This is standardised by W3C's Web Content Accessibility Guidelines (WCAG) and decided based on the contrast ratio between colors, which you can calculate programmatically.
In your case, you would want ...
- 12k
23
votes
Is colour alone enough to convey warning?
Color alone is never sufficient to convey information because:
Roughly 5% of the world population has some form of color vision deficiency, either dichromacy (only two types of working cone cells), ...
20
votes
What is the color associated with lukewarm?
I think yellow makes sense for "lukewarm" if red represents "warm" for the reasons called out in Danielillo's answer: "lukewarm" means "moderately warm" and should therefore be represented by a color ...
- 301
19
votes
Accepted
Best error color on blue color?
Show your error message on a neutral-colored box.
download bmml source – Wireframes created with Balsamiq Mockups
- 9,034
19
votes
Accepted
Change link color based in background color?
Comparing the saturation and brightness of white to yellow:
There is a difference of +25 in saturation and -5 in brightness
If blue has S=65 and B=100, the resulting blue would be:
S 65 + 25 = 90
B ...
- 18.3k
19
votes
Is colour alone enough to convey warning?
The color alone is not sufficient as a distinguishing feature. The comparison to a traffic light is also not entirely correct. A traffic light has not only the three colors but also a very specific ...
- 3,415
16
votes
Color coding Alerts
It looks like you should just use one shade of red, the box background, and opacity.
Here's an example of a few different states using one color of red. Opacity is only used once, on the 42 example, ...
- 5,321
16
votes
Change link color based in background color?
Use Google inspector, they suggest another color that passes AA and AAA
AA : #217387
AAA : #185564
What is AA and AAA ?
These are compliance levels to make digital content more accessible provided by ...
- 500
15
votes
Accepted
Multi or Single colored rating stars
First i believe you are well prepared to use only star rating system. As there are other ways around to compare products or profile (artists in your case).
Side Note: YouTube switched from a star-...
- 1,598
14
votes
Colorblindness-friendly color scale with a clear progression, without using red/purple/pink
I really suggest to go with a pattern, as most maps do. Here's the take of the Swiss federal mapping agency:
Taken from their complete signs document:
https://www.swisstopo.admin.ch/content/swisstopo-...
- 241
13
votes
Accepted
Background colour suitable for both black and white text
Foreground light blue, white, gray, yellow color texts are present. Colors that don't go with black color background are not visible.
I'll withold judgement until I actually see an image or link to ...
- 248
12
votes
Accepted
Maximum contrast ratio for good accessibility
More Contrast Generally Better
There are no general standards for capping contrast for either day or night displays. Generally, the higher the contrast, the easier the reading in both cases (Parker &...
- 37.7k
Only top scored, non community-wiki answers of a minimum length are eligible