Skip to content

Instantly share code, notes, and snippets.

@postpostmodern
Created June 15, 2016 21:52
Show Gist options
  • Save postpostmodern/5bfe67b8d18cc61c362c1e6e62f9922a to your computer and use it in GitHub Desktop.
Save postpostmodern/5bfe67b8d18cc61c362c1e6e62f9922a to your computer and use it in GitHub Desktop.
Color Guide: Visualize all of the colors for your site.
$colors: (
white: white,
gray1: rgb(238, 240, 242),
gray2: rgb(187, 196, 201),
gray3: rgb(162, 168, 172),
gray4: rgb(110, 116, 120),
accent: red
);
@function c($key) {
@if map-has-key($colors, $key) {
@return map-get($colors, $key);
}
@error "Unknown color: #{$key}";
@return null;
}
<!doctype html>
<html>
<head>
<title>Color Guide</title>
<link rel="stylesheet" href="colorguide.css">
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
/*
colorguide.scss
The following will produce the CSS necessary
to visualize your site's colors.
*/
// Import your _colors.scss file here:
@import "colors";
@function contrastingColor($color) {
@if lightness($color) > 60% {
@return black;
}
@else {
@return white;
}
}
body, ul, li {
margin: 0;
padding: 0;
font: normal 16px 'Source Code Pro', monospace;
}
ul {
list-style: none;
}
li {
padding: 0.5em 2em;
$idx: 1;
@each $name, $color in $colors {
&:nth-child(#{$idx}) {
background: $color;
color: contrastingColor($color);
&:before {
content: "#{$name}";
}
}
$idx: $idx + 1;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment