_color.scss

// Grayscale
$color-black: hsl(0, 0%, 0%); // #000000
$color-white: hsl(0, 0%, 100%); // #FFFFFF

$color-gray-50: hsl(0, 0%, 98%); // #FAFAFA, rgb(250, 250, 250)
$color-gray-100: hsl(0, 0%, 96%); // #F5F5F5, rgb(245, 245, 245)
$color-gray-200: hsl(0, 0%, 93%); // #EEEEEE, rgb(238, 238, 238)
$color-gray-300: hsl(0, 0%, 88%); // #E0E0E0, rgb(224, 224, 224)
$color-gray-400: hsl(0, 0%, 74%); // #BDBDBD, rgb(189, 189, 189)
$color-gray-500: hsl(0, 0%, 62%); // #9E9E9E, rgb(158, 158, 158)
$color-gray-600: hsl(0, 0%, 46%); // #757575, rgb(117, 117, 117)
$color-gray-700: hsl(0, 0%, 38%); // #616161, rgb(97, 97, 97)
$color-gray-800: hsl(0, 0%, 26%); // #424242, rgb(66, 66, 66)
$color-gray-900: hsl(0, 0%, 13%); // #212121, rgb(33, 33, 33)

// Dark text on light backgrounds
$color-dark-text-primary: $color-grey-900;
$color-dark-text-secondary: $color-grey-600;
$color-dark-text-disabled: $color-grey-500;
$color-dark-divider: $color-grey-300;

// White text on dark backgrounds
$color-light-text-primary: $color-white;
$color-light-text-secondary: hsl(0, 0%, 70%);
$color-light-text-disabled: hsl(0, 0%, 50%);
$color-light-divider: hsl(0, 0%, 12%);

// Social media
$color-facebook: #3B5998; // https://en.facebookbrand.com/
$color-googleplus: #DB4437; // https://developers.google.com/+/
$color-hatenabookmark: #00A4DE; // http://hatenacorp.jp/press/resource
$color-instagram: #262626; // https://en.instagram-brand.com/
$color-line: #00B900; // https://line.me/en/logo
$color-pinterest: #BD081C; // https://business.pinterest.com/en/brand-guidelines
$color-twitter: #1DA1F2; // https://brand.twitter.com/logo
$color-youtube: #CD201F; // https://www.youtube.com/yt/brand/color.html