84

Is there an option to include opacity on the colors you define to be your primary/secondary colors in the sass variables? In the fashion of the lighten($color, amount) function?

Furi
  • 1,015
  • 1
  • 9
  • 6

1 Answers1

237

You can use rgba, i.e.

$primary: rgba(20,20,20, .5);

It works for hex values as well

$primary: rgba(#4B00B5, .3);

You can also set the opacity of colors based on a variable value. For example:

$primary-color: #a61723;
....
color: rgba($primary-color, .5);

Demo

Zach Saucier
  • 24,871
  • 12
  • 85
  • 147
  • 7
    Ok thanks this is useful, but not exactly what I was looking for. Maybe I phrased my question wrong, but I'm looking for a way to add opacity to a non-opaque primary color. – Furi Jan 20 '14 at 08:27
  • 1
    Can you explain what you mean by "primary color", perhaps with some example code? – Zach Saucier Jan 20 '14 at 14:37
  • 1
    For example my primary color is set to: $primary-color: #a61723; Now when I'm writing my css and I want to use it somewhere and I want it to have some opacity. Kind of like the lighten($primary-color, 10%). I'm wondering if this is possible with opacity. – Furi Jan 21 '14 at 12:17
  • 13
    You use `rgba` like I said: `color:rgba($primary-color, .5)` – Zach Saucier Jan 21 '14 at 13:41