05
色で悩んだときによく見る色一覧
【作成日】 2021/08/16 16:01 【更新日】
文字、見出し、背景、罫線等、色を付けないといけないものは数多くあり、毎回悩みます。
Adobe のデザインシステム Spectrum の Color ページで色を整理してくれているので、参考に色一覧を作成しました。
Static colors
background:rgb(245,245,245);
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)
Lightest
background:rgb(255,255,255);
GRAY 50
rgb(255, 255, 255)
GRAY 75
rgb(255, 255, 255)
GRAY 100
rgb(255, 255, 255)
GRAY 200
rgb(244, 244, 244)
GRAY 300
rgb(234, 234, 234)
GRAY 400
rgb(211, 211, 211)
GRAY 500
rgb(188, 188, 188)
GRAY 600
rgb(149, 149, 149)
GRAY 700
rgb(116, 116, 116)
GRAY 800
rgb(80, 80, 80)
GRAY 900
rgb(50, 50, 50)
BLUE 400
rgb(55, 142, 240)
BLUE 500
rgb(38, 128, 235)
BLUE 600
rgb(20, 115, 230)
BLUE 700
rgb(13, 102, 208)
ORANGE 400
rgb(242, 148, 35)
ORANGE 500
rgb(230, 134, 25)
ORANGE 600
rgb(218, 123, 17)
ORANGE 700
rgb(203, 111, 16)
GREEN 400
rgb(51, 171, 132)
GREEN 500
rgb(45, 157, 120)
GREEN 600
rgb(38, 142, 108)
GREEN 700
rgb(18, 128, 92)
INDIGO 400
rgb(117, 117, 241)
INDIGO 500
rgb(103, 103, 236)
INDIGO 600
rgb(92, 92, 224)
INDIGO 700
rgb(81, 81, 211)
CELERY 400
rgb(75, 195, 95)
CELERY 500
rgb(68, 181, 86)
CELERY 600
rgb(61, 167, 78)
CELERY 700
rgb(55, 153, 71)
MAGENTA 400
rgb(226, 73, 157)
MAGENTA 500
rgb(216, 55, 144)
MAGENTA 600
rgb(202, 41, 130)
MAGENTA 700
rgb(188, 28, 116)
YELLOW 400
rgb(237, 204, 0)
YELLOW 500
rgb(223, 191, 0)
YELLOW 600
rgb(210, 178, 0)
YELLOW 700
rgb(196, 166, 0)
FUCHSIA 400
rgb(207, 62, 220)
FUCHSIA 500
rgb(192, 56, 204)
FUCHSIA 600
rgb(177, 48, 189)
FUCHSIA 700
rgb(162, 40, 173)
SEAFOAM 400
rgb(32, 163, 168)
SEAFOAM 500
rgb(27, 149, 154)
SEAFOAM 600
rgb(22, 135, 140)
SEAFOAM 700
rgb(15, 121, 125)
Light
background:rgb(245,245,245);
GRAY 50
rgb(255, 255, 255)
GRAY 75
rgb(250, 250, 250)
GRAY 100
rgb(245, 245, 245)
GRAY 200
rgb(234, 234, 234)
GRAY 300
rgb(225, 225, 225)
GRAY 400
rgb(202, 202, 202)
GRAY 500
rgb(179, 179, 179)
GRAY 600
rgb(142, 142, 142)
GRAY 700
rgb(110, 110, 110)
GRAY 800
rgb(75, 75, 75)
GRAY 900
rgb(44, 44, 44)
BLUE 400
rgb(38, 128, 235)
BLUE 500
rgb(20, 115, 230)
BLUE 600
rgb(13, 102, 208)
BLUE 700
rgb(9, 90, 186)
ORANGE 400
rgb(230, 134, 25)
ORANGE 500
rgb(218, 123, 17)
ORANGE 600
rgb(203, 111, 16)
ORANGE 700
rgb(189, 100, 13)
GREEN 400
rgb(45, 157, 120)
GREEN 500
rgb(38, 142, 108)
GREEN 600
rgb(18, 128, 92)
GREEN 700
rgb(16, 113, 84)
INDIGO 400
rgb(103, 103, 236)
INDIGO 500
rgb(92, 92, 224)
INDIGO 600
rgb(81, 81, 211)
INDIGO 700
rgb(70, 70, 198)
CELERY 400
rgb(68, 181, 86)
CELERY 500
rgb(61, 167, 78)
CELERY 600
rgb(55, 153, 71)
CELERY 700
rgb(49, 139, 64)
MAGENTA 400
rgb(216, 55, 144)
MAGENTA 500
rgb(202, 41, 130)
MAGENTA 600
rgb(188, 28, 116)
MAGENTA 700
rgb(174, 14, 102)
YELLOW 400
rgb(223, 191, 0)
YELLOW 500
rgb(210, 178, 0)
YELLOW 600
rgb(196, 166, 0)
YELLOW 700
rgb(183, 153, 0)
FUCHSIA 400
rgb(192, 56, 204)
FUCHSIA 500
rgb(177, 48, 189)
FUCHSIA 600
rgb(162, 40, 173)
FUCHSIA 700
rgb(147, 33, 158)
SEAFOAM 400
rgb(27, 149, 154)
SEAFOAM 500
rgb(22, 135, 140)
SEAFOAM 600
rgb(15, 121, 125)
SEAFOAM 700
rgb(9, 108, 111)
Dark
background:rgb(50,50,50);
GRAY 50
rgb(37, 37, 37)
GRAY 75
rgb(47, 47, 47)
GRAY 100
rgb(50, 50, 50)
GRAY 200
rgb(62, 62, 62)
GRAY 300
rgb(74, 74, 74)
GRAY 400
rgb(90, 90, 90)
GRAY 500
rgb(110, 110, 110)
GRAY 600
rgb(144, 144, 144)
GRAY 700
rgb(185, 185, 185)
GRAY 800
rgb(227, 227, 227)
GRAY 900
rgb(255, 255, 255)
BLUE 400
rgb(38, 128, 235)
BLUE 500
rgb(55, 142, 240)
BLUE 600
rgb(75, 156, 245)
BLUE 700
rgb(90, 169, 250)
RED 400
rgb(227, 72, 80)
RED 500
rgb(236, 91, 98)
RED 600
rgb(247, 109, 116)
RED 700
rgb(255, 123, 130)
ORANGE 400
rgb(230, 134, 25)
ORANGE 500
rgb(242, 148, 35)
ORANGE 600
rgb(249, 164, 63)
ORANGE 700
rgb(255, 181, 91)
GREEN 400
rgb(45, 157, 120)
GREEN 500
rgb(51, 171, 132)
GREEN 600
rgb(57, 185, 144)
GREEN 700
rgb(63, 200, 156)
INDIGO 400
rgb(103, 103, 236)
INDIGO 500
rgb(117, 117, 241)
INDIGO 600
rgb(130, 130, 246)
INDIGO 700
rgb(144, 144, 250)
CELERY 400
rgb(68, 181, 86)
CELERY 500
rgb(75, 195, 95)
CELERY 600
rgb(81, 210, 103)
CELERY 700
rgb(88, 224, 111)
MAGENTA 400
rgb(216, 55, 144)
MAGENTA 500
rgb(226, 73, 157)
MAGENTA 600
rgb(236, 90, 170)
MAGENTA 700
rgb(245, 107, 183)
YELLOW 400
rgb(223, 191, 0)
YELLOW 500
rgb(237, 204, 0)
YELLOW 600
rgb(250, 217, 0)
YELLOW 700
rgb(255, 226, 46)
FUCHSIA 400
rgb(192, 56, 204)
FUCHSIA 500
rgb(207, 62, 220)
FUCHSIA 600
rgb(217, 81, 229)
FUCHSIA 700
rgb(227, 102, 239)
SEAFOAM 400
rgb(27, 149, 154)
SEAFOAM 500
rgb(32, 163, 168)
SEAFOAM 600
rgb(35, 178, 184)
SEAFOAM 700
rgb(38, 192, 199)
Darkest
background:rgb(30,30,30);
GRAY 50
rgb(8, 8, 8)
GRAY 75
rgb(26, 26, 26)
GRAY 100
rgb(30, 30, 30)
GRAY 200
rgb(44, 44, 44)
GRAY 300
rgb(57, 57, 57)
GRAY 400
rgb(73, 73, 73)
GRAY 500
rgb(92, 92, 92)
GRAY 600
rgb(124, 124, 124)
GRAY 700
rgb(162, 162, 162)
GRAY 800
rgb(200, 200, 200)
GRAY 900
rgb(239, 239, 239)
BLUE 400
rgb(20, 115, 230)
BLUE 500
rgb(38, 128, 235)
BLUE 600
rgb(55, 142, 240)
BLUE 700
rgb(75, 156, 245)
RED 400
rgb(215, 55, 63)
RED 500
rgb(227, 72, 80)
RED 600
rgb(236, 91, 98)
RED 700
rgb(247, 109, 116)
ORANGE 400
rgb(218, 123, 17)
ORANGE 500
rgb(230, 134, 25)
ORANGE 600
rgb(242, 148, 35)
ORANGE 700
rgb(249, 164, 63)
GREEN 400
rgb(38, 142, 108)
GREEN 500
rgb(45, 157, 120)
GREEN 600
rgb(51, 171, 132)
GREEN 700
rgb(57, 185, 144)
INDIGO 400
rgb(92, 92, 224)
INDIGO 500
rgb(103, 103, 236)
INDIGO 600
rgb(117, 117, 241)
INDIGO 700
rgb(130, 130, 246)
CELERY 400
rgb(61, 167, 78)
CELERY 500
rgb(68, 181, 86)
CELERY 600
rgb(75, 195, 95)
CELERY 700
rgb(81, 210, 103)
MAGENTA 400
rgb(202, 41, 150)
MAGENTA 500
rgb(216, 55, 144)
MAGENTA 600
rgb(226, 73, 157)
MAGENTA 700
rgb(236, 90, 170)
YELLOW 400
rgb(210, 178, 0)
YELLOW 500
rgb(223, 191, 0)
YELLOW 600
rgb(237, 204, 0)
YELLOW 700
rgb(250, 217, 0)
FUCHSIA 400
rgb(177, 48, 189)
FUCHSIA 500
rgb(192, 56, 204)
FUCHSIA 600
rgb(207, 62, 220)
FUCHSIA 700
rgb(217, 81, 229)
SEAFOAM 400
rgb(22, 135, 140)
SEAFOAM 500
rgb(27, 149, 154)
SEAFOAM 600
rgb(32, 163, 168)
SEAFOAM 700
rgb(35, 178, 184)
scss ファイル
上記の色一覧を scss ファイルにしました。
_variables.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);