文字、見出し、背景、罫線等、色を付けないといけないものは数多くあり、毎回悩みます。

Adobe のデザインシステム Spectrum の Color ページで色を整理してくれているので、参考に色一覧を作成しました。

Static colors

Lightest

Light

Dark

Darkest

scss ファイル

上記の色一覧を scss ファイルにしました。

// color -----

// Static
$static-while: rgb(255, 255, 255);
$static-black: rgb(0, 0, 0);

$static-gray-200: rgb(244, 244, 244);
$static-gray-300: rgb(234, 234, 234);
$static-gray-400: rgb(211, 211, 211);
$static-gray-500: rgb(188, 188, 188);
$static-gray-600: rgb(149, 149, 149);
$static-gray-700: rgb(116, 116, 116);
$static-gray-800: rgb(80, 80, 80);
$static-gray-900: rgb(50, 50, 50);

$static-blue-400: rgb(55, 142, 240);
$static-blue-500: rgb(38, 128, 235);
$static-blue-600: rgb(20, 115, 230);
$static-blue-700: rgb(13, 102, 208);

$static-red-400: rgb(236, 91, 98);
$static-red-500: rgb(227, 72, 80);
$static-red-600: rgb(215, 55, 63);
$static-red-700: rgb(201, 37, 45);

$static-orange-400: rgb(242, 148, 35);
$static-orange-500: rgb(230, 134, 25);
$static-orange-600: rgb(218, 123, 17);
$static-orange-700: rgb(203, 111, 16);

$static-green-400: rgb(51, 171, 132);
$static-green-500: rgb(45, 157, 120);
$static-green-600: rgb(38, 142, 108);
$static-green-700: rgb(18, 128, 92);

// Lightest theme
$lightest-background-color: rgb(255, 255, 255);

$lightest-gray-050: rgb(255, 255, 255);
$lightest-gray-075: rgb(255, 255, 255);
$lightest-gray-100: rgb(255, 255, 255);
$lightest-gray-200: rgb(244, 244, 244);
$lightest-gray-300: rgb(234, 234, 234);
$lightest-gray-400: rgb(211, 211, 211);
$lightest-gray-500: rgb(188, 188, 188);
$lightest-gray-600: rgb(149, 149, 149);
$lightest-gray-700: rgb(116, 116, 116);
$lightest-gray-800: rgb(80, 80, 80);
$lightest-gray-900: rgb(50, 50, 50);

$lightest-blue-400: rgb(55, 142, 240);
$lightest-blue-500: rgb(38, 128, 235);
$lightest-blue-600: rgb(20, 115, 230);
$lightest-blue-700: rgb(13, 102, 208);

$lightest-red-400: rgb(236, 91, 98);
$lightest-red-500: rgb(227, 72, 80);
$lightest-red-600: rgb(215, 55, 63);
$lightest-red-700: rgb(201, 37, 45);

$lightest-orange-400: rgb(242, 148, 35);
$lightest-orange-500: rgb(230, 134, 25);
$lightest-orange-600: rgb(218, 123, 17);
$lightest-orange-700: rgb(203, 111, 16);

$lightest-green-400: rgb(51, 171, 132);
$lightest-green-500: rgb(45, 157, 120);
$lightest-green-600: rgb(38, 142, 108);
$lightest-green-700: rgb(18, 128, 92);

$lightest-indigo-400: rgb(117, 117, 241);
$lightest-indigo-500: rgb(103, 103, 236);
$lightest-indigo-600: rgb(92, 92, 224);
$lightest-indigo-700: rgb(81, 81, 211);

$lightest-celery-400: rgb(75, 195, 95);
$lightest-celery-500: rgb(68, 181, 86);
$lightest-celery-600: rgb(61, 167, 78);
$lightest-celery-700: rgb(55, 153, 71);

$lightest-magenta-400: rgb(226, 73, 157);
$lightest-magenta-500: rgb(216, 55, 144);
$lightest-magenta-600: rgb(202, 41, 130);
$lightest-magenta-700: rgb(188, 28, 116);

$lightest-yellow-400: rgb(237, 204, 0);
$lightest-yellow-500: rgb(223, 191, 0);
$lightest-yellow-600: rgb(210, 178, 0);
$lightest-yellow-700: rgb(196, 166, 0);

$lightest-fuchsia-400: rgb(207, 62, 220);
$lightest-fuchsia-500: rgb(192, 56, 204);
$lightest-fuchsia-600: rgb(177, 48, 189);
$lightest-fuchsia-700: rgb(162, 40, 173);

$lightest-seafoam-400: rgb(32, 163, 168);
$lightest-seafoam-500: rgb(27, 149, 154);
$lightest-seafoam-600: rgb(22, 135, 140);
$lightest-seafoam-700: rgb(15, 121, 125);

$lightest-chartreuse-400: rgb(142, 222, 73);
$lightest-chartreuse-500: rgb(133, 208, 68);
$lightest-chartreuse-600: rgb(124, 195, 63);
$lightest-chartreuse-700: rgb(115, 181, 58);

$lightest-purple-400: rgb(157, 100, 225);
$lightest-purple-500: rgb(146, 86, 217);
$lightest-purple-600: rgb(134, 76, 204);
$lightest-pueple-700: rgb(122, 66, 191);

// light theme
$light-background-color: rgb(245, 245, 245);

$light-gray-050: rgb(255, 255, 255);
$light-gray-075: rgb(250, 250, 250);
$light-gray-100: rgb(245, 245, 245);
$light-gray-200: rgb(234, 234, 234);
$light-gray-300: rgb(225, 225, 225);
$light-gray-400: rgb(202, 202, 202);
$light-gray-500: rgb(179, 179, 179);
$light-gray-600: rgb(142, 142, 142);
$light-gray-700: rgb(110, 110, 110);
$light-gray-800: rgb(75, 75, 75);
$light-gray-900: rgb(44, 44, 44);

$light-blue-400: rgb(38, 128, 235);
$light-blue-500: rgb(20, 115, 230);
$light-blue-600: rgb(13, 102, 208);
$light-blue-700: rgb(9, 90, 186);

$light-red-400: rgb(227, 72, 80);
$light-red-500: rgb(215, 55, 63);
$light-red-600: rgb(201, 37, 45);
$light-red-700: rgb(187, 18, 26);

$light-orange-400: rgb(230, 134, 25);
$light-orange-500: rgb(218, 123, 17);
$light-orange-600: rgb(203, 111, 16);
$light-orange-700: rgb(189, 100, 13);

$light-green-400: rgb(45, 157, 120);
$light-green-500: rgb(38, 142, 108);
$light-green-600: rgb(18, 128, 92);
$light-green-700: rgb(16, 113, 84);

$light-indigo-400: rgb(103, 103, 236);
$light-indigo-500: rgb(92, 92, 224);
$light-indigo-600: rgb(81, 81, 211);
$light-indigo-700: rgb(70, 70, 198);

$light-celery-400: rgb(68, 181, 86);
$light-celery-500: rgb(61, 167, 78);
$light-celery-600: rgb(55, 153, 71);
$light-celery-700: rgb(49, 139, 64);

$light-magenta-400: rgb(216, 55, 144);
$light-magenta-500: rgb(202, 41, 130);
$light-magenta-600: rgb(188, 28, 116);
$light-magenta-700: rgb(174, 14, 102);

$light-yellow-400: rgb(223, 191, 0);
$light-yellow-500: rgb(210, 178, 0);
$light-yellow-600: rgb(196, 166, 0);
$light-yellow-700: rgb(183, 153, 0);

$light-fuchsia-400: rgb(192, 56, 204);
$light-fuchsia-500: rgb(177, 48, 189);
$light-fuchsia-600: rgb(162, 40, 173);
$light-fuchsia-700: rgb(147, 33, 158);

$light-seafoam-400: rgb(27, 149, 154);
$light-seafoam-500: rgb(22, 135, 140);
$light-seafoam-600: rgb(15, 121, 125);
$light-seafoam-700: rgb(9, 108, 111);

$light-chartreuse-400: rgb(133, 208, 68);
$light-chartreuse-500: rgb(124, 195, 63);
$light-chartreuse-600: rgb(115, 181, 58);
$light-chartreuse-700: rgb(106, 168, 52);

$light-purple-400: rgb(146, 86, 217);
$light-purple-500: rgb(134, 76, 204);
$light-pueple-600: rgb(122, 66, 191);
$light-purple-700: rgb(111, 56, 177);

// dark theme
$dark-background-color: rgb(50, 50, 50);

$dark-gray-050: rgb(37, 37, 37);
$dark-gray-075: rgb(47, 47, 47);
$dark-gray-100: rgb(50, 50, 50);
$dark-gray-200: rgb(62, 62, 62);
$dark-gray-300: rgb(74, 74, 74);
$dark-gray-400: rgb(90, 90, 90);
$dark-gray-500: rgb(110, 110, 110);
$dark-gray-600: rgb(144, 144, 144);
$dark-gray-700: rgb(185, 185, 185);
$dark-gray-800: rgb(227, 227, 227);
$dark-gray-900: rgb(255, 255, 255);

$dark-blue-400: rgb(38, 128, 235);
$dark-blue-500: rgb(55, 142, 240);
$dark-blue-600: rgb(75, 156, 245);
$dark-blue-700: rgb(90, 169, 250);

$dark-red-400: rgb(227, 72, 80);
$dark-red-500: rgb(236, 91, 98);
$dark-red-600: rgb(247, 109, 116);
$dark-red-700: rgb(255, 123, 130);

$dark-orange-400: rgb(230, 134, 25);
$dark-orange-500: rgb(242, 148, 35);
$dark-orange-600: rgb(249, 164, 63);
$dark-orange-700: rgb(255, 181, 91);

$dark-green-400: rgb(45, 157, 120);
$dark-green-500: rgb(51, 171, 132);
$dark-green-600: rgb(57, 185, 144);
$dark-green-700: rgb(63, 200, 156);

$dark-indigo-400: rgb(103, 103, 236);
$dark-indigo-500: rgb(117, 117, 241);
$dark-indigo-600: rgb(130, 130, 246);
$dark-indigo-700: rgb(144, 144, 250);

$dark-celery-400: rgb(68, 181, 86);
$dark-celery-500: rgb(75, 195, 95);
$dark-celery-600: rgb(81, 210, 103);
$dark-celery-700: rgb(88, 224, 111);

$dark-magenta-400: rgb(216, 55, 144);
$dark-magenta-500: rgb(226, 73, 157);
$dark-magenta-600: rgb(236, 90, 170);
$dark-magenta-700: rgb(245, 107, 183);

$dark-yellow-400: rgb(223, 191, 0);
$dark-yellow-500: rgb(237, 204, 0);
$dark-yellow-600: rgb(250, 217, 0);
$dark-yellow-700: rgb(255, 226, 46);

$dark-fuchsia-400: rgb(192, 56, 204);
$dark-fuchsia-500: rgb(207, 62, 220);
$dark-fuchsia-600: rgb(217, 81, 229);
$dark-fuchsia-700: rgb(227, 102, 239);

$dark-seafoam-400: rgb(27, 149, 154);
$dark-seafoam-500: rgb(32, 163, 168);
$dark-seafoam-600: rgb(35, 178, 184);
$dark-seafoam-700: rgb(38, 192, 199);

$dark-chartreuse-400: rgb(133, 208, 68);
$dark-chartreuse-500: rgb(142, 222, 73);
$dark-chartreuse-600: rgb(155, 236, 84);
$dark-chartreuse-700: rgb(163, 248, 88);

$dark-purple-400: rgb(146, 86, 217);
$dark-purple-500: rgb(157, 100, 225);
$dark-pueple-600: rgb(168, 115, 233);
$dark-purple-700: rgb(180, 131, 240);

// darkest theme
$darkest-background-color: rgb(30, 30, 30);

$darkest-gray-050: rgb(8, 8, 8);
$darkest-gray-075: rgb(26, 26, 26);
$darkest-gray-100: rgb(30, 30, 30);
$darkest-gray-200: rgb(44, 44, 44);
$darkest-gray-300: rgb(57, 57, 57);
$darkest-gray-400: rgb(73, 73, 73);
$darkest-gray-500: rgb(92, 92, 92);
$darkest-gray-600: rgb(124, 124, 124);
$darkest-gray-700: rgb(162, 162, 162);
$darkest-gray-800: rgb(200, 200, 200);
$darkest-gray-900: rgb(239, 239, 239);

$darkest-blue-400: rgb(20, 115, 230);
$darkest-blue-500: rgb(38, 128, 235);
$darkest-blue-600: rgb(55, 142, 240);
$darkest-blue-700: rgb(75, 156, 245);

$darkest-red-400: rgb(215, 55, 63);
$darkest-red-500: rgb(227, 72, 80);
$darkest-red-600: rgb(236, 91, 98);
$darkest-red-700: rgb(247, 109, 116);

$darkest-orange-400: rgb(218, 123, 17);
$darkest-orange-500: rgb(230, 134, 25);
$darkest-orange-600: rgb(242, 148, 35);
$darkest-orange-700: rgb(249, 164, 63);

$darkest-green-400: rgb(38, 142, 108);
$darkest-green-500: rgb(45, 157, 120);
$darkest-green-600: rgb(51, 171, 132);
$darkest-green-700: rgb(57, 185, 144);

$darkest-indigo-400: rgb(92, 92, 224);
$darkest-indigo-500: rgb(103, 103, 236);
$darkest-indigo-600: rgb(117, 117, 241);
$darkest-indigo-700: rgb(130, 130, 246);

$darkest-celery-400: rgb(61, 167, 78);
$darkest-celery-500: rgb(68, 181, 86);
$darkest-celery-600: rgb(75, 195, 95);
$darkest-celery-700: rgb(81, 210, 103);

$darkest-magenta-400: rgb(202, 41, 150);
$darkest-magenta-500: rgb(216, 55, 144);
$darkest-magenta-600: rgb(226, 73, 157);
$darkest-magenta-700: rgb(236, 90, 170);

$darkest-yellow-400: rgb(210, 178, 0);
$darkest-yellow-500: rgb(223, 191, 0);
$darkest-yellow-600: rgb(237, 204, 0);
$darkest-yellow-700: rgb(250, 217, 0);

$darkest-fuchsia-400: rgb(177, 48, 189);
$darkest-fuchsia-500: rgb(192, 56, 204);
$darkest-fuchsia-600: rgb(207, 62, 220);
$darkest-fuchsia-700: rgb(217, 81, 229);

$darkest-seafoam-400: rgb(22, 135, 140);
$darkest-seafoam-500: rgb(27, 149, 154);
$darkest-seafoam-600: rgb(32, 163, 168);
$darkest-seafoam-700: rgb(35, 178, 184);

$darkest-chartreuse-400: rgb(124, 195, 63);
$darkest-chartreuse-500: rgb(133, 208, 68);
$darkest-chartreuse-600: rgb(142, 222, 73);
$darkest-chartreuse-700: rgb(155, 236, 84);

$darkest-purple-400: rgb(134, 76, 204);
$darkest-purple-500: rgb(146, 86, 217);
$darkest-purple-600: rgb(157, 100, 225);
$darkest-pueple-700: rgb(168, 115, 233);