diff --git a/doc/rofi-theme-manpage.markdown b/doc/rofi-theme-manpage.markdown
index 5a32f46e..61bd7b47 100644
--- a/doc/rofi-theme-manpage.markdown
+++ b/doc/rofi-theme-manpage.markdown
@@ -238,16 +238,28 @@ dynamic: false;
 
 ## Color
 
-* Format: `#{HEX}{6}`
-* Format: `#{HEX}{8}`
-* Format: `rgb({INTEGER},{INTEGER},{INTEGER})`
-* Format: `rgba({INTEGER},{INTEGER},{INTEGER}, {REAL})`
+**rofi** supports the color formats as specified in the CSS standard (1,2,3 and some of CSS 4)
 
-Where '{HEX}' is a hexidecimal number ('0-9a-f'). The '{INTEGER}' value can be between 0 and 255, the '{Real}' value
-between 0.0 and 1.0.
+* Format: `#{HEX}{3}` (rgb)
+* Format: `#{HEX}{4}` (rgba)
+* Format: `#{HEX}{6}` (rrggbb)
+* Format: `#{HEX}{8}` (rrggbbaa)
+* Format: `rgb[a]({INTEGER},{INTEGER},{INTEGER}[, {PERCENTAGE}])`
+* Format: `rgb[a]({INTEGER}%,{INTEGER}%,{INTEGER}%[, {PERCENTAGE}])`
+* Format: `hsl[a]( {ANGLE}, {PERCENTAGE}, {PERCENTAGE} [{PERCENTAGE}])`
+* Format: `hwb[a]( {ANGLE}, {PERCENTAGE}, {PERCENTAGE} [{PERCENTAGE}])`
+* Format: `cmyk( {PERCENTAGE}, {PERCENTAGE}, {PERCENTAGE}, {PERCENTAGE} [, {PERCENTAGE} ])`
+* Format: `<named-color>`
+
+The in CSS proposed white-space format is also supported.
+
+The different values are:
+
+ * `{HEX}` is a hexidecimal number ('0-9a-f' case insensitive).
+ * `{INTEGER}` value can be between 0 and 255 or 0-100 when representing percentage.
+ * `{ANGLE}` Angle on the color wheel, can be in deg, rad, grad or turns. When no unit is specified, degrees is assumed.
+ * `{PERCENTAGE}` Can be between 0-1.0, or 0%-100%
 
-The first formats specify the color as RRGGBB (R = red, G = green, B = Blue), the second adds an alpha (A) channel:
-AARRGGBB.
 
 For example:
 
diff --git a/doc/rofi-theme.5 b/doc/rofi-theme.5
index bbbe7241..b5a01be9 100644
--- a/doc/rofi-theme.5
+++ b/doc/rofi-theme.5
@@ -1,7 +1,7 @@
 .\" generated with Ronn/v0.7.3
 .\" http://github.com/rtomayko/ronn/tree/0.7.3
 .
-.TH "ROFI\-THEME\-MANPAGE" "" "April 2017" "" ""
+.TH "ROFI\-THEME\-MANPAGE" "" "May 2017" "" ""
 .
 .SH "NAME"
 \fBrofi\-theme\fR \- Rofi theme format files
@@ -360,26 +360,59 @@ dynamic: false;
 .IP "" 0
 .
 .SH "Color"
+\fBrofi\fR supports the color formats as specified in the CSS standard (1,2,3 and some of CSS 4)
 .
 .IP "\(bu" 4
-Format: \fB#{HEX}{6}\fR
+Format: \fB#{HEX}{3}\fR (rgb)
 .
 .IP "\(bu" 4
-Format: \fB#{HEX}{8}\fR
+Format: \fB#{HEX}{4}\fR (rgba)
 .
 .IP "\(bu" 4
-Format: \fBrgb({INTEGER},{INTEGER},{INTEGER})\fR
+Format: \fB#{HEX}{6}\fR (rrggbb)
 .
 .IP "\(bu" 4
-Format: \fBrgba({INTEGER},{INTEGER},{INTEGER}, {REAL})\fR
+Format: \fB#{HEX}{8}\fR (rrggbbaa)
+.
+.IP "\(bu" 4
+Format: \fBrgb[a]({INTEGER},{INTEGER},{INTEGER}[, {PERCENTAGE}])\fR
+.
+.IP "\(bu" 4
+Format: \fBrgb[a]({INTEGER}%,{INTEGER}%,{INTEGER}%[, {PERCENTAGE}])\fR
+.
+.IP "\(bu" 4
+Format: \fBhsl[a]( {ANGLE}, {PERCENTAGE}, {PERCENTAGE} [{PERCENTAGE}])\fR
+.
+.IP "\(bu" 4
+Format: \fBhwb[a]( {ANGLE}, {PERCENTAGE}, {PERCENTAGE} [{PERCENTAGE}])\fR
+.
+.IP "\(bu" 4
+Format: \fBcmyk( {PERCENTAGE}, {PERCENTAGE}, {PERCENTAGE}, {PERCENTAGE} [, {PERCENTAGE} ])\fR
+.
+.IP "\(bu" 4
+Format: \fB<named\-color>\fR
 .
 .IP "" 0
 .
 .P
-Where \'{HEX}\' is a hexidecimal number (\'0\-9a\-f\')\. The \'{INTEGER}\' value can be between 0 and 255, the \'{Real}\' value between 0\.0 and 1\.0\.
+The in CSS proposed white\-space format is also supported\.
 .
 .P
-The first formats specify the color as RRGGBB (R = red, G = green, B = Blue), the second adds an alpha (A) channel: AARRGGBB\.
+The different values are:
+.
+.IP "\(bu" 4
+\fB{HEX}\fR is a hexidecimal number (\'0\-9a\-f\' case insensitive)\.
+.
+.IP "\(bu" 4
+\fB{INTEGER}\fR value can be between 0 and 255 or 0\-100 when representing percentage\.
+.
+.IP "\(bu" 4
+\fB{ANGLE}\fR Angle on the color wheel, can be in deg, rad, grad or turns\. When no unit is specified, degrees is assumed\.
+.
+.IP "\(bu" 4
+\fB{PERCENTAGE}\fR Can be between 0\-1\.0, or 0%\-100%
+.
+.IP "" 0
 .
 .P
 For example:
diff --git a/lexer/theme-parser.y b/lexer/theme-parser.y
index 7e9c1da2..816bbd7c 100644
--- a/lexer/theme-parser.y
+++ b/lexer/theme-parser.y
@@ -454,6 +454,20 @@ t_property_color
     $$.red   = $3/255.0;
     $$.green = $4/255.0;
     $$.blue  = $5/255.0;
+}
+ /** rgba ( 0-100% , 0-100%, 0-100%, 0-1.0 ) */
+| T_COL_RGBA T_PARENT_LEFT  t_property_color_value T_PERCENT T_COMMA t_property_color_value T_PERCENT T_COMMA t_property_color_value T_PERCENT t_property_color_opt_alpha_c T_PARENT_RIGHT {
+    if ( ! check_in_range($3,0,100, &(@$)) ) { YYABORT; }
+    if ( ! check_in_range($6,0,100, &(@$)) ) { YYABORT; }
+    if ( ! check_in_range($9,0,100, &(@$)) ) { YYABORT; }
+    $$.alpha = $11; $$.red   = $3/100.0; $$.green = $6/100.0; $$.blue  = $9/100.0;
+}
+ /** rgba ( 0-100%   0-100%  0-100%  / 0-1.0 ) */
+| T_COL_RGBA T_PARENT_LEFT  t_property_color_value T_PERCENT  t_property_color_value T_PERCENT  t_property_color_value T_PERCENT  t_property_color_opt_alpha_ws T_PARENT_RIGHT {
+    if ( ! check_in_range($3,0,100, &(@$)) ) { YYABORT; }
+    if ( ! check_in_range($5,0,100, &(@$)) ) { YYABORT; }
+    if ( ! check_in_range($7,0,100, &(@$)) ) { YYABORT; }
+    $$.alpha = $9; $$.red   = $3/100.0; $$.green = $5/100.0; $$.blue  = $7/100.0;
 }
  /** hwb with comma */
 | T_COL_HWB T_PARENT_LEFT t_property_color_value_angle T_COMMA t_property_color_value_unit T_COMMA t_property_color_value_unit t_property_color_opt_alpha_c T_PARENT_RIGHT {
@@ -468,16 +482,16 @@ t_property_color
     $$.alpha = $6;
 }
   /** cmyk  with comma */
-| T_COL_CMYK T_PARENT_LEFT t_property_color_value_unit T_COMMA t_property_color_value_unit T_COMMA t_property_color_value_unit T_COMMA t_property_color_value_unit T_PARENT_RIGHT {
-    $$.alpha = 1.0;
+| T_COL_CMYK T_PARENT_LEFT t_property_color_value_unit T_COMMA t_property_color_value_unit T_COMMA t_property_color_value_unit T_COMMA t_property_color_value_unit t_property_color_opt_alpha_c T_PARENT_RIGHT {
+    $$.alpha = $10;
     double  c= $3, m= $5, y= $7, k= $9;
     $$.red   = (1.0-c)*(1.0-k);
     $$.green = (1.0-m)*(1.0-k);
     $$.blue  = (1.0-y)*(1.0-k);
 }
  /** cmyk whitespace edition. */
-| T_COL_CMYK T_PARENT_LEFT t_property_color_value_unit  t_property_color_value_unit  t_property_color_value_unit  t_property_color_value_unit T_PARENT_RIGHT {
-    $$.alpha = 1.0;
+| T_COL_CMYK T_PARENT_LEFT t_property_color_value_unit  t_property_color_value_unit  t_property_color_value_unit t_property_color_value_unit t_property_color_opt_alpha_ws T_PARENT_RIGHT {
+    $$.alpha = $7;
     double  c= $3, m= $4, y= $5, k= $6;
     $$.red   = (1.0-c)*(1.0-k);
     $$.green = (1.0-m)*(1.0-k);
diff --git a/libgwater b/libgwater
index 60e5e71e..173f2f55 160000
--- a/libgwater
+++ b/libgwater
@@ -1 +1 @@
-Subproject commit 60e5e71e09e573bd5c7839ce4a892747ea232526
+Subproject commit 173f2f5566636a1de559cc57f3154db70c3f2e9f
diff --git a/test/theme-parser-test.c b/test/theme-parser-test.c
index fc95f5f0..2166758b 100644
--- a/test/theme-parser-test.c
+++ b/test/theme-parser-test.c
@@ -512,6 +512,84 @@ START_TEST ( test_properties_color_h8 )
 }
 END_TEST
 START_TEST ( test_properties_color_rgb )
+{
+    widget wid;
+    wid.name = "blaat";
+    wid.state = NULL;
+    rofi_theme_parse_string ( "* { red: rgb(100%,0%,0%); green: rgb(0%,100%,0%); blue: rgb(0%,0%,100%); }");
+    ThemeWidget *twid = rofi_theme_find_widget ( wid.name, wid.state, FALSE );
+    Property    *p   = rofi_theme_find_property ( twid, P_COLOR, "red", FALSE );
+    ck_assert_ptr_nonnull ( p );
+    ck_assert_double_eq ( p->value.color.red  , 1 );
+    ck_assert_double_eq ( p->value.color.green , 0 );
+    ck_assert_double_eq ( p->value.color.blue , 0 );
+    p   = rofi_theme_find_property ( twid, P_COLOR, "green", FALSE );
+    ck_assert_ptr_nonnull ( p );
+    ck_assert_double_eq ( p->value.color.red  , 0 );
+    ck_assert_double_eq ( p->value.color.green , 1 );
+    ck_assert_double_eq ( p->value.color.blue , 0 );
+    p   = rofi_theme_find_property ( twid, P_COLOR, "blue", FALSE );
+    ck_assert_ptr_nonnull ( p );
+    ck_assert_double_eq ( p->value.color.red  , 0 );
+    ck_assert_double_eq ( p->value.color.green , 0 );
+    ck_assert_double_eq ( p->value.color.blue , 1 );
+}
+END_TEST
+START_TEST ( test_properties_color_rgba_p )
+{
+    widget wid;
+    wid.name = "blaat";
+    wid.state = NULL;
+    rofi_theme_parse_string ( "* { red: rgba(100%,0%,0%,0.3); green: rgba(0%,100%,0%,0.2); blue: rgba(0%,0%,100%,0.7); }");
+    ThemeWidget *twid = rofi_theme_find_widget ( wid.name, wid.state, FALSE );
+    Property    *p   = rofi_theme_find_property ( twid, P_COLOR, "red", FALSE );
+    ck_assert_ptr_nonnull ( p );
+    ck_assert_double_eq ( p->value.color.alpha , 0.3 );
+    ck_assert_double_eq ( p->value.color.red  , 1 );
+    ck_assert_double_eq ( p->value.color.green , 0 );
+    ck_assert_double_eq ( p->value.color.blue , 0 );
+    p   = rofi_theme_find_property ( twid, P_COLOR, "green", FALSE );
+    ck_assert_ptr_nonnull ( p );
+    ck_assert_double_eq ( p->value.color.alpha , 0.2 );
+    ck_assert_double_eq ( p->value.color.red  , 0 );
+    ck_assert_double_eq ( p->value.color.green , 1 );
+    ck_assert_double_eq ( p->value.color.blue , 0 );
+    p   = rofi_theme_find_property ( twid, P_COLOR, "blue", FALSE );
+    ck_assert_ptr_nonnull ( p );
+    ck_assert_double_eq ( p->value.color.alpha , 0.7 );
+    ck_assert_double_eq ( p->value.color.red  , 0 );
+    ck_assert_double_eq ( p->value.color.green , 0 );
+    ck_assert_double_eq ( p->value.color.blue , 1 );
+}
+END_TEST
+START_TEST ( test_properties_color_rgba_percent_p )
+{
+    widget wid;
+    wid.name = "blaat";
+    wid.state = NULL;
+    rofi_theme_parse_string ( "* { red: rgba(100%,0%,0%,30%); green: rgba(0%,100%,0%,20%); blue: rgba(0%,0%,100%,70.0%); }");
+    ThemeWidget *twid = rofi_theme_find_widget ( wid.name, wid.state, FALSE );
+    Property *p   = rofi_theme_find_property ( twid, P_COLOR, "red", FALSE );
+    ck_assert_ptr_nonnull ( p );
+    ck_assert_double_eq ( p->value.color.alpha , 0.3 );
+    ck_assert_double_eq ( p->value.color.red  , 1 );
+    ck_assert_double_eq ( p->value.color.green , 0 );
+    ck_assert_double_eq ( p->value.color.blue , 0 );
+    p   = rofi_theme_find_property ( twid, P_COLOR, "green", FALSE );
+    ck_assert_ptr_nonnull ( p );
+    ck_assert_double_eq ( p->value.color.alpha , 0.2 );
+    ck_assert_double_eq ( p->value.color.red  , 0 );
+    ck_assert_double_eq ( p->value.color.green , 1 );
+    ck_assert_double_eq ( p->value.color.blue , 0 );
+    p   = rofi_theme_find_property ( twid, P_COLOR, "blue", FALSE );
+    ck_assert_ptr_nonnull ( p );
+    ck_assert_double_eq ( p->value.color.alpha , 0.7 );
+    ck_assert_double_eq ( p->value.color.red  , 0 );
+    ck_assert_double_eq ( p->value.color.green , 0 );
+    ck_assert_double_eq ( p->value.color.blue , 1 );
+}
+END_TEST
+START_TEST ( test_properties_color_rgb_p )
 {
     widget wid;
     wid.name = "blaat";
@@ -1030,6 +1108,9 @@ static Suite * theme_parser_suite (void)
         tcase_add_test ( tc_prop_color, test_properties_color_rgb);
         tcase_add_test ( tc_prop_color, test_properties_color_rgba);
         tcase_add_test ( tc_prop_color, test_properties_color_rgba_percent);
+        tcase_add_test ( tc_prop_color, test_properties_color_rgb_p);
+        tcase_add_test ( tc_prop_color, test_properties_color_rgba_p);
+        tcase_add_test ( tc_prop_color, test_properties_color_rgba_percent_p);
         tcase_add_test ( tc_prop_color, test_properties_color_argb);
         tcase_add_test ( tc_prop_color, test_properties_color_hsl);
         tcase_add_test ( tc_prop_color, test_properties_color_hsla);