Skip to content

Instantly share code, notes, and snippets.

@andi1984
Forked from anonymous/index.html
Last active August 29, 2015 14:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save andi1984/b7e8b1c6e1ec7883f3da to your computer and use it in GitHub Desktop.
Save andi1984/b7e8b1c6e1ec7883f3da to your computer and use it in GitHub Desktop.
@import "compass/css3";
@function relativeLuminance($color) {
@return 0.2126 * red($color)/255.0 +
0.7152 * green($color)/255.0 +
0.0722 * blue($color)/255.0;
}
@function contrast($color1,$color2) {
$luminance1: relativeLuminance($color1);
$luminance2: relativeLuminance($color2);
$ratio: ($luminance1 + 0.05)/($luminance2 + 0.05);
@if ($ratio < 1) {
@return 1/$ratio;
} @else {
@return $ratio;
}
}
// Add percentage of white to a color
@function tint($color, $percent){
@return mix(white, $color, $percent);
}
// Add percentage of black to a color
@function shade($color, $percent){
@return mix(black, $color, $percent);
}
@function guessGoodColor($color) {
$newColor: $color;
$oldContrast: 0.0;
@if relativeLuminance($color) > 0.5 {
@for $i from 0 to 100 {
$paletteColor: shade($color, percentage($i/100));
@if (contrast($color, $paletteColor) > 2.0
and contrast($color, $paletteColor) > $oldContrast
and contrast($color, $paletteColor) < 5.5) {
$newColor: $paletteColor;
$oldContrast: contrast($color, $paletteColor);
}
}
} @else {
@for $i from 0 to 100 {
$paletteColor: tint($color, percentage($i/100));
@if (contrast($color, $paletteColor) > 2.0
and contrast($color, $paletteColor) > $oldContrast
and contrast($color, $paletteColor) < 5.5) {
$newColor: $paletteColor;
$oldContrast: contrast($color, $paletteColor);
}
}
}
@return $newColor;
}
@mixin goodCombi($bgColor){
$text-color: guessGoodColor($bgColor);
background-color: $bgColor;
color: $text-color;
}
body {
@include goodCombi(red);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment