I'm having this question wrapped around my head for quite some time. The thing is that my main application has a red color theme. And for just cancel buttons I used to use just gray colors but now that I need a "danger" color... What should I use? Purple? Orange? Using the red again is awkward, maybe a darker red?
PD: I cannot use blue because it's our competitors color.
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 differentiate between the app color and your danger action.
2- You can use pure white popup and, apply red icons, exclamation mark or signs within this popup.
3- Another suggestion is to use black color, and use white signs over the black popup. This may be a change.
If you can provide us with a screen of your red system, I can give you a straight forward solution.
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 button. You can use your standard red button, but support it with other danger messaging. Like this:
If your user is about to do something dangerous, it's better to use an alert and messaging to highlight the danger, rather than just rely on button colour.
It's also worth saying that there's nothing inherently dangerous or scary about a red app. I designed for Coca-Cola for a while, and their main brand colour is red. They're a very good example of how to apply red branding to websites and apps, if you're looking for one. They mainly use black, grey and white as their accent colours.
One absolutely key thing to note here:
Colours are handy for conveying a visual message, but you need to consider accessibility when making these kinds of UX decisions. If your user has any form of colour blindness or other visual impairment, you need some other kind of indicator (icons or wording) to convey the meaning. The fact that the button is titled Delete is great, but if you're concerned that it's 'system-critical' information, then that needs to be conveyed in way beyond simply using colour as an indicator.
This article covers the use of colour with regards to accessibility, and has a paragraph specifically on this:
"...ensure accessibility by making sure you don’t rely on color to relay crucial system information. So, for things like error states, success states, or system warnings, be sure to incorporate messaging or iconography that clearly calls out what’s going on."
Also, considering that red is your app's key colour: ensure that you're using a contrast of at least 4.5:1 to adhere to WCAG 2 level AA at a minimum. This is a really handy tool for checking that: https://webaim.org/resources/contrastchecker/
As the number of viable options increases, it may become more difficult to make a final decision. Once you've narrowed it down to a few, you can consider allowing users to select the scheme they prefer.
Some color schemes to consider:
Red = danger = your app is dangerous. Change the main color of your app.
Blue = competitor's color. Competitor = dangerous. Use blue for danger. While a lighter blue may be mistaken for a positive alert (such as success), a dark blue may not.
Use black and white. The examples in Khalil Hanna's answer are striking. The problem is black/white may be confused with ordinary text. Black + orange/yellow may not have the same problem.
Use standard colors regardless the main color of your theme. Green = success. Yellow/Orange = Caution. Red = danger/warning. Etc.
However, as Aline points out, the Google Material Design Color Usage advises: "Since red is a brand color, don’t also use it to convey an error state. Choose alternative alert colors that don’t use brand coloring." Their example uses orange. But purple seems a viable option as well.
The "danger color" should stand out from the color scheme of your app. It is also good to consider meaning. Red/Orange/yellow, in most cultures, indicates danger, alert, attention. Usually, if I see a blue or green message, I automatically think it is a success feedback. I think you should use orange or yellow, to stand out from the main colors.
In Google Material Design, they use orange with red themes: https://material.io/design/color/color-usage.html#meaning
The first color scheme that comes to mind to indicate danger is a combination of yellow and black, particularly if the black is in diagonal stripes. I would suspect the association with danger comes from bees in nature.
Simply typing yellow black sign into Google will result in a lot of signs that indicate danger of some sort. Sings about poison, about danger of falling off, the tape used around crime scenes, etc.
I have personally seen message boxes with a thick, yellow and black diagonally striped border, and they always make me think there is something potentially dangerous, likely a possibly dangerous decision to be made. Seeing a button with a rounded triangle with the same pattern would tell me that I should be very cautious if I press that button.
To me, plain red is not actually as strong, and would need white and black to fully get across the same level of danger.
If you are already using the colour red, then use yellow and black. It is a natural warning sign of nature, and will definitely draw attention. It is used also on many danger signs for construction sites.
In western countries, there is nothing culturally more dangerous than black on red:
Color alone does not convey meaning, and as such by itself it should not be relied on for any expression of "danger" or "warning." Further, visual impairments such as Deuteranomaly (6% of males affected) make certain color contrasts invisible, not to mention cultural differences as several have mentioned.
Colors such as red, yellow, orange were chosen not because the color has a specific meaning, but because the color provides a certain color contrast, luminance contrast, and "eye catch," and thus stands out against the background.
It is more important to have adequate luminance contrast, and to use attention/attraction oriented symbols that are clear in their intent.
Luminance contrast does not rely on color contrast which may be misperceived due to impairments or cultural differences, and helps the symbol to stand out. Using a higher luminance contrast than surrounding stimuli (text, buttons, etc.) is what will help gain attention and user focus.
Color contrast can help increase awareness in terms of cognitive recognition of a warning, but it must be a secondary design consideration. For instance, if the market is North America, green is possibly a bad choice for a warning — But green in combination with it's opponent color red (including purples) creates very strong edge detection in normal human visual perception.
Understandable symbols acan be very useful for conveying meaning in a way that (ideally) does not require translation. Though again cultural differences may have a strong influence.
In Las Vegas, the MGM Grand Hotel was originally designed where the front entrance was through a giant emerald colored lion's mouth. Shortly after opening thought, they tore it down and rebuilt the entrance to remove the lion's mouth because they discovered that a lion's mouth had a particularly negative symbolism in some asian cultures.
Within the realm of computers though, there are common icons that have attained an international acceptance of certain meanings — the well understood is typically the better choice, especially for conveying a warning.
Text is king, language differences notwithstanding. Clear and simple text is the best way to convey a specific meaning. A single word with a pop-up tool-tip of additional information is my personal preference for usability.
Animation and motion will affect attention if that is the goal. A single blinking red LED on a wall of 1000 red LEDs will surely grab your attention for instance.
In short, it is more important to have good/high luminance contrast & descriptive text and symbols than any specific color combination.
Here's an example of using luminance contrast, a modification of your example delete button vs the save button:
Something to consider about creating User Interfaces is that colour should never convey meaning. However, you can highlight destructive buttons by making them different from other buttons or the rest of your interface. Instead of thinking about colours you could use, try thinking about how to make the button look different.
Everyone's creative side varies, so if you do want to keep your current style but change the colours I would recommend looking at a colour wheel for colours that are opposite your reds. This will help make the button stand out. You can also emphasize the button by going for destructive colours like yellows, reds (obviously darker or lighter), black or white (if it suits your design.)
Design is a very challenging part of the development process, so playing around will definitely help. Get people's opinions - get them to choose a design. Make some mockup designs. I hope this helped.
