Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<ul class="sg-colors">
<li class="sg-color"></li>
<li class="sg-color"></li>
<li class="sg-color"></li>
<li class="sg-color"></li>
<li class="sg-color"></li>
<li class="sg-color"></li>
<li class="sg-color"></li>
<li class="sg-color"></li>
<li class="sg-color"></li>
<li class="sg-color"></li>
<li class="sg-color"></li>
<li class="sg-color"></li>
<li class="sg-color"></li>
<li class="sg-color"></li>
<li class="sg-color"></li>
<li class="sg-color"></li>
</ul>
// ----
// libsass (v3.2.5)
// ----
// Color Toolkit
// =============
// Colors
// ------
@mixin colors(
$map
) {
$colors: map-merge($colors, $map) !global;
}
// Color
// -----
@function color($color) {
// Parse arguments
$color: map-get($colors, $color) or $color;
$base: nth($color, 1);
$adjust: if(length($color) > 1, nth($color, 2), ());
// Recursive check
$color: if(map-has-key($colors, $base), color($base), $base);
// Adjustments
@each $function, $value in $adjust {
@if function-exists($function) {
$color: call($function, $color, $value);
} @else {
@warn "#{$function} is not a valid color function.";
}
}
@return $color;
}
// Tint
// ----
@function tint(
$color,
$percentage
) {
$color: color($color);
@return mix(#fff, $color, $percentage);
}
// Shade
// -----
@function shade(
$color,
$percentage
) {
$color: color($color);
@return mix(#000, $color, $percentage);
}
// Brightness
// ----------
@function brightness(
$color
) {
$color: color($color);
$_red: red($color) * .299;
$_green: green($color) * .587;
$_blue: blue($color) * .114;
@return ($_red + $_green + $_blue) / 255 * 100%;
}
// Contrast
// --------
@function contrast(
$color,
$dark: contrast-dark,
$light: contrast-light
) {
$color: color($color);
$dark: color($dark);
$light: color($light);
@if not(type-of($dark) == color) {
$dark: #000;
}
@if not(type-of($light) == color) {
$light: #fff;
}
$_color-brightness: brightness($color);
$_dark-text-brightness: brightness($dark);
$_light-text-brightness: brightness($light);
$_light-contrast: abs($_color-brightness - $_light-text-brightness);
$_dark-contrast: abs($_color-brightness - $_dark-text-brightness);
@return if($_light-contrast > $_dark-contrast, $light, $dark);
}
// Contrasted
// ----------
@mixin contrasted(
$background,
$dark: contrast-dark,
$light: contrast-light
) {
$background: color($background);
background-color: $background;
color: contrast($background, $dark, $light);
}
$colors: (
'gray': rgb(92, 102, 111),
'dark': 'gray' ('shade': 60%),
'light': 'gray' ('tint': 85%),
'white': #fff,
'red': rgb(207, 10, 44),
'green': #008000,
'primary': 'red',
'background': 'white',
'text': 'dark',
'action': 'primary',
'focus': 'action' ('shade': 20%),
'go': 'green',
'contrast-dark': 'dark',
'contrast-light': 'white',
);
.sg-colors {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 2rem;
}
.sg-color {
border: 1px solid color('background');
flex: 1 1 14rem;
padding: 2rem;
@for $i from 1 through length($colors) {
$color: nth(map-keys($colors), $i);
&:nth-child(#{$i}) {
background: color($color);
color: contrast($color);
&:after {
content: $color ': #{color($color)}';
}
}
}
}
.sg-colors {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 2rem;
}
.sg-color {
border: 1px solid #fff;
flex: 1 1 14rem;
padding: 2rem;
}
.sg-color:nth-child(1) {
background: #5c666f;
color: #fff;
}
.sg-color:nth-child(1):after {
content: "gray" ": #5c666f";
}
.sg-color:nth-child(2) {
background: #25292c;
color: #fff;
}
.sg-color:nth-child(2):after {
content: "dark" ": #25292c";
}
.sg-color:nth-child(3) {
background: #e7e8e9;
color: #25292c;
}
.sg-color:nth-child(3):after {
content: "light" ": #e7e8e9";
}
.sg-color:nth-child(4) {
background: #fff;
color: #25292c;
}
.sg-color:nth-child(4):after {
content: "white" ": #fff";
}
.sg-color:nth-child(5) {
background: #cf0a2c;
color: #fff;
}
.sg-color:nth-child(5):after {
content: "red" ": #cf0a2c";
}
.sg-color:nth-child(6) {
background: #008000;
color: #fff;
}
.sg-color:nth-child(6):after {
content: "green" ": #008000";
}
.sg-color:nth-child(7) {
background: #cf0a2c;
color: #fff;
}
.sg-color:nth-child(7):after {
content: "primary" ": #cf0a2c";
}
.sg-color:nth-child(8) {
background: #fff;
color: #25292c;
}
.sg-color:nth-child(8):after {
content: "background" ": #fff";
}
.sg-color:nth-child(9) {
background: #25292c;
color: #fff;
}
.sg-color:nth-child(9):after {
content: "text" ": #25292c";
}
.sg-color:nth-child(10) {
background: #cf0a2c;
color: #fff;
}
.sg-color:nth-child(10):after {
content: "action" ": #cf0a2c";
}
.sg-color:nth-child(11) {
background: #a60823;
color: #fff;
}
.sg-color:nth-child(11):after {
content: "focus" ": #a60823";
}
.sg-color:nth-child(12) {
background: #008000;
color: #fff;
}
.sg-color:nth-child(12):after {
content: "go" ": #008000";
}
.sg-color:nth-child(13) {
background: #25292c;
color: #fff;
}
.sg-color:nth-child(13):after {
content: "contrast-dark" ": #25292c";
}
.sg-color:nth-child(14) {
background: #fff;
color: #25292c;
}
.sg-color:nth-child(14):after {
content: "contrast-light" ": #fff";
}
<ul class="sg-colors">
<li class="sg-color"></li>
<li class="sg-color"></li>
<li class="sg-color"></li>
<li class="sg-color"></li>
<li class="sg-color"></li>
<li class="sg-color"></li>
<li class="sg-color"></li>
<li class="sg-color"></li>
<li class="sg-color"></li>
<li class="sg-color"></li>
<li class="sg-color"></li>
<li class="sg-color"></li>
<li class="sg-color"></li>
<li class="sg-color"></li>
<li class="sg-color"></li>
<li class="sg-color"></li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.