Index: color-patterns.php
===================================================================
--- color-patterns.php	(revision 38903)
+++ color-patterns.php	(working copy)
@@ -11,7 +11,7 @@
  * Generate the CSS for the current custom color scheme.
  */
 function twentyseventeen_custom_colors_css() {
-	$hue = get_theme_mod( 'colorscheme_hue', 250 );
+	$hue = absint( get_theme_mod( 'colorscheme_hue', 250 ) );
 
 	/**
 	 * Filter Twenty Seventeen default saturation level.
@@ -20,7 +20,7 @@
 	 *
 	 * @param $saturation integer
 	 */
-	$saturation = apply_filters( 'twentyseventeen_custom_colors_saturation', 50 );
+	$saturation = absint( apply_filters( 'twentyseventeen_custom_colors_saturation', 50 ) );
 	$reduced_saturation = ( .8 * $saturation ) . '%';
 	$saturation = $saturation . '%';
 	$css = '
@@ -82,7 +82,7 @@
 .colors-custom .widget .widget-title a:hover,
 .colors-custom .widget ul li a:focus,
 .colors-custom .widget ul li a:hover {
-	color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 0% ); /* base: #000; */
+	color: hsl( ' . $hue . ', ' . $saturation . ', 0% ); /* base: #000; */
 }
 
 .colors-custom .entry-content a,
@@ -91,8 +91,8 @@
 .colors-custom .site-footer .widget-area a,
 .colors-custom .posts-navigation a,
 .colors-custom .widget_authors a strong {
-	-webkit-box-shadow: inset 0 -1px 0 hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 6% ); /* base: rgba(15, 15, 15, 1); */
-	box-shadow: inset 0 -1px 0 hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 6% ); /* base: rgba(15, 15, 15, 1); */
+	-webkit-box-shadow: inset 0 -1px 0 hsl( ' . $hue . ', ' . $saturation  . ', 6% ); /* base: rgba(15, 15, 15, 1); */
+	box-shadow: inset 0 -1px 0 hsl( ' . $hue . ', ' . $saturation . ', 6% ); /* base: rgba(15, 15, 15, 1); */
 }
 
 .colors-custom button,
@@ -99,7 +99,7 @@
 .colors-custom input[type="button"],
 .colors-custom input[type="submit"],
 .colors-custom .entry-footer .edit-link a.post-edit-link {
-	background-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 13% ); /* base: #222; */
+	background-color: hsl( ' . $hue . ', ' . $saturation . ', 13% ); /* base: #222; */
 }
 
 .colors-custom input[type="text"]:focus,
@@ -141,7 +141,7 @@
 .colors-custom .post-navigation a:hover .icon,
 .colors-custom .site-content .site-content-light,
 .colors-custom .twentyseventeen-panel .recent-posts .entry-header .edit-link {
-	color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 13% ); /* base: #222; */
+	color: hsl( ' . $hue . ', ' . $saturation . ', 13% ); /* base: #222; */
 }
 
 .colors-custom .entry-content a:focus,
@@ -196,8 +196,8 @@
 .colors-custom .widget .widget-title a:hover,
 .colors-custom .widget ul li a:focus,
 .colors-custom .widget ul li a:hover {
-	-webkit-box-shadow: inset 0 0 0 hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 13% ), 0 3px 0 hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 13% );
-	box-shadow: inset 0 0 0 hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 13% ), 0 3px 0 hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 13% );
+	-webkit-box-shadow: inset 0 0 0 hsl( ' . $hue . ', ' . $saturation . ', 13% ), 0 3px 0 hsl( ' . $hue . ', ' . $saturation . ', 13% );
+	box-shadow: inset 0 0 0 hsl( ' . $hue . ', ' . $saturation. ' , 13% ), 0 3px 0 hsl( ' . $hue . ', ' . $saturation . ', 13% );
 }
 
 body.colors-custom,
@@ -217,12 +217,12 @@
 .colors-custom .nav-title,
 .colors-custom .comment-body,
 .colors-custom .site-content .wp-playlist-light .wp-playlist-current-item .wp-playlist-item-album {
-	color: hsl( ' . esc_attr( $hue ) . ', ' . $reduced_saturation . ', 20% ); /* base: #333; */
+	color: hsl( ' . $hue . ', ' . $reduced_saturation . ', 20% ); /* base: #333; */
 }
 
 .colors-custom .social-navigation a:hover,
 .colors-custom .social-navigation a:focus {
-	background: hsl( ' . esc_attr( $hue ) . ', ' . $reduced_saturation . ', 20% ); /* base: #333; */
+	background: hsl( ' . $hue . ', ' . $reduced_saturation . ', 20% ); /* base: #333; */
 }
 
 .colors-custom input[type="text"]:focus,
@@ -242,7 +242,7 @@
 .colors-custom input[type="color"]:focus,
 .colors-custom textarea:focus,
 .bypostauthor > .comment-body > .comment-meta > .comment-author .avatar {
-	border-color: hsl( ' . esc_attr( $hue ) . ', ' . $reduced_saturation . ', 20% ); /* base: #333; */
+	border-color: hsl( ' . $hue . ', ' . $reduced_saturation . ', 20% ); /* base: #333; */
 }
 
 .colors-custom h2,
@@ -270,12 +270,12 @@
 .colors-custom .site-info a,
 .colors-custom .wp-caption,
 .colors-custom .gallery-caption {
-	color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 40% ); /* base: #666; */
+	color: hsl( ' . $hue . ', ' . $saturation . ', 40% ); /* base: #666; */
 }
 
 .colors-custom abbr,
 .colors-custom acronym {
-	border-bottom-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 40% ); /* base: #666; */
+	border-bottom-color: hsl( ' . $hue . ', ' . $saturation . ', 40% ); /* base: #666; */
 }
 
 .colors-custom h5,
@@ -295,7 +295,7 @@
 .colors-custom .navigation-top .current_page_item > a,
 .colors-custom .main-navigation a:hover,
 .colors-custom .site-content .wp-playlist-light .wp-playlist-current-item .wp-playlist-item-artist {
-	color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 46% ); /* base: #767676; */
+	color: hsl( ' . $hue . ', ' . $saturation . ', 46% ); /* base: #767676; */
 }
 
 .colors-custom button:hover,
@@ -313,7 +313,7 @@
 .colors-custom .next.page-numbers:hover,
 .colors-custom .site-content .wp-playlist-light .wp-playlist-item:hover,
 .colors-custom .site-content .wp-playlist-light .wp-playlist-item:focus {
-	background: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 46% ); /* base: #767676; */
+	background: hsl( ' . $hue . ', ' . $saturation . ', 46% ); /* base: #767676; */
 }
 
 .colors-custom button.secondary:hover,
@@ -327,7 +327,7 @@
 .colors-custom input[type="submit"].secondary:hover,
 .colors-custom input[type="submit"].secondary:focus,
 .colors-custom hr {
-	background: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 73% ); /* base: #bbb; */
+	background: hsl( ' . $hue . ', ' . $saturation . ', 73% ); /* base: #bbb; */
 }
 
 .colors-custom input[type="text"],
@@ -354,16 +354,16 @@
 .colors-custom .widget.widget_tag_cloud a:focus,
 .colors-custom .wp_widget_tag_cloud a:hover,
 .colors-custom .wp_widget_tag_cloud a:focus {
-	border-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 73% ); /* base: #bbb; */
+	border-color: hsl( ' . $hue . ', ' . $saturation . ', 73% ); /* base: #bbb; */
 }
 
 .colors-custom thead th {
-	border-bottom-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 73% ); /* base: #bbb; */
+	border-bottom-color: hsl( ' . $hue . ', ' . $saturation . ', 73% ); /* base: #bbb; */
 }
 
 .colors-custom .entry-footer .cat-links .icon,
 .colors-custom .entry-footer .tags-links .icon {
-	color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 73% ); /* base: #bbb; */
+	color: hsl( ' . $hue . ', ' . $saturation . ', 73% ); /* base: #bbb; */
 }
 
 .colors-custom button.secondary,
@@ -373,28 +373,28 @@
 .colors-custom input[type="submit"].secondary,
 .colors-custom .prev.page-numbers,
 .colors-custom .next.page-numbers {
-	background-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 87% ); /* base: #ddd; */
+	background-color: hsl( ' . $hue . ', ' . $saturation . ', 87% ); /* base: #ddd; */
 }
 
 .colors-custom .widget .tagcloud a,
 .colors-custom .widget.widget_tag_cloud a,
 .colors-custom .wp_widget_tag_cloud a {
-	border-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 87% ); /* base: #ddd; */
+	border-color: hsl( ' . $hue . ', ' . $saturation . ', 87% ); /* base: #ddd; */
 }
 
 .colors-custom.twentyseventeen-front-page article:not(.has-post-thumbnail):not(:first-child),
 .colors-custom .widget ul li {
-	border-top-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 87% ); /* base: #ddd; */
+	border-top-color: hsl( ' . $hue . ', ' . $saturation . ', 87% ); /* base: #ddd; */
 }
 
 .colors-custom .widget ul li {
-	border-bottom-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 87% ); /* base: #ddd; */
+	border-bottom-color: hsl( ' . $hue . ', ' . $saturation . ', 87% ); /* base: #ddd; */
 }
 
 .colors-custom pre,
 .colors-custom mark,
 .colors-custom ins {
-	background: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 93% ); /* base: #eee; */
+	background: hsl( ' . $hue . ', ' . $saturation . ', 93% ); /* base: #eee; */
 }
 
 .colors-custom .navigation-top,
@@ -403,7 +403,7 @@
 .colors-custom .comments-pagination,
 .colors-custom .entry-footer,
 .colors-custom .site-footer {
-	border-top-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 93% ); /* base: #eee; */
+	border-top-color: hsl( ' . $hue . ', ' . $saturation . ', 93% ); /* base: #eee; */
 }
 
 .colors-custom .navigation-top,
@@ -412,16 +412,16 @@
 .colors-custom .single-featured-image-header,
 .colors-custom .site-content .wp-playlist-light .wp-playlist-item,
 .colors-custom tr {
-	border-bottom-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 93% ); /* base: #eee; */
+	border-bottom-color: hsl( ' . $hue . ', ' . $saturation . ', 93% ); /* base: #eee; */
 }
 
 .colors-custom .site-content .wp-playlist-light {
-	border-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 93% ); /* base: #eee; */
+	border-color: hsl( ' . $hue . ', ' . $saturation . ', 93% ); /* base: #eee; */
 }
 
 .colors-custom .site-header,
 .colors-custom .single-featured-image-header {
-	background-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 98% ); /* base: #fafafa; */
+	background-color: hsl( ' . $hue . ', ' . $saturation . ', 98% ); /* base: #fafafa; */
 }
 
 .colors-custom button,
@@ -441,19 +441,19 @@
 .colors-custom.has-header-image .site-title,
 .colors-custom.has-header-image .site-title a,
 .colors-custom.has-header-image .site-description {
-	color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 100% ); /* base: #fff; */
+	color: hsl( ' . $hue . ', ' . $saturation . ', 100% ); /* base: #fff; */
 }
 
 body.colors-custom,
 .colors-custom .navigation-top,
 .colors-custom .main-navigation ul {
-	background: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 100% ); /* base: #fff; */
+	background: hsl( ' . $hue . ', ' . $saturation . ', 100% ); /* base: #fff; */
 }
 
 .colors-custom .widget ul li a,
 .colors-custom .site-footer .widget-area ul li a {
-	-webkit-box-shadow: inset 0 -1px 0 hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 100% ); /* base: rgba(255, 255, 255, 1); */
-	box-shadow: inset 0 -1px 0 hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 100% );  /* base: rgba(255, 255, 255, 1); */
+	-webkit-box-shadow: inset 0 -1px 0 hsl( ' . $hue . ', ' . $saturation . ', 100% ); /* base: rgba(255, 255, 255, 1); */
+	box-shadow: inset 0 -1px 0 hsl( ' . $hue . ', ' . $saturation . ', 100% );  /* base: rgba(255, 255, 255, 1); */
 }
 
 .colors-custom .menu-toggle,
@@ -513,35 +513,35 @@
 
 	.colors-custom .nav-links .nav-previous .nav-title .icon,
 	.colors-custom .nav-links .nav-next .nav-title .icon {
-		color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 20% ); /* base: #222; */
+		color: hsl( ' . $hue . ', ' . $saturation . ', 20% ); /* base: #222; */
 	}
 
 	.colors-custom .main-navigation li li:hover,
 	.colors-custom .main-navigation li li.focus {
-		background: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 46% ); /* base: #767676; */
+		background: hsl( ' . $hue . ', ' . $saturation . ', 46% ); /* base: #767676; */
 	}
 
 	.colors-custom .navigation-top .menu-scroll-down {
-		color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 46% ); /* base: #767676; */;
+		color: hsl( ' . $hue . ', ' . $saturation . ', 46% ); /* base: #767676; */;
 	}
 
 	.colors-custom abbr[title] {
-		border-bottom-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 46% ); /* base: #767676; */;
+		border-bottom-color: hsl( ' . $hue . ', ' . $saturation . ', 46% ); /* base: #767676; */;
 	}
 
 	.colors-custom .main-navigation ul ul {
-		border-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 73% ); /* base: #bbb; */
-		background: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 100% ); /* base: #fff; */
+		border-color: hsl( ' . $hue . ', ' . $saturation . ', 73% ); /* base: #bbb; */
+		background: hsl( ' . $hue . ', ' . $saturation . ', 100% ); /* base: #fff; */
 	}
 
 	.colors-custom .main-navigation ul li.menu-item-has-children:before,
 	.colors-custom .main-navigation ul li.page_item_has_children:before {
-		border-bottom-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 73% ); /* base: #bbb; */
+		border-bottom-color: hsl( ' . $hue . ', ' . $saturation . ', 73% ); /* base: #bbb; */
 	}
 
 	.colors-custom .main-navigation ul li.menu-item-has-children:after,
 	.colors-custom .main-navigation ul li.page_item_has_children:after {
-		border-bottom-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 100% ); /* base: #fff; */
+		border-bottom-color: hsl( ' . $hue . ', ' . $saturation . ', 100% ); /* base: #fff; */
 	}
 
 	.colors-custom .main-navigation li li.focus > a,
@@ -553,7 +553,7 @@
 	.colors-custom .main-navigation li li.current-menu-item a:hover,
 	.colors-custom .main-navigation li li.current_page_item a:focus,
 	.colors-custom .main-navigation li li.current-menu-item a:focus {
-		color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 100% ); /* base: #fff; */
+		color: hsl( ' . $hue . ', ' . $saturation . ', 100% ); /* base: #fff; */
 	}
 }';