Palette
색상은 브랜드 아이덴티티, 계층 구조, 상태 표현을 전달하는 핵심 수단이며, 올바른 색상 사용은 가독성, 접근성, 사용성을 좌우합니다.
Base Palette
| Token | Hex | RGB |
|---|---|---|
| palette.blue.50 | #eaf4ff | rgb(234, 244, 255) |
| palette.blue.100 | #d5e9fe | rgb(213, 233, 254) |
| palette.blue.200 | #abd3fd | rgb(171, 211, 253) |
| palette.blue.300 | #82bcfc | rgb(130, 188, 252) |
| palette.blue.400 | #58a6fb | rgb(88, 166, 251) |
| palette.blue.500 | #2e90fa | rgb(46, 144, 250) |
| palette.blue.600 | #2573c8 | rgb(37, 115, 200) |
| palette.blue.700 | #1c5696 | rgb(28, 86, 150) |
| palette.blue.800 | #123a64 | rgb(18, 58, 100) |
| palette.blue.900 | #091d32 | rgb(9, 29, 50) |
| palette.blue_dark.50 | #eaf1ff | rgb(234, 241, 255) |
| palette.blue_dark.100 | #d4e2ff | rgb(212, 226, 255) |
| palette.blue_dark.200 | #a9c6ff | rgb(169, 198, 255) |
| palette.blue_dark.300 | #7fa9ff | rgb(127, 169, 255) |
| palette.blue_dark.400 | #548dff | rgb(84, 141, 255) |
| palette.blue_dark.500 | #2970ff | rgb(41, 112, 255) |
| palette.blue_dark.600 | #215acc | rgb(33, 90, 204) |
| palette.blue_dark.700 | #194399 | rgb(25, 67, 153) |
| palette.blue_dark.800 | #102d66 | rgb(16, 45, 102) |
| palette.blue_dark.900 | #081633 | rgb(8, 22, 51) |
| palette.blue_light.50 | #e7f6fd | rgb(231, 246, 253) |
| palette.blue_light.100 | #ceedFb | rgb(206, 237, 251) |
| palette.blue_light.200 | #9ddbf7 | rgb(157, 219, 247) |
| palette.blue_light.300 | #6dc9f4 | rgb(109, 201, 244) |
| palette.blue_light.400 | #3cb7f0 | rgb(60, 183, 240) |
| palette.blue_light.500 | #0ba5ec | rgb(11, 165, 236) |
| palette.blue_light.600 | #0984bd | rgb(9, 132, 189) |
| palette.blue_light.700 | #07638e | rgb(7, 99, 142) |
| palette.blue_light.800 | #04425e | rgb(4, 66, 94) |
| palette.blue_light.900 | #02212f | rgb(2, 33, 47) |
| palette.cyan.50 | #e6f7fb | rgb(230, 247, 251) |
| palette.cyan.100 | #cdeff6 | rgb(205, 239, 246) |
| palette.cyan.200 | #9bdfee | rgb(155, 223, 238) |
| palette.cyan.300 | #6acee5 | rgb(106, 206, 229) |
| palette.cyan.400 | #38bedd | rgb(56, 190, 221) |
| palette.cyan.500 | #06aed4 | rgb(6, 174, 212) |
| palette.cyan.600 | #058baa | rgb(5, 139, 170) |
| palette.cyan.700 | #04687f | rgb(4, 104, 127) |
| palette.cyan.800 | #024655 | rgb(2, 70, 85) |
| palette.cyan.900 | #01232a | rgb(1, 35, 42) |
| palette.fuchsia.50 | #fbecfe | rgb(251, 236, 254) |
| palette.fuchsia.100 | #f6dafc | rgb(246, 218, 252) |
| palette.fuchsia.200 | #eeb4f9 | rgb(238, 180, 249) |
| palette.fuchsia.300 | #e58ff7 | rgb(229, 143, 247) |
| palette.fuchsia.400 | #dd69f4 | rgb(221, 105, 244) |
| palette.fuchsia.500 | #d444f1 | rgb(212, 68, 241) |
| palette.fuchsia.600 | #ac37c3 | rgb(172, 55, 195) |
| palette.fuchsia.700 | #832995 | rgb(131, 41, 149) |
| palette.fuchsia.800 | #5b1c68 | rgb(91, 28, 104) |
| palette.fuchsia.900 | #320e3a | rgb(50, 14, 58) |
| palette.green.50 | #ddf7e9 | rgb(221, 247, 233) |
| palette.green.100 | #c7efda | rgb(199, 239, 218) |
| palette.green.200 | #9be0bd | rgb(155, 224, 189) |
| palette.green.300 | #6ed19f | rgb(110, 209, 159) |
| palette.green.400 | #42c282 | rgb(66, 194, 130) |
| palette.green.500 | #16b364 | rgb(22, 179, 100) |
| palette.green.600 | #128f50 | rgb(18, 143, 80) |
| palette.green.700 | #0d6b3c | rgb(13, 107, 60) |
| palette.green.800 | #094828 | rgb(9, 72, 40) |
| palette.green.900 | #042414 | rgb(4, 36, 20) |
| palette.green_light.50 | #f0f9e8 | rgb(240, 249, 232) |
| palette.green_light.100 | #e0f4d2 | rgb(224, 244, 210) |
| palette.green_light.200 | #c2e8a4 | rgb(194, 232, 164) |
| palette.green_light.300 | #a3dd77 | rgb(163, 221, 119) |
| palette.green_light.400 | #85d149 | rgb(133, 209, 73) |
| palette.green_light.500 | #66c61c | rgb(102, 198, 28) |
| palette.green_light.600 | #529e16 | rgb(82, 158, 22) |
| palette.green_light.700 | #3d7711 | rgb(61, 119, 17) |
| palette.green_light.800 | #294f0b | rgb(41, 79, 11) |
| palette.green_light.900 | #142806 | rgb(20, 40, 6) |
| palette.indigo.50 | #eff1fe | rgb(239, 241, 254) |
| palette.indigo.100 | #dfe3fd | rgb(223, 227, 253) |
| palette.indigo.200 | #c0c7fa | rgb(192, 199, 250) |
| palette.indigo.300 | #a0aaf8 | rgb(160, 170, 248) |
| palette.indigo.400 | #818ef5 | rgb(129, 142, 245) |
| palette.indigo.500 | #6172f3 | rgb(97, 114, 243) |
| palette.indigo.600 | #4e5dcb | rgb(78, 93, 203) |
| palette.indigo.700 | #3b48a2 | rgb(59, 72, 162) |
| palette.indigo.800 | #29327a | rgb(41, 50, 122) |
| palette.indigo.900 | #161d51 | rgb(22, 29, 81) |
| palette.magenta.50 | #fceaee | rgb(252, 234, 238) |
| palette.magenta.100 | #f9d5de | rgb(249, 213, 222) |
| palette.magenta.200 | #f2abbc | rgb(242, 171, 188) |
| palette.magenta.300 | #ec819b | rgb(236, 129, 155) |
| palette.magenta.400 | #e55779 | rgb(229, 87, 121) |
| palette.magenta.500 | #df2d58 | rgb(223, 45, 88) |
| palette.magenta.600 | #b22446 | rgb(178, 36, 70) |
| palette.magenta.700 | #861b35 | rgb(134, 27, 53) |
| palette.magenta.800 | #591223 | rgb(89, 18, 35) |
| palette.magenta.900 | #430e1a | rgb(67, 14, 26) |
| palette.moss.50 | #e9f3e1 | rgb(233, 243, 225) |
| palette.moss.100 | #dbe9cc | rgb(219, 233, 204) |
| palette.moss.200 | #bed7a4 | rgb(190, 215, 164) |
| palette.moss.300 | #a0c47b | rgb(160, 196, 123) |
| palette.moss.400 | #83b253 | rgb(131, 178, 83) |
| palette.moss.500 | #669f2a | rgb(102, 159, 42) |
| palette.moss.600 | #527f22 | rgb(82, 127, 34) |
| palette.moss.700 | #3d5f19 | rgb(61, 95, 25) |
| palette.moss.800 | #294011 | rgb(41, 64, 17) |
| palette.moss.900 | #142008 | rgb(20, 32, 8) |
| palette.neutral.50 | #f5f7f9 | rgb(245, 247, 249) |
| palette.neutral.100 | #ebeff3 | rgb(235, 239, 243) |
| palette.neutral.200 | #dee2e7 | rgb(222, 226, 231) |
| palette.neutral.300 | #ccd0d4 | rgb(204, 208, 212) |
| palette.neutral.400 | #a2a7ad | rgb(162, 167, 173) |
| palette.neutral.500 | #83878f | rgb(131, 135, 143) |
| palette.neutral.600 | #61646c | rgb(97, 100, 108) |
| palette.neutral.700 | #3a3f46 | rgb(58, 63, 70) |
| palette.neutral.800 | #262a30 | rgb(38, 42, 48) |
| palette.neutral.900 | #1a1d21 | rgb(26, 29, 33) |
| palette.orange.50 | #fdf0e9 | rgb(253, 240, 233) |
| palette.orange.100 | #fce1d2 | rgb(252, 225, 210) |
| palette.orange.200 | #f9c3a6 | rgb(249, 195, 166) |
| palette.orange.300 | #f5a479 | rgb(245, 164, 121) |
| palette.orange.400 | #f2864d | rgb(242, 134, 77) |
| palette.orange.500 | #ef6820 | rgb(239, 104, 32) |
| palette.orange.600 | #bf531a | rgb(191, 83, 26) |
| palette.orange.700 | #8f3e13 | rgb(143, 62, 19) |
| palette.orange.800 | #602a0d | rgb(96, 42, 13) |
| palette.orange.900 | #301506 | rgb(48, 21, 6) |
| palette.orange_dark.50 | #ffece6 | rgb(255, 236, 230) |
| palette.orange_dark.100 | #ffdacd | rgb(255, 218, 205) |
| palette.orange_dark.200 | #ffb49b | rgb(255, 180, 155) |
| palette.orange_dark.300 | #ff8f69 | rgb(255, 143, 105) |
| palette.orange_dark.400 | #ff6937 | rgb(255, 105, 55) |
| palette.orange_dark.500 | #f5480c | rgb(245, 72, 12) |
| palette.orange_dark.600 | #cc3604 | rgb(204, 54, 4) |
| palette.orange_dark.700 | #992903 | rgb(153, 41, 3) |
| palette.orange_dark.800 | #661b02 | rgb(102, 27, 2) |
| palette.orange_dark.900 | #330e01 | rgb(51, 14, 1) |
| palette.pink.50 | #fdedf8 | rgb(253, 237, 248) |
| palette.pink.100 | #fcdaf2 | rgb(252, 218, 242) |
| palette.pink.200 | #f8b5e4 | rgb(248, 181, 228) |
| palette.pink.300 | #f590d7 | rgb(245, 144, 215) |
| palette.pink.400 | #f16bc9 | rgb(241, 107, 201) |
| palette.pink.500 | #ee46bc | rgb(238, 70, 188) |
| palette.pink.600 | #c13898 | rgb(193, 56, 152) |
| palette.pink.700 | #932a74 | rgb(147, 42, 116) |
| palette.pink.800 | #661d50 | rgb(102, 29, 80) |
| palette.pink.900 | #380f2c | rgb(56, 15, 44) |
| palette.purple.50 | #f2effe | rgb(242, 239, 254) |
| palette.purple.100 | #e4defe | rgb(228, 222, 254) |
| palette.purple.200 | #cabdfc | rgb(202, 189, 252) |
| palette.purple.300 | #af9cfb | rgb(175, 156, 251) |
| palette.purple.400 | #957bf9 | rgb(149, 123, 249) |
| palette.purple.500 | #7a5af8 | rgb(122, 90, 248) |
| palette.purple.600 | #6448ce | rgb(100, 72, 206) |
| palette.purple.700 | #4d37a5 | rgb(77, 55, 165) |
| palette.purple.800 | #37257b | rgb(55, 37, 123) |
| palette.purple.900 | #201452 | rgb(32, 20, 82) |
| palette.red.50 | #fcebe9 | rgb(252, 235, 233) |
| palette.red.100 | #f8d7d3 | rgb(248, 215, 211) |
| palette.red.200 | #f2afa8 | rgb(242, 175, 168) |
| palette.red.300 | #eb867c | rgb(235, 134, 124) |
| palette.red.400 | #e55e51 | rgb(229, 94, 81) |
| palette.red.500 | #de3625 | rgb(222, 54, 37) |
| palette.red.600 | #b22b1e | rgb(178, 43, 30) |
| palette.red.700 | #852016 | rgb(133, 32, 22) |
| palette.red.800 | #59160f | rgb(89, 22, 15) |
| palette.red.900 | #2c0b07 | rgb(44, 11, 7) |
| palette.teal.50 | #dff7f3 | rgb(223, 247, 243) |
| palette.teal.100 | #c9f0ea | rgb(201, 240, 234) |
| palette.teal.200 | #9ce2d7 | rgb(156, 226, 215) |
| palette.teal.300 | #6fd3c4 | rgb(111, 211, 196) |
| palette.teal.400 | #42c5b1 | rgb(66, 197, 177) |
| palette.teal.500 | #15b79e | rgb(21, 183, 158) |
| palette.teal.600 | #11927e | rgb(17, 146, 126) |
| palette.teal.700 | #0d6e5f | rgb(13, 110, 95) |
| palette.teal.800 | #08493f | rgb(8, 73, 63) |
| palette.teal.900 | #042520 | rgb(4, 37, 32) |
| palette.violet.50 | #f3effe | rgb(243, 239, 254) |
| palette.violet.100 | #e7defd | rgb(231, 222, 253) |
| palette.violet.200 | #cfbdfc | rgb(207, 189, 252) |
| palette.violet.300 | #b79dfa | rgb(183, 157, 250) |
| palette.violet.400 | #9f7cf9 | rgb(159, 124, 249) |
| palette.violet.500 | #875bf7 | rgb(135, 91, 247) |
| palette.violet.600 | #6f49ce | rgb(111, 73, 206) |
| palette.violet.700 | #5637a4 | rgb(86, 55, 164) |
| palette.violet.800 | #3e267b | rgb(62, 38, 123) |
| palette.violet.900 | #251451 | rgb(37, 20, 81) |
| palette.yellow.50 | #fef8e7 | rgb(254, 248, 231) |
| palette.yellow.100 | #fef1cf | rgb(254, 241, 207) |
| palette.yellow.200 | #fce29f | rgb(252, 226, 159) |
| palette.yellow.300 | #fbd46f | rgb(251, 212, 111) |
| palette.yellow.400 | #fac515 | rgb(250, 197, 21) |
| palette.yellow.500 | #eaa606 | rgb(234, 166, 6) |
| palette.yellow.600 | #c4800a | rgb(196, 128, 10) |
| palette.yellow.700 | #96600c | rgb(150, 96, 12) |
| palette.yellow.800 | #603f0f | rgb(96, 63, 15) |
| palette.yellow.900 | #2f2202 | rgb(47, 34, 2) |
| palette.white | #ffffff | rgb(255, 255, 255) |
Brand Colors
| Token | Hex | RGB |
|---|---|---|
| brand.saige_dark_grey.500 | #6a7a7c | rgb(106, 122, 124) |
| brand.saige_grey.500 | #7f8d8e | rgb(127, 141, 142) |
| brand.saige_light_grey.500 | #cbd0d1 | rgb(203, 208, 209) |
| brand.saige_red.500 | #ff4052 | rgb(255, 64, 82) |