<div class="color color-50">50</div>
<div class="color color-100">100</div>
<div class="color color-200">200</div>
<div class="color color-300">300</div>
<div class="color color-400">400</div>
<div class="color color-500">500</div>
<div class="color color-600">600</div>
<div class="color color-700">700</div>
<div class="color color-800">800</div>
<div class="color color-900">900</div>
<div class="color color-A100">A100</div>
<div class="color color-A200">A200</div>
<div class="color color-A400">A400</div>
<div class="color color-A700">A700</div>
$values: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700);
@function createPalette($color) {
$white: #fff;
$black: #000;
$baseDark: multiply($color, $color);
$palette: (
50: mix($color, $white, 12%),
100: mix($color, $white, 30%),
200: mix($color, $white, 50%),
300: mix($color, $white, 70%),
400: mix($color, $white, 85%),
500: mix($color, $white, 100%),
600: mix($color, $baseDark, 87%),
700: mix($color, $baseDark, 70%),
800: mix($color, $baseDark, 54%),
900: mix($color, $baseDark, 25%),
A100: lighten(saturate(mix($black, $baseDark, 15%), 80%), 65%),
A200: lighten(saturate(mix($black, $baseDark, 15%), 80%), 55%),
A400: lighten(saturate(mix($black, $baseDark, 15%), 100%), 45%),
A700: lighten(saturate(mix($black, $baseDark, 15%), 100%), 40%),
);
/* 生成對比色,這裡用使用在文字上 */
$contrast: ();
@each $v in $values {
$contrast: map-merge(
$contrast,
(
$v: getContrast(map-get($palette, $v)),
)
);
}
/* 將色系與對比系結組合 */
$palette: map-merge(
$palette,
(
contrast: $contrast,
)
);
@return $palette;
}
@function multiply($rgb1, $rgb2) {
$r: floor(red($rgb1) * red($rgb2) / 255);
$g: floor(green($rgb1) * green($rgb2) / 255);
$b: floor(blue($rgb1) * blue($rgb2) / 255);
@return rgb($r, $g, $b);
}
@function getBrightness($color) {
@return (red($color) * 299 + green($color) * 587 + blue($color) * 114) / 1000;
}
@function isLight($color) {
@return getBrightness($color) >= 128;
}
@function getContrast($color) {
@if isLight($color) {
@return #000;
} @else {
@return #fff;
}
}
/************************/
$primary-color: #0087dc;
$primary-palette: createPalette($primary-color);
@each $key, $val in $primary-palette {
@if $key != contrast {
.color-#{$key} {
background: #{$val};
color: map-get($primary-palette, contrast, $key);
&::after {
content: "#{$val}";
display: inline-block;
margin-left: 8px;
}
}
}
}
body, html {
font-family: 'Arial';
}
.color {
width: 300px;
line-height: 50px;
text-align: center;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.