diff --git a/R/cell_spec.R b/R/cell_spec.R
index aacac76..d83a8b1 100644
--- a/R/cell_spec.R
+++ b/R/cell_spec.R
@@ -23,13 +23,15 @@
 #' @param angle 0-360, degree that the text will rotate. Can be a vector.
 #' @param hover_message A vector of strings to be displayed as hover message.
 #' Of course, this feature is nly available in HTML.
+#' @param background_as_tile T/F value indicating if you want to have round
+#' cornered tile as background.
 #'
 #' @export
 cell_spec <- function(x, format,
                       bold = F, italic = F, monospace = F,
                       color = NULL, background = NULL,
                       align = NULL, font_size = NULL, angle = NULL,
-                      hover_message = NULL) {
+                      hover_message = NULL, background_as_tile = TRUE) {
 
   if (missing(format) || is.null(format)) format = getOption('knitr.table.format')
   if (is.null(format)) {
@@ -40,7 +42,7 @@
   if (tolower(format) == "html") {
     return(cell_spec_html(x, bold, italic, monospace,
                           color, background, align, font_size, angle,
-                          hover_message))
+                          hover_message, background_as_tile))
   }
   if (tolower(format) == "latex") {
     return(cell_spec_latex(x, bold, italic, monospace,
@@ -50,15 +52,21 @@
 
 cell_spec_html <- function(x, bold, italic, monospace,
                            color, background, align, font_size, angle,
-                           hover_message) {
+                           hover_message, background_as_tile) {
   cell_style <- NULL
   if (bold) cell_style <- paste(cell_style,"font-weight: bold;")
   if (italic) cell_style <- paste(cell_style, "font-style: italic;")
   if (monospace) cell_style <- paste(cell_style, "font-family: monospace;")
-  if (!is.null(color)) cell_style <- paste0(cell_style, "color: ", color, ";")
+  if (!is.null(color)) {
+    cell_style <- paste0(cell_style, "color: ", html_color(color), ";")
+  }
   if (!is.null(background)) {
-    cell_style <- paste0(cell_style, "border-radius: 4px; padding-right: 4px",
-                         ";padding-left: 4px; background-color: ", background, ";")
+    cell_style <- paste0(
+      cell_style,
+      ifelse(background_as_tile, "border-radius: 4px; ", ""),
+      "padding-right: 4px; padding-left: 4px; ",
+      "background-color: ", html_color(background), ";"
+    )
   }
   if (!is.null(align)) {
     cell_style <- paste0(cell_style, "text-align: ", align, ";")
@@ -71,7 +79,9 @@
                          "-webkit-transform: rotate(", angle,
                          "deg); -moz-transform: rotate(", angle,
                          "deg); -ms-transform: rotate(", angle,
-                         "deg); -o-transform: rotate(", angle, "deg);")
+                         "deg); -o-transform: rotate(", angle,
+                         "deg); transform: rotate(", angle,
+                         "deg);")
   }
 
   if (!is.null(hover_message)) {
@@ -96,7 +106,7 @@
   if (!is.null(background)) {
     background <- latex_color(background)
     x <- paste0("\\cellcolor", background, "{", x, "}")
-    }
+  }
   if (!is.null(align)) x <- paste0("\\multicolumn{1}{", align, "}{", x, "}")
   if (!is.null(angle)) x <- paste0("\\rotatebox{", angle, "}{", x, "}")
   return(x)
diff --git a/R/column_spec.R b/R/column_spec.R
index 647f689..a924439 100644
--- a/R/column_spec.R
+++ b/R/column_spec.R
@@ -178,7 +178,7 @@
   }
 
   if (!is.null(color)) {
-    color <- sprintf("\\\\color{%s}", color)
+    color <- paste0("\\\\color", latex_color(color))
   }
 
   if (!is.null(background)) {
diff --git a/R/row_spec.R b/R/row_spec.R
index a6bdb59..ec8a959 100644
--- a/R/row_spec.R
+++ b/R/row_spec.R
@@ -12,8 +12,8 @@
 #' need to be emphasized.
 #' @param monospace A T/F value to control whether the text of the selected column
 #' need to be monospaced (verbatim)
-#' @param color A character string for row text color. Here please pay
-#' attention to the differences in color codes between HTML and LaTeX.
+#' @param color A character string for row text color. For example, "red" or
+#' "#BBBBBB".
 #' @param background A character string for row background color. Here please
 #' pay attention to the differences in color codes between HTML and LaTeX.
 #' @param align A character string for cell alignment. For HTML, possible values could
@@ -132,6 +132,7 @@
                                    "deg); -moz-transform: rotate(", angle,
                                    "deg); -ms-transform: rotate(", angle,
                                    "deg); -o-transform: rotate(", angle,
+                                   "deg); transform: rotate(", angle,
                                    "deg);")
   }
   return(x)
@@ -175,7 +176,7 @@
 
   if (!is.null(color)) {
     new_row <- lapply(new_row, function(x) {
-      paste0("\\\\textcolor{", color, "}{", x, "}")
+      paste0("\\\\textcolor", latex_color(color), "{", x, "}")
     })
   }
 
diff --git a/R/spec_tools.R b/R/spec_tools.R
index 7708118..03b2539 100644
--- a/R/spec_tools.R
+++ b/R/spec_tools.R
@@ -6,13 +6,37 @@
 #' @export
 spec_color <- function(x, alpha = 1, begin = 0, end = 1,
                        direction = 1, option = "D",
-                       na_color = "#BBBBBBFF") {
+                       na_color = "#BBBBBB") {
   x <- round(rescale(x, c(1, 256)))
   color_code <- viridisLite::viridis(256, alpha, begin, end, direction, option)[x]
   color_code[is.na(color_code)] <- na_color
   return(color_code)
 }
 
+html_color_ <- function(color) {
+  if (substr(color, 1, 1) != "#" | nchar(color) != 9) return(color)
+  rgba_code <- col2rgb(color, alpha = TRUE)
+  rgba_code[4] <- round(rgba_code[4] / 255, 2)
+  return(paste0("rgba(", paste(rgba_code, collapse = ", "), ")"))
+}
+
+html_color <- function(colors) {
+  sapply(colors, html_color_)
+}
+
+latex_color_ <- function(color) {
+  if (substr(color, 1, 1) != "#") {
+    return(paste0("{", color, "}"))
+  } else {
+    color <- sub("#", "", color)
+    if (nchar(color) == 8) color <- substr(color, 1, 6)
+    return(paste0("[HTML]{", color, "}"))
+  }
+}
+latex_color <- function(colors) {
+  sapply(colors, latex_color_)
+}
+
 #' Generate common font size for continuous values
 #'
 #' @param x continuous vectors of values
diff --git a/R/util.R b/R/util.R
index f80c89a..27f7d57 100644
--- a/R/util.R
+++ b/R/util.R
@@ -110,13 +110,3 @@
     "\\usepackage{threeparttable}"
   ))
 }
-
-latex_color <- function(color) {
-  if (substr(color, 1, 1) != "#") {
-    return(paste0("{", color, "}"))
-  } else {
-    color <- sub("#", "", color)
-    if (nchar(color) == 8) color <- substr(color, 1, 6)
-    return(paste0("[HTML]{", color, "}"))
-  }
-}
diff --git a/docs/use_kableExtra_with_formattable.Rmd b/docs/use_kableExtra_with_formattable.Rmd
index 18407b0..d145e31 100644
--- a/docs/use_kableExtra_with_formattable.Rmd
+++ b/docs/use_kableExtra_with_formattable.Rmd
@@ -38,3 +38,16 @@
 Also, if you are using it in this way, make sure you put `escape = F` in `kable`. 
 
 On the other hand, `cell_spec()` is a new function in `kableExtra()` to format cells _**before you pipe the table into `kable`**_. Note that you can either specify format (`html` or `latex`) in function or do that via `options(knitr.table.format)` so you don't need to do it everytime. 
+
+***
+
+I also added a few helper functions to use together with cell_spec. One good example is `spec_color`, which gives you the ability to use viridis color map in your table. Others include `spec_font_size` and `spec_angle`. 
+
+```{r}
+iris[1:10, ] %>%
+  mutate_if(is.numeric, function(x){
+    cell_spec(x, "html", bold = T, color = spec_color(x), font_size = spec_font_size(x))
+  }) %>%
+  kable("html", escape = F, align = "c") %>%
+  kable_styling(full_width = F)
+```
diff --git a/docs/use_kableExtra_with_formattable.html b/docs/use_kableExtra_with_formattable.html
index 31148f0..d0b54d4 100644
--- a/docs/use_kableExtra_with_formattable.html
+++ b/docs/use_kableExtra_with_formattable.html
@@ -11,7 +11,7 @@
 
 <meta name="author" content="Hao Zhu" />
 
-<meta name="date" content="2017-10-11" />
+<meta name="date" content="2017-10-14" />
 
 <title>Use kableExtra with formattable</title>
 
@@ -119,7 +119,7 @@
 
 <h1 class="title toc-ignore">Use kableExtra with formattable</h1>
 <h4 class="author"><em>Hao Zhu</em></h4>
-<h4 class="date"><em>2017-10-11</em></h4>
+<h4 class="date"><em>2017-10-14</em></h4>
 
 </div>
 
@@ -188,16 +188,16 @@
 <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffcc6f">21.0</span>
 </td>
 <td style="text-align:left;">
-<div style=" color: white; border-radius: 4px; padding-right: 2px; background-color: red; text-align: center; -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg);">
+<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg);">
 6
 </div>
 </td>
 <td style="text-align:left;">
-<div style=" font-style: italic; color: green;">
+<div style=" font-style: italic;color: green;">
 160
 </div>
 </td>
-<td style="text-align:left;width: 3cm; ">
+<td style="text-align:left;width: 3cm; display: inline-block; ">
 <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 62.86%">110</span>
 </td>
 </tr>
@@ -209,16 +209,16 @@
 <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffcc6f">21.0</span>
 </td>
 <td style="text-align:left;">
-<div style=" color: white; border-radius: 4px; padding-right: 2px; background-color: red; text-align: center; -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg);">
+<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg);">
 6
 </div>
 </td>
 <td style="text-align:left;">
-<div style=" font-style: italic; color: green;">
+<div style=" font-style: italic;color: green;">
 160
 </div>
 </td>
-<td style="text-align:left;width: 3cm; ">
+<td style="text-align:left;width: 3cm; display: inline-block; ">
 <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 62.86%">110</span>
 </td>
 </tr>
@@ -230,16 +230,16 @@
 <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffa500">22.8</span>
 </td>
 <td style="text-align:left;">
-<div style=" color: white; border-radius: 4px; padding-right: 2px; background-color: red; text-align: center; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg);">
+<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);">
 4
 </div>
 </td>
 <td style="text-align:left;">
-<div style=" font-style: italic; color: green;">
+<div style=" font-style: italic;color: green;">
 108
 </div>
 </td>
-<td style="text-align:left;width: 3cm; ">
+<td style="text-align:left;width: 3cm; display: inline-block; ">
 <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 53.14%">93</span>
 </td>
 </tr>
@@ -251,16 +251,16 @@
 <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffc357">21.4</span>
 </td>
 <td style="text-align:left;">
-<div style=" color: white; border-radius: 4px; padding-right: 2px; background-color: red; text-align: center; -webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -ms-transform: rotate(240deg); -o-transform: rotate(240deg);">
+<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -ms-transform: rotate(240deg); -o-transform: rotate(240deg); transform: rotate(240deg);">
 6
 </div>
 </td>
 <td style="text-align:left;">
-<div style=" font-weight: bold; color: red;">
+<div style=" font-weight: bold;color: red;">
 258
 </div>
 </td>
-<td style="text-align:left;width: 3cm; ">
+<td style="text-align:left;width: 3cm; display: inline-block; ">
 <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 62.86%">110</span>
 </td>
 </tr>
@@ -272,16 +272,16 @@
 <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffffff">18.7</span>
 </td>
 <td style="text-align:left;">
-<div style=" color: white; border-radius: 4px; padding-right: 2px; background-color: red; text-align: center; -webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -ms-transform: rotate(300deg); -o-transform: rotate(300deg);">
+<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -ms-transform: rotate(300deg); -o-transform: rotate(300deg); transform: rotate(300deg);">
 8
 </div>
 </td>
 <td style="text-align:left;">
-<div style=" font-weight: bold; color: red;">
+<div style=" font-weight: bold;color: red;">
 360
 </div>
 </td>
-<td style="text-align:left;width: 3cm; ">
+<td style="text-align:left;width: 3cm; display: inline-block; ">
 <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 100.00%">175</span>
 </td>
 </tr>
@@ -290,6 +290,287 @@
 <p>Here is a little bit more explanation. Both <code>formattable::color_tile</code> and <code>formattable::color_bar</code> returns a function object which can take a numeric vector. That’s why you can put things like <code>(mpg)</code> after <code>color_tile(&quot;white&quot;, &quot;orange&quot;)</code> as you can see in the <code>mutate</code> function. This way of using the function may look a little odd but is totally valid (, I think :P).</p>
 <p>Also, if you are using it in this way, make sure you put <code>escape = F</code> in <code>kable</code>.</p>
 <p>On the other hand, <code>cell_spec()</code> is a new function in <code>kableExtra()</code> to format cells <em><strong>before you pipe the table into <code>kable</code></strong></em>. Note that you can either specify format (<code>html</code> or <code>latex</code>) in function or do that via <code>options(knitr.table.format)</code> so you don’t need to do it everytime.</p>
+<hr />
+<p>I also added a few helper functions to use together with cell_spec. One good example is <code>spec_color</code>, which gives you the ability to use viridis color map in your table. Others include <code>spec_font_size</code> and <code>spec_angle</code>.</p>
+<pre class="r"><code>iris[1:10, ] %&gt;%
+  mutate_if(is.numeric, function(x){
+    cell_spec(x, &quot;html&quot;, bold = T, color = spec_color(x), font_size = spec_font_size(x))
+  }) %&gt;%
+  kable(&quot;html&quot;, escape = F, align = &quot;c&quot;) %&gt;%
+  kable_styling(full_width = F)</code></pre>
+<table class="table" style="width: auto !important; margin-left: auto; margin-right: auto;">
+<thead>
+<tr>
+<th style="text-align:center;">
+Sepal.Length
+</th>
+<th style="text-align:center;">
+Sepal.Width
+</th>
+<th style="text-align:center;">
+Petal.Length
+</th>
+<th style="text-align:center;">
+Petal.Width
+</th>
+<th style="text-align:center;">
+Species
+</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(66, 190, 113, 1);font-size: 17px;">
+5.1
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(34, 168, 132, 1);font-size: 16px;">
+3.5
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);font-size: 12px;">
+1.4
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 13px;">
+0.2
+</div>
+</td>
+<td style="text-align:center;">
+setosa
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 15px;">
+4.9
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(72, 37, 118, 1);font-size: 11px;">
+3
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);font-size: 12px;">
+1.4
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 13px;">
+0.2
+</div>
+</td>
+<td style="text-align:center;">
+setosa
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(53, 95, 141, 1);font-size: 13px;">
+4.7
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(52, 96, 141, 1);font-size: 13px;">
+3.2
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(68, 1, 84, 1);font-size: 10px;">
+1.3
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 13px;">
+0.2
+</div>
+</td>
+<td style="text-align:center;">
+setosa
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(65, 68, 135, 1);font-size: 12px;">
+4.6
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(65, 68, 135, 1);font-size: 12px;">
+3.1
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 15px;">
+1.5
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 13px;">
+0.2
+</div>
+</td>
+<td style="text-align:center;">
+setosa
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(34, 168, 132, 1);font-size: 16px;">
+5
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(68, 191, 112, 1);font-size: 17px;">
+3.6
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);font-size: 12px;">
+1.4
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 13px;">
+0.2
+</div>
+</td>
+<td style="text-align:center;">
+setosa
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(253, 231, 37, 1);font-size: 20px;">
+5.4
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(253, 231, 37, 1);font-size: 20px;">
+3.9
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(253, 231, 37, 1);font-size: 20px;">
+1.7
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(253, 231, 37, 1);font-size: 20px;">
+0.4
+</div>
+</td>
+<td style="text-align:center;">
+setosa
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(65, 68, 135, 1);font-size: 12px;">
+4.6
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 15px;">
+3.4
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);font-size: 12px;">
+1.4
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(53, 183, 121, 1);font-size: 17px;">
+0.3
+</div>
+</td>
+<td style="text-align:center;">
+setosa
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(34, 168, 132, 1);font-size: 16px;">
+5
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 15px;">
+3.4
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 15px;">
+1.5
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 13px;">
+0.2
+</div>
+</td>
+<td style="text-align:center;">
+setosa
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(68, 1, 84, 1);font-size: 10px;">
+4.4
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(68, 1, 84, 1);font-size: 10px;">
+2.9
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);font-size: 12px;">
+1.4
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 13px;">
+0.2
+</div>
+</td>
+<td style="text-align:center;">
+setosa
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 15px;">
+4.9
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(65, 68, 135, 1);font-size: 12px;">
+3.1
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 15px;">
+1.5
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(68, 1, 84, 1);font-size: 10px;">
+0.1
+</div>
+</td>
+<td style="text-align:center;">
+setosa
+</td>
+</tr>
+</tbody>
+</table>
 
 
 
diff --git a/man/cell_spec.Rd b/man/cell_spec.Rd
index cf6e298..291a18a 100644
--- a/man/cell_spec.Rd
+++ b/man/cell_spec.Rd
@@ -6,7 +6,7 @@
 \usage{
 cell_spec(x, format, bold = F, italic = F, monospace = F, color = NULL,
   background = NULL, align = NULL, font_size = NULL, angle = NULL,
-  hover_message = NULL)
+  hover_message = NULL, background_as_tile = TRUE)
 }
 \arguments{
 \item{x}{Things to be formated. It could be a vector of numbers or strings.}
@@ -40,6 +40,9 @@
 
 \item{hover_message}{A vector of strings to be displayed as hover message.
 Of course, this feature is nly available in HTML.}
+
+\item{background_as_tile}{T/F value indicating if you want to have round
+cornered tile as background.}
 }
 \description{
 Specify Cell format before it gets into kable
diff --git a/man/row_spec.Rd b/man/row_spec.Rd
index 3b1e24a..ef7712c 100644
--- a/man/row_spec.Rd
+++ b/man/row_spec.Rd
@@ -23,8 +23,8 @@
 \item{monospace}{A T/F value to control whether the text of the selected column
 need to be monospaced (verbatim)}
 
-\item{color}{A character string for row text color. Here please pay
-attention to the differences in color codes between HTML and LaTeX.}
+\item{color}{A character string for row text color. For example, "red" or
+"#BBBBBB".}
 
 \item{background}{A character string for row background color. Here please
 pay attention to the differences in color codes between HTML and LaTeX.}
diff --git a/man/spec_color.Rd b/man/spec_color.Rd
index 5a106f2..ab25980 100644
--- a/man/spec_color.Rd
+++ b/man/spec_color.Rd
@@ -5,7 +5,7 @@
 \title{Generate viridis Color code for continuous values}
 \usage{
 spec_color(x, alpha = 1, begin = 0, end = 1, direction = 1,
-  option = "D", na_color = "#FFBBBBBB")
+  option = "D", na_color = "#BBBBBB")
 }
 \arguments{
 \item{x}{continuous vectors of values}
diff --git a/tests/visual_tests/cell_spec_html.Rmd b/tests/visual_tests/cell_spec_html.Rmd
index 4e90de3..fb645ad 100644
--- a/tests/visual_tests/cell_spec_html.Rmd
+++ b/tests/visual_tests/cell_spec_html.Rmd
@@ -22,3 +22,16 @@
   kable("html", escape = F) %>%
   kable_styling("condensed", full_width = F)
 ```
+
+```{r}
+iris[, 1:4] %>%
+  mutate_all(function(x){
+    cell_spec(x, "html", 
+              color = spec_color(x, option = "A"), 
+              font_size = spec_font_size(x),
+              bold = T)
+    }) %>%
+  kable("html", escape = F, booktabs = T, linesep = "", align = "c")%>%
+  row_spec(0, angle = 270, align = "right") %>%
+  kable_styling(full_width = F) 
+```
diff --git a/tests/visual_tests/cell_spec_pdf.Rmd b/tests/visual_tests/cell_spec_pdf.Rmd
index 3134ef9..3368501 100644
--- a/tests/visual_tests/cell_spec_pdf.Rmd
+++ b/tests/visual_tests/cell_spec_pdf.Rmd
@@ -12,14 +12,12 @@
 ```
 
 ```{r}
-mtcars[1:25, 1:5] %>%
-  mutate(
-    mpg = ifelse(mpg > 21, 
-                 cell_spec(mpg, "latex", color = "green", bold = T),
-                 cell_spec(mpg, "latex", color = "red", italic = T)),
-    disp = cell_spec(disp, "latex", background = spec_color(disp), 
-                     color = "white", bold = T)
-  ) %>%
-  kable("latex", escape = F, booktabs = T) %>%
-  row_spec(0, angle = 90)
+iris[1:10, 1:4] %>%
+  mutate_all(function(x){
+    cell_spec(x, "latex", 
+              background = spec_color(x), 
+              font_size = spec_font_size(x),
+              color = "white", bold = T)
+    }) %>%
+  kable("latex", escape = F, booktabs = T, linesep = "", align = "c") 
 ```