Try it Yourself: Colors Psychology

Colors Psychology

<!DOCTYPE html>
<html>
<head>
<style>
.alert-error {
  background: hsl(0, 70%, 96%);
  border-left: 4px solid hsl(0, 70%, 45%);
  color: hsl(0, 70%, 30%);
}

.alert-success {
  background: hsl(140, 55%, 95%);
  border-left: 4px solid hsl(140, 55%, 35%);
  color: hsl(140, 55%, 25%);
}
</style>
</head>
<body>

<div class="alert-error">Error: something went wrong.</div>
<div class="alert-success">Success: your changes were saved.</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
.alert-error {
  background: hsl(0, 70%, 96%);
  border-left: 4px solid hsl(0, 70%, 45%);
  color: hsl(0, 70%, 30%);
}

.alert-success {
  background: hsl(140, 55%, 95%);
  border-left: 4px solid hsl(140, 55%, 35%);
  color: hsl(140, 55%, 25%);
}
</style>
</head>
<body>

<div class="alert-error">Error: something went wrong.</div>
<div class="alert-success">Success: your changes were saved.</div>

</body>
</html>