Color Palettes

Refactoring UI: Color Palettes

Palettes
Refactoring UI: Color Palettes

Palette 1
Refactoring UI: Color Palettes

Primary
These are the splashes of color that should appear the most in your UI,
and are the ones that determine the overall "look" of the site. Use these
for things like primary actions, links, navigation items, icons, accent
borders, or text you want to emphasize.

Cyan

#044E54 #0A6C74 #0E7C86 #14919B #2CB1BC

hsl(184, 91%, 17%) hsl(185, 84%, 25%) hsl(185, 81%, 29%) hsl(184, 77%, 34%) hsl(185, 62%, 45%)

#38BEC9 #54D1DB #87EAF2 #BEF8FD #E0FCFF

hsl(185, 57%, 50%) hsl(184, 65%, 59%) hsl(184, 80%, 74%) hsl(185, 94%, 87%) hsl(186, 100%, 94%)
Refactoring UI: Color Palettes

Neutrals
These are the colors you will use the most and will make up the majority
of your UI. Use them for most of your text, backgrounds, and borders,
as well as for things like secondary buttons and links.

Blue Grey

#102A43 #243B53 #334E68 #486581 #627D98

hsl(209, 61%, 16%) hsl(211, 39%, 23%) hsl(209, 34%, 30%) hsl(209, 28%, 39%) hsl(210, 22%, 49%)

#829AB1 #9FB3C8 #BCCCDC #D9E2EC #F0F4F8

hsl(209, 23%, 60%) hsl(211, 27%, 70%) hsl(210, 31%, 80%) hsl(212, 33%, 89%) hsl(210, 36%, 96%)
Refactoring UI: Color Palettes

Supporting
These colors should be used fairly conservatively throughout your UI to
avoid overpowering your primary colors. Use them when you need an
element to stand out, or to reinforce things like error states or positive
trends with the appropriate semantic color.

Indigo Pink

#19216C #647ACB #5C0B33 #DA4A91

hsl(234, 62%, 26%) hsl(227, 50%, 59%) hsl(330, 79%, 20%) hsl(330, 66%, 57%)

#2D3A8C #7B93DB #781244 #E668A7

hsl(232, 51%, 36%) hsl(225, 57%, 67%) hsl(331, 74%, 27%) hsl(330, 72%, 65%)

#35469C #98AEEB #9B1B5A #F191C1

hsl(230, 49%, 41%) hsl(224, 67%, 76%) hsl(330, 70%, 36%) hsl(330, 77%, 76%)

#4055A8 #BED0F7 #AD2167 #FAB8D9

hsl(228, 45%, 45%) hsl(221, 78%, 86%) hsl(330, 68%, 40%) hsl(330, 87%, 85%)

#4C63B6 #E0E8F9 #C42D78 #FFE0F0

hsl(227, 42%, 51%) hsl(221, 68%, 93%) hsl(330, 63%, 47%) hsl(329, 100%, 94%)
Refactoring UI: Color Palettes

Red Yellow

#610404 #D64545 #513C06 #F7D070

hsl(360, 92%, 20%) hsl(360, 64%, 55%) hsl(43, 86%, 17%) hsl(43, 89%, 70%)

#780A0A #E66A6A #7C5E10 #F9DA8B

hsl(360, 85%, 25%) hsl(360, 71%, 66%) hsl(43, 77%, 27%) hsl(43, 90%, 76%)

#911111 #F29B9B #A27C1A #F8E3A3

hsl(360, 79%, 32%) hsl(360, 77%, 78%) hsl(43, 72%, 37%) hsl(45, 86%, 81%)

#A61B1B #FACDCD #C99A2E #FCEFC7

hsl(360, 72%, 38%) hsl(360, 82%, 89%) hsl(42, 63%, 48%) hsl(45, 90%, 88%)

#BA2525 #FFEEEE #E9B949 #FFFAEB

hsl(360, 67%, 44%) hsl(360, 100%, 97%) hsl(42, 78%, 60%) hsl(45, 100%, 96%)
Refactoring UI: Color Palettes

Palette 2
Refactoring UI: Color Palettes

Primary
These are the splashes of color that should appear the most in your UI,
and are the ones that determine the overall "look" of the site. Use these
for things like primary actions, links, navigation items, icons, accent
borders, or text you want to emphasize.

Blue

#003E6B #0A558C #0F609B #186FAF #2680C2

hsl(205, 100%, 21%) hsl(205, 87%, 29%) hsl(205, 82%, 33%) hsl(205, 76%, 39%) hsl(205, 67%, 45%)

#4098D7 #62B0E8 #84C5F4 #B6E0FE #DCEEFB

hsl(205, 65%, 55%) hsl(205, 74%, 65%) hsl(205, 84%, 74%) hsl(205, 97%, 85%) hsl(205, 79%, 92%)
Refactoring UI: Color Palettes

Yellow (Vivid)

#8D2B0B #B44D12 #CB6E17 #DE911D #F0B429

hsl(15, 86%, 30%) hsl(22, 82%, 39%) hsl(29, 80%, 44%) hsl(36, 77%, 49%) hsl(42, 87%, 55%)

#F7C948 #FADB5F #FCE588 #FFF3C4 #FFFBEA

hsl(44, 92%, 63%) hsl(48, 94%, 68%) hsl(48, 95%, 76%) hsl(48, 100%, 88%) hsl(49, 100%, 96%)
Refactoring UI: Color Palettes

Neutrals
These are the colors you will use the most and will make up the majority
of your UI. Use them for most of your text, backgrounds, and borders,
as well as for things like secondary buttons and links.

Blue Grey

#102A43 #243B53 #334E68 #486581 #627D98

hsl(209, 61%, 16%) hsl(211, 39%, 23%) hsl(209, 34%, 30%) hsl(209, 28%, 39%) hsl(210, 22%, 49%)

#829AB1 #9FB3C8 #BCCCDC #D9E2EC #F0F4F8

hsl(209, 23%, 60%) hsl(211, 27%, 70%) hsl(210, 31%, 80%) hsl(212, 33%, 89%) hsl(210, 36%, 96%)
Refactoring UI: Color Palettes

Supporting
These colors should be used fairly conservatively throughout your UI to
avoid overpowering your primary colors. Use them when you need an
element to stand out, or to reinforce things like error states or positive
trends with the appropriate semantic color.

Cyan Red

#044E54 #38BEC9 #610404 #D64545

hsl(184, 91%, 17%) hsl(185, 57%, 50%) hsl(360, 92%, 20%) hsl(360, 64%, 55%)

#0A6C74 #54D1DB #780A0A #E66A6A

hsl(185, 84%, 25%) hsl(184, 65%, 59%) hsl(360, 85%, 25%) hsl(360, 71%, 66%)

#0E7C86 #87EAF2 #911111 #F29B9B

hsl(185, 81%, 29%) hsl(184, 80%, 74%) hsl(360, 79%, 32%) hsl(360, 77%, 78%)

#14919B #BEF8FD #A61B1B #FACDCD

hsl(184, 77%, 34%) hsl(185, 94%, 87%) hsl(360, 72%, 38%) hsl(360, 82%, 89%)

#2CB1BC #E0FCFF #BA2525 #FFEEEE

hsl(185, 62%, 45%) hsl(186, 100%, 94%) hsl(360, 67%, 44%) hsl(360, 100%, 97%)
Refactoring UI: Color Palettes

Palette 3
Refactoring UI: Color Palettes

Primary
These are the splashes of color that should appear the most in your UI,
and are the ones that determine the overall "look" of the site. Use these
for things like primary actions, links, navigation items, icons, accent
borders, or text you want to emphasize.

Purple

#0C008C #1D0EBE #3525E6 #4D3DF7 #5D55FA

hsl(245, 100%, 27%) hsl(245, 86%, 40%) hsl(245, 79%, 52%) hsl(245, 92%, 60%) hsl(243, 94%, 66%)

#7069FA #8888FC #A2A5FC #C4C6FF #E6E6FF

hsl(243, 94%, 70%) hsl(240, 95%, 76%) hsl(238, 94%, 81%) hsl(238, 100%, 88%) hsl(240, 100%, 95%)
Refactoring UI: Color Palettes

Teal

#014D40 #0C6B58 #147D64 #199473 #27AB83

hsl(170, 97%, 15%) hsl(168, 80%, 23%) hsl(166, 72%, 28%) hsl(164, 71%, 34%) hsl(162, 63%, 41%)

#3EBD93 #65D6AD #8EEDC7 #C6F7E2 #EFFCF6

hsl(160, 51%, 49%) hsl(158, 58%, 62%) hsl(156, 73%, 74%) hsl(154, 75%, 87%) hsl(152, 68%, 96%)
Refactoring UI: Color Palettes

Neutrals
These are the colors you will use the most and will make up the majority
of your UI. Use them for most of your text, backgrounds, and borders,
as well as for things like secondary buttons and links.

Blue Grey

#102A43 #243B53 #334E68 #486581 #627D98

hsl(209, 61%, 16%) hsl(211, 39%, 23%) hsl(209, 34%, 30%) hsl(209, 28%, 39%) hsl(210, 22%, 49%)

#829AB1 #9FB3C8 #BCCCDC #D9E2EC #F0F4F8

hsl(209, 23%, 60%) hsl(211, 27%, 70%) hsl(210, 31%, 80%) hsl(212, 33%, 89%) hsl(210, 36%, 96%)
Refactoring UI: Color Palettes

Supporting
These colors should be used fairly conservatively throughout your UI to
avoid overpowering your primary colors. Use them when you need an
element to stand out, or to reinforce things like error states or positive
trends with the appropriate semantic color.

Light Blue (Vivid) Red (Vivid)

#035388 #40C3F7 #610316 #EF4E4E

hsl(204, 96%, 27%) hsl(197, 92%, 61%) hsl(348, 94%, 20%) hsl(360, 83%, 62%)

#0B69A3 #5ED0FA #8A041A #F86A6A

hsl(203, 87%, 34%) hsl(196, 94%, 67%) hsl(350, 94%, 28%) hsl(360, 91%, 69%)

#127FBF #81DEFD #AB091E #FF9B9B

hsl(202, 83%, 41%) hsl(195, 97%, 75%) hsl(352, 90%, 35%) hsl(360, 100%, 80%)

#1992D4 #B3ECFF #CF1124 #FFBDBD

hsl(201, 79%, 46%) hsl(195, 100%, 85%) hsl(354, 85%, 44%) hsl(360, 100%, 87%)

#2BB0ED #E3F8FF #E12D39 #FFE3E3

hsl(199, 84%, 55%) hsl(195, 100%, 95%) hsl(356, 75%, 53%) hsl(360, 100%, 95%)
Refactoring UI: Color Palettes

Yellow (Vivid)

#8D2B0B #F7C948
hsl(15, 86%, 30%) hsl(44, 92%, 63%)

#B44D12 #FADB5F
hsl(22, 82%, 39%) hsl(48, 94%, 68%)

#CB6E17 #FCE588
hsl(29, 80%, 44%) hsl(48, 95%, 76%)

#DE911D #FFF3C4
hsl(36, 77%, 49%) hsl(48, 100%, 88%)

#F0B429 #FFFBEA
hsl(42, 87%, 55%) hsl(49, 100%, 96%)
Refactoring UI: Color Palettes

Palette 4
Refactoring UI: Color Palettes

Primary
These are the splashes of color that should appear the most in your UI,
and are the ones that determine the overall "look" of the site. Use these
for things like primary actions, links, navigation items, icons, accent
borders, or text you want to emphasize.

Teal

#014D40 #0C6B58 #147D64 #199473 #27AB83

hsl(170, 97%, 15%) hsl(168, 80%, 23%) hsl(166, 72%, 28%) hsl(164, 71%, 34%) hsl(162, 63%, 41%)

#3EBD93 #65D6AD #8EEDC7 #C6F7E2 #EFFCF6

hsl(160, 51%, 49%) hsl(158, 58%, 62%) hsl(156, 73%, 74%) hsl(154, 75%, 87%) hsl(152, 68%, 96%)
Refactoring UI: Color Palettes

Neutrals
These are the colors you will use the most and will make up the majority
of your UI. Use them for most of your text, backgrounds, and borders,
as well as for things like secondary buttons and links.

Blue Grey

#102A43 #243B53 #334E68 #486581 #627D98

hsl(209, 61%, 16%) hsl(211, 39%, 23%) hsl(209, 34%, 30%) hsl(209, 28%, 39%) hsl(210, 22%, 49%)

#829AB1 #9FB3C8 #BCCCDC #D9E2EC #F0F4F8

hsl(209, 23%, 60%) hsl(211, 27%, 70%) hsl(210, 31%, 80%) hsl(212, 33%, 89%) hsl(210, 36%, 96%)
Refactoring UI: Color Palettes

Supporting
These colors should be used fairly conservatively throughout your UI to
avoid overpowering your primary colors. Use them when you need an
element to stand out, or to reinforce things like error states or positive
trends with the appropriate semantic color.

Blue Purple

#003E6B #4098D7 #240754 #724BB7

hsl(205, 100%, 21%) hsl(205, 65%, 55%) hsl(263, 85%, 18%) hsl(262, 43%, 51%)

#0A558C #62B0E8 #34126F #8662C7

hsl(205, 87%, 29%) hsl(205, 74%, 65%) hsl(262, 72%, 25%) hsl(261, 47%, 58%)

#0F609B #84C5F4 #421987 #A081D9

hsl(205, 82%, 33%) hsl(205, 84%, 74%) hsl(262, 69%, 31%) hsl(261, 54%, 68%)

#186FAF #B6E0FE #51279B #CFBCF2

hsl(205, 76%, 39%) hsl(205, 97%, 85%) hsl(262, 60%, 38%) hsl(261, 68%, 84%)

#2680C2 #DCEEFB #653CAD #EAE2F8

hsl(205, 67%, 45%) hsl(205, 79%, 92%) hsl(262, 48%, 46%) hsl(262, 61%, 93%)
Refactoring UI: Color Palettes

Red Yellow

#610404 #D64545 #513C06 #F7D070

hsl(360, 92%, 20%) hsl(360, 64%, 55%) hsl(43, 86%, 17%) hsl(43, 89%, 70%)

#780A0A #E66A6A #7C5E10 #F9DA8B

hsl(360, 85%, 25%) hsl(360, 71%, 66%) hsl(43, 77%, 27%) hsl(43, 90%, 76%)

#911111 #F29B9B #A27C1A #F8E3A3

hsl(360, 79%, 32%) hsl(360, 77%, 78%) hsl(43, 72%, 37%) hsl(45, 86%, 81%)

#A61B1B #FACDCD #C99A2E #FCEFC7

hsl(360, 72%, 38%) hsl(360, 82%, 89%) hsl(42, 63%, 48%) hsl(45, 90%, 88%)

#BA2525 #FFEEEE #E9B949 #FFFAEB

hsl(360, 67%, 44%) hsl(360, 100%, 97%) hsl(42, 78%, 60%) hsl(45, 100%, 96%)
Refactoring UI: Color Palettes

Palette 5
Refactoring UI: Color Palettes

Primary / Neutrals
These are the colors you will use the most and will make up the majority
of your UI. Use them for most of your text, backgrounds, and borders,
and use the higher contrast shades for your primary actions.

Blue Grey

#102A43 #243B53 #334E68 #486581 #627D98

hsl(209, 61%, 16%) hsl(211, 39%, 23%) hsl(209, 34%, 30%) hsl(209, 28%, 39%) hsl(210, 22%, 49%)

#829AB1 #9FB3C8 #BCCCDC #D9E2EC #F0F4F8

hsl(209, 23%, 60%) hsl(211, 27%, 70%) hsl(210, 31%, 80%) hsl(212, 33%, 89%) hsl(210, 36%, 96%)
Refactoring UI: Color Palettes

Supporting
These colors should be used fairly conservatively throughout your UI to
avoid overpowering your primary colors. Use them when you need an
element to stand out, or to reinforce things like error states or positive
trends with the appropriate semantic color.

Light Blue (Vivid) Cyan

#035388 #40C3F7 #044E54 #38BEC9

hsl(204, 96%, 27%) hsl(197, 92%, 61%) hsl(184, 91%, 17%) hsl(185, 57%, 50%)

#0B69A3 #5ED0FA #0A6C74 #54D1DB

hsl(203, 87%, 34%) hsl(196, 94%, 67%) hsl(185, 84%, 25%) hsl(184, 65%, 59%)

#127FBF #81DEFD #0E7C86 #87EAF2

hsl(202, 83%, 41%) hsl(195, 97%, 75%) hsl(185, 81%, 29%) hsl(184, 80%, 74%)

#1992D4 #B3ECFF #14919B #BEF8FD

hsl(201, 79%, 46%) hsl(195, 100%, 85%) hsl(184, 77%, 34%) hsl(185, 94%, 87%)

#2BB0ED #E3F8FF #2CB1BC #E0FCFF

hsl(199, 84%, 55%) hsl(195, 100%, 95%) hsl(185, 62%, 45%) hsl(186, 100%, 94%)
Refactoring UI: Color Palettes

Pink (Vivid) Red (Vivid)

#620042 #E8368F #610316 #EF4E4E

hsl(320, 100%, 19%) hsl(330, 79%, 56%) hsl(348, 94%, 20%) hsl(360, 83%, 62%)

#870557 #F364A2 #8A041A #F86A6A

hsl(322, 93%, 27%) hsl(334, 86%, 67%) hsl(350, 94%, 28%) hsl(360, 91%, 69%)

#A30664 #FF8CBA #AB091E #FF9B9B

hsl(324, 93%, 33%) hsl(336, 100%, 77%) hsl(352, 90%, 35%) hsl(360, 100%, 80%)

#BC0A6F #FFB8D2 #CF1124 #FFBDBD

hsl(326, 90%, 39%) hsl(338, 100%, 86%) hsl(354, 85%, 44%) hsl(360, 100%, 87%)

#DA127D #FFE3EC #E12D39 #FFE3E3

hsl(328, 85%, 46%) hsl(341, 100%, 95%) hsl(356, 75%, 53%) hsl(360, 100%, 95%)

Yellow (Vivid) Teal

#8D2B0B #F7C948 #014D40 #3EBD93

hsl(15, 86%, 30%) hsl(44, 92%, 63%) hsl(170, 97%, 15%) hsl(160, 51%, 49%)

#B44D12 #FADB5F #0C6B58 #65D6AD

hsl(22, 82%, 39%) hsl(48, 94%, 68%) hsl(168, 80%, 23%) hsl(158, 58%, 62%)

#CB6E17 #FCE588 #147D64 #8EEDC7

hsl(29, 80%, 44%) hsl(48, 95%, 76%) hsl(166, 72%, 28%) hsl(156, 73%, 74%)

#DE911D #FFF3C4 #199473 #C6F7E2

hsl(36, 77%, 49%) hsl(48, 100%, 88%) hsl(164, 71%, 34%) hsl(154, 75%, 87%)

#F0B429 #FFFBEA #27AB83 #EFFCF6

hsl(42, 87%, 55%) hsl(49, 100%, 96%) hsl(162, 63%, 41%) hsl(152, 68%, 96%)
Refactoring UI: Color Palettes

Palette 6
Refactoring UI: Color Palettes

Primary
These are the splashes of color that should appear the most in your UI,
and are the ones that determine the overall "look" of the site. Use these
for things like primary actions, links, navigation items, icons, accent
borders, or text you want to emphasize.

Red

#610404 #780A0A #911111 #A61B1B #BA2525

hsl(360, 92%, 20%) hsl(360, 85%, 25%) hsl(360, 79%, 32%) hsl(360, 72%, 38%) hsl(360, 67%, 44%)

#D64545 #E66A6A #F29B9B #FACDCD #FFEEEE

hsl(360, 64%, 55%) hsl(360, 71%, 66%) hsl(360, 77%, 78%) hsl(360, 82%, 89%) hsl(360, 100%, 97%)
Refactoring UI: Color Palettes

Yellow (Vivid)

#8D2B0B #B44D12 #CB6E17 #DE911D #F0B429

hsl(15, 86%, 30%) hsl(22, 82%, 39%) hsl(29, 80%, 44%) hsl(36, 77%, 49%) hsl(42, 87%, 55%)

#F7C948 #FADB5F #FCE588 #FFF3C4 #FFFBEA

hsl(44, 92%, 63%) hsl(48, 94%, 68%) hsl(48, 95%, 76%) hsl(48, 100%, 88%) hsl(49, 100%, 96%)
Refactoring UI: Color Palettes

Neutrals
These are the colors you will use the most and will make up the majority
of your UI. Use them for most of your text, backgrounds, and borders,
as well as for things like secondary buttons and links.

Warm Grey

#27241D #423D33 #504A40 #625D52 #857F72

hsl(42, 15%, 13%) hsl(40, 13%, 23%) hsl(37, 11%, 28%) hsl(41, 9%, 35%) hsl(41, 8%, 48%)

#A39E93 #B8B2A7 #D3CEC4 #E8E6E1 #FAF9F7

hsl(41, 8%, 61%) hsl(39, 11%, 69%) hsl(40, 15%, 80%) hsl(43, 13%, 90%) hsl(40, 23%, 97%)
Refactoring UI: Color Palettes

Supporting
These colors should be used fairly conservatively throughout your UI to
avoid overpowering your primary colors. Use them when you need an
element to stand out, or to reinforce things like error states or positive
trends with the appropriate semantic color.

Cyan Lime Green

#044E54 #38BEC9 #2B4005 #94C843

hsl(184, 91%, 17%) hsl(185, 57%, 50%) hsl(81, 86%, 14%) hsl(83, 55%, 52%)

#0A6C74 #54D1DB #42600C #ABDB5E

hsl(185, 84%, 25%) hsl(184, 65%, 59%) hsl(81, 78%, 21%) hsl(83, 63%, 61%)

#0E7C86 #87EAF2 #507712 #C7EA8F

hsl(185, 81%, 29%) hsl(184, 80%, 74%) hsl(83, 74%, 27%) hsl(83, 68%, 74%)

#14919B #BEF8FD #63921A #E2F7C2

hsl(184, 77%, 34%) hsl(185, 94%, 87%) hsl(83, 70%, 34%) hsl(84, 77%, 86%)

#2CB1BC #E0FCFF #7BB026 #F2FDE0

hsl(185, 62%, 45%) hsl(186, 100%, 94%) hsl(83, 64%, 42%) hsl(83, 88%, 94%)
Refactoring UI: Color Palettes

Palette 7
Refactoring UI: Color Palettes

Primary
These are the splashes of color that should appear the most in your UI,
and are the ones that determine the overall "look" of the site. Use these
for things like primary actions, links, navigation items, icons, accent
borders, or text you want to emphasize.

Cyan

#044E54 #0A6C74 #0E7C86 #14919B #2CB1BC

hsl(184, 91%, 17%) hsl(185, 84%, 25%) hsl(185, 81%, 29%) hsl(184, 77%, 34%) hsl(185, 62%, 45%)

#38BEC9 #54D1DB #87EAF2 #BEF8FD #E0FCFF

hsl(185, 57%, 50%) hsl(184, 65%, 59%) hsl(184, 80%, 74%) hsl(185, 94%, 87%) hsl(186, 100%, 94%)
Refactoring UI: Color Palettes

Neutrals
These are the colors you will use the most and will make up the majority
of your UI. Use them for most of your text, backgrounds, and borders,
as well as for things like secondary buttons and links.

Warm Grey

#27241D #423D33 #504A40 #625D52 #857F72

hsl(42, 15%, 13%) hsl(40, 13%, 23%) hsl(37, 11%, 28%) hsl(41, 9%, 35%) hsl(41, 8%, 48%)

#A39E93 #B8B2A7 #D3CEC4 #E8E6E1 #FAF9F7

hsl(41, 8%, 61%) hsl(39, 11%, 69%) hsl(40, 15%, 80%) hsl(43, 13%, 90%) hsl(40, 23%, 97%)
Refactoring UI: Color Palettes

Supporting
These colors should be used fairly conservatively throughout your UI to
avoid overpowering your primary colors. Use them when you need an
element to stand out, or to reinforce things like error states or positive
trends with the appropriate semantic color.

Blue Red

#003E6B #4098D7 #610404 #D64545

hsl(205, 100%, 21%) hsl(205, 65%, 55%) hsl(360, 92%, 20%) hsl(360, 64%, 55%)

#0A558C #62B0E8 #780A0A #E66A6A

hsl(205, 87%, 29%) hsl(205, 74%, 65%) hsl(360, 85%, 25%) hsl(360, 71%, 66%)

#0F609B #84C5F4 #911111 #F29B9B

hsl(205, 82%, 33%) hsl(205, 84%, 74%) hsl(360, 79%, 32%) hsl(360, 77%, 78%)

#186FAF #B6E0FE #A61B1B #FACDCD

hsl(205, 76%, 39%) hsl(205, 97%, 85%) hsl(360, 72%, 38%) hsl(360, 82%, 89%)

#2680C2 #DCEEFB #BA2525 #FFEEEE

hsl(205, 67%, 45%) hsl(205, 79%, 92%) hsl(360, 67%, 44%) hsl(360, 100%, 97%)
Refactoring UI: Color Palettes

Yellow Teal

#513C06 #F7D070 #014D40 #3EBD93

hsl(43, 86%, 17%) hsl(43, 89%, 70%) hsl(170, 97%, 15%) hsl(160, 51%, 49%)

#7C5E10 #F9DA8B #0C6B58 #65D6AD

hsl(43, 77%, 27%) hsl(43, 90%, 76%) hsl(168, 80%, 23%) hsl(158, 58%, 62%)

#A27C1A #F8E3A3 #147D64 #8EEDC7

hsl(43, 72%, 37%) hsl(45, 86%, 81%) hsl(166, 72%, 28%) hsl(156, 73%, 74%)

#C99A2E #FCEFC7 #199473 #C6F7E2

hsl(42, 63%, 48%) hsl(45, 90%, 88%) hsl(164, 71%, 34%) hsl(154, 75%, 87%)

#E9B949 #FFFAEB #27AB83 #EFFCF6

hsl(42, 78%, 60%) hsl(45, 100%, 96%) hsl(162, 63%, 41%) hsl(152, 68%, 96%)
Refactoring UI: Color Palettes

Palette 8
Refactoring UI: Color Palettes

Primary
These are the splashes of color that should appear the most in your UI,
and are the ones that determine the overall "look" of the site. Use these
for things like primary actions, links, navigation items, icons, accent
borders, or text you want to emphasize.

Blue (Vivid)

#002159 #01337D #03449E #0552B5 #0967D2

hsl(218, 100%, 17%) hsl(216, 98%, 25%) hsl(215, 96%, 32%) hsl(214, 95%, 36%) hsl(212, 92%, 43%)

#2186EB #47A3F3 #7CC4FA #BAE3FF #E6F6FF

hsl(210, 83%, 53%) hsl(208, 88%, 62%) hsl(206, 93%, 73%) hsl(204, 100%, 86%) hsl(202, 100%, 95%)
Refactoring UI: Color Palettes

Neutrals
These are the colors you will use the most and will make up the majority
of your UI. Use them for most of your text, backgrounds, and borders,
as well as for things like secondary buttons and links.

Cool Grey

#1F2933 #323F4B #3E4C59 #52606D #616E7C

hsl(210, 24%, 16%) hsl(209, 20%, 25%) hsl(209, 18%, 30%) hsl(209, 14%, 37%) hsl(211, 12%, 43%)

#7B8794 #9AA5B1 #CBD2D9 #E4E7EB #F5F7FA

hsl(211, 10%, 53%) hsl(211, 13%, 65%) hsl(210, 16%, 82%) hsl(214, 15%, 91%) hsl(216, 33%, 97%)
Refactoring UI: Color Palettes

Supporting
These colors should be used fairly conservatively throughout your UI to
avoid overpowering your primary colors. Use them when you need an
element to stand out, or to reinforce things like error states or positive
trends with the appropriate semantic color.

Cyan (Vivid) Orange (Vivid)

#05606E #3AE7E1 #841003 #F9703E

hsl(188, 91%, 23%) hsl(178, 78%, 57%) hsl(6, 96%, 26%) hsl(16, 94%, 61%)

#07818F #62F4EB #AD1D07 #FF9466

hsl(186, 91%, 29%) hsl(176, 87%, 67%) hsl(8, 92%, 35%) hsl(18, 100%, 70%)

#099AA4 #92FDF2 #C52707 #FFB088

hsl(184, 90%, 34%) hsl(174, 96%, 78%) hsl(10, 93%, 40%) hsl(20, 100%, 77%)

#0FB5BA #C1FEF6 #DE3A11 #FFD0B5

hsl(182, 85%, 39%) hsl(172, 97%, 88%) hsl(12, 86%, 47%) hsl(22, 100%, 85%)

#1CD4D4 #E1FCF8 #F35627 #FFE8D9

hsl(180, 77%, 47%) hsl(171, 82%, 94%) hsl(14, 89%, 55%) hsl(24, 100%, 93%)
Refactoring UI: Color Palettes

Red (Vivid) Yellow (Vivid)

#610316 #EF4E4E #8D2B0B #F7C948

hsl(348, 94%, 20%) hsl(360, 83%, 62%) hsl(15, 86%, 30%) hsl(44, 92%, 63%)

#8A041A #F86A6A #B44D12 #FADB5F

hsl(350, 94%, 28%) hsl(360, 91%, 69%) hsl(22, 82%, 39%) hsl(48, 94%, 68%)

#AB091E #FF9B9B #CB6E17 #FCE588

hsl(352, 90%, 35%) hsl(360, 100%, 80%) hsl(29, 80%, 44%) hsl(48, 95%, 76%)

#CF1124 #FFBDBD #DE911D #FFF3C4

hsl(354, 85%, 44%) hsl(360, 100%, 87%) hsl(36, 77%, 49%) hsl(48, 100%, 88%)

#E12D39 #FFE3E3 #F0B429 #FFFBEA

hsl(356, 75%, 53%) hsl(360, 100%, 95%) hsl(42, 87%, 55%) hsl(49, 100%, 96%)
Refactoring UI: Color Palettes

Palette 9
Refactoring UI: Color Palettes

Primary
These are the splashes of color that should appear the most in your UI,
and are the ones that determine the overall "look" of the site. Use these
for things like primary actions, links, navigation items, icons, accent
borders, or text you want to emphasize.

Light Blue (Vivid)

#035388 #0B69A3 #127FBF #1992D4 #2BB0ED

hsl(204, 96%, 27%) hsl(203, 87%, 34%) hsl(202, 83%, 41%) hsl(201, 79%, 46%) hsl(199, 84%, 55%)

#40C3F7 #5ED0FA #81DEFD #B3ECFF #E3F8FF

hsl(197, 92%, 61%) hsl(196, 94%, 67%) hsl(195, 97%, 75%) hsl(195, 100%, 85%) hsl(195, 100%, 95%)
Refactoring UI: Color Palettes

Neutrals
These are the colors you will use the most and will make up the majority
of your UI. Use them for most of your text, backgrounds, and borders,
as well as for things like secondary buttons and links.

Cool Grey

#1F2933 #323F4B #3E4C59 #52606D #616E7C

hsl(210, 24%, 16%) hsl(209, 20%, 25%) hsl(209, 18%, 30%) hsl(209, 14%, 37%) hsl(211, 12%, 43%)

#7B8794 #9AA5B1 #CBD2D9 #E4E7EB #F5F7FA

hsl(211, 10%, 53%) hsl(211, 13%, 65%) hsl(210, 16%, 82%) hsl(214, 15%, 91%) hsl(216, 33%, 97%)
Refactoring UI: Color Palettes

Supporting
These colors should be used fairly conservatively throughout your UI to
avoid overpowering your primary colors. Use them when you need an
element to stand out, or to reinforce things like error states or positive
trends with the appropriate semantic color.

Pink (Vivid) Red (Vivid)

#620042 #E8368F #610316 #EF4E4E

hsl(320, 100%, 19%) hsl(330, 79%, 56%) hsl(348, 94%, 20%) hsl(360, 83%, 62%)

#870557 #F364A2 #8A041A #F86A6A

hsl(322, 93%, 27%) hsl(334, 86%, 67%) hsl(350, 94%, 28%) hsl(360, 91%, 69%)

#A30664 #FF8CBA #AB091E #FF9B9B

hsl(324, 93%, 33%) hsl(336, 100%, 77%) hsl(352, 90%, 35%) hsl(360, 100%, 80%)

#BC0A6F #FFB8D2 #CF1124 #FFBDBD

hsl(326, 90%, 39%) hsl(338, 100%, 86%) hsl(354, 85%, 44%) hsl(360, 100%, 87%)

#DA127D #FFE3EC #E12D39 #FFE3E3

hsl(328, 85%, 46%) hsl(341, 100%, 95%) hsl(356, 75%, 53%) hsl(360, 100%, 95%)
Refactoring UI: Color Palettes

Yellow (Vivid) Teal

#8D2B0B #F7C948 #014D40 #3EBD93

hsl(15, 86%, 30%) hsl(44, 92%, 63%) hsl(170, 97%, 15%) hsl(160, 51%, 49%)

#B44D12 #FADB5F #0C6B58 #65D6AD

hsl(22, 82%, 39%) hsl(48, 94%, 68%) hsl(168, 80%, 23%) hsl(158, 58%, 62%)

#CB6E17 #FCE588 #147D64 #8EEDC7

hsl(29, 80%, 44%) hsl(48, 95%, 76%) hsl(166, 72%, 28%) hsl(156, 73%, 74%)

#DE911D #FFF3C4 #199473 #C6F7E2

hsl(36, 77%, 49%) hsl(48, 100%, 88%) hsl(164, 71%, 34%) hsl(154, 75%, 87%)

#F0B429 #FFFBEA #27AB83 #EFFCF6

hsl(42, 87%, 55%) hsl(49, 100%, 96%) hsl(162, 63%, 41%) hsl(152, 68%, 96%)
Refactoring UI: Color Palettes

Palette 10
Refactoring UI: Color Palettes

Primary
These are the splashes of color that should appear the most in your UI,
and are the ones that determine the overall "look" of the site. Use these
for things like primary actions, links, navigation items, icons, accent
borders, or text you want to emphasize.

Indigo

#19216C #2D3A8C #35469C #4055A8 #4C63B6

hsl(234, 62%, 26%) hsl(232, 51%, 36%) hsl(230, 49%, 41%) hsl(228, 45%, 45%) hsl(227, 42%, 51%)

#647ACB #7B93DB #98AEEB #BED0F7 #E0E8F9

hsl(227, 50%, 59%) hsl(225, 57%, 67%) hsl(224, 67%, 76%) hsl(221, 78%, 86%) hsl(221, 68%, 93%)
Refactoring UI: Color Palettes

Neutrals
These are the colors you will use the most and will make up the majority
of your UI. Use them for most of your text, backgrounds, and borders,
as well as for things like secondary buttons and links.

Cool Grey

#1F2933 #323F4B #3E4C59 #52606D #616E7C

hsl(210, 24%, 16%) hsl(209, 20%, 25%) hsl(209, 18%, 30%) hsl(209, 14%, 37%) hsl(211, 12%, 43%)

#7B8794 #9AA5B1 #CBD2D9 #E4E7EB #F5F7FA

hsl(211, 10%, 53%) hsl(211, 13%, 65%) hsl(210, 16%, 82%) hsl(214, 15%, 91%) hsl(216, 33%, 97%)
Refactoring UI: Color Palettes

Supporting
These colors should be used fairly conservatively throughout your UI to
avoid overpowering your primary colors. Use them when you need an
element to stand out, or to reinforce things like error states or positive
trends with the appropriate semantic color.

Light Blue (Vivid) Red (Vivid)

#035388 #40C3F7 #610316 #EF4E4E

hsl(204, 96%, 27%) hsl(197, 92%, 61%) hsl(348, 94%, 20%) hsl(360, 83%, 62%)

#0B69A3 #5ED0FA #8A041A #F86A6A

hsl(203, 87%, 34%) hsl(196, 94%, 67%) hsl(350, 94%, 28%) hsl(360, 91%, 69%)

#127FBF #81DEFD #AB091E #FF9B9B

hsl(202, 83%, 41%) hsl(195, 97%, 75%) hsl(352, 90%, 35%) hsl(360, 100%, 80%)

#1992D4 #B3ECFF #CF1124 #FFBDBD

hsl(201, 79%, 46%) hsl(195, 100%, 85%) hsl(354, 85%, 44%) hsl(360, 100%, 87%)

#2BB0ED #E3F8FF #E12D39 #FFE3E3

hsl(199, 84%, 55%) hsl(195, 100%, 95%) hsl(356, 75%, 53%) hsl(360, 100%, 95%)
Refactoring UI: Color Palettes

Yellow (Vivid) Teal

#8D2B0B #F7C948 #014D40 #3EBD93

hsl(15, 86%, 30%) hsl(44, 92%, 63%) hsl(170, 97%, 15%) hsl(160, 51%, 49%)

#B44D12 #FADB5F #0C6B58 #65D6AD

hsl(22, 82%, 39%) hsl(48, 94%, 68%) hsl(168, 80%, 23%) hsl(158, 58%, 62%)

#CB6E17 #FCE588 #147D64 #8EEDC7

hsl(29, 80%, 44%) hsl(48, 95%, 76%) hsl(166, 72%, 28%) hsl(156, 73%, 74%)

#DE911D #FFF3C4 #199473 #C6F7E2

hsl(36, 77%, 49%) hsl(48, 100%, 88%) hsl(164, 71%, 34%) hsl(154, 75%, 87%)

#F0B429 #FFFBEA #27AB83 #EFFCF6

hsl(42, 87%, 55%) hsl(49, 100%, 96%) hsl(162, 63%, 41%) hsl(152, 68%, 96%)
Refactoring UI: Color Palettes

Palette 11
Refactoring UI: Color Palettes

Primary
These are the splashes of color that should appear the most in your UI,
and are the ones that determine the overall "look" of the site. Use these
for things like primary actions, links, navigation items, icons, accent
borders, or text you want to emphasize.

Pink (Vivid)

#620042 #870557 #A30664 #BC0A6F #DA127D

hsl(320, 100%, 19%) hsl(322, 93%, 27%) hsl(324, 93%, 33%) hsl(326, 90%, 39%) hsl(328, 85%, 46%)

#E8368F #F364A2 #FF8CBA #FFB8D2 #FFE3EC

hsl(330, 79%, 56%) hsl(334, 86%, 67%) hsl(336, 100%, 77%) hsl(338, 100%, 86%) hsl(341, 100%, 95%)
Refactoring UI: Color Palettes

Neutrals
These are the colors you will use the most and will make up the majority
of your UI. Use them for most of your text, backgrounds, and borders,
as well as for things like secondary buttons and links.

Cool Grey

#1F2933 #323F4B #3E4C59 #52606D #616E7C

hsl(210, 24%, 16%) hsl(209, 20%, 25%) hsl(209, 18%, 30%) hsl(209, 14%, 37%) hsl(211, 12%, 43%)

#7B8794 #9AA5B1 #CBD2D9 #E4E7EB #F5F7FA

hsl(211, 10%, 53%) hsl(211, 13%, 65%) hsl(210, 16%, 82%) hsl(214, 15%, 91%) hsl(216, 33%, 97%)
Refactoring UI: Color Palettes

Supporting
These colors should be used fairly conservatively throughout your UI to
avoid overpowering your primary colors. Use them when you need an
element to stand out, or to reinforce things like error states or positive
trends with the appropriate semantic color.

Purple (Vivid) Cyan (Vivid)

#44056E #9446ED #05606E #3AE7E1

hsl(276, 91%, 23%) hsl(268, 82%, 60%) hsl(188, 91%, 23%) hsl(178, 78%, 57%)

#580A94 #A368FC #07818F #62F4EB

hsl(274, 87%, 31%) hsl(264, 96%, 70%) hsl(186, 91%, 29%) hsl(176, 87%, 67%)

#690CB0 #B990FF #099AA4 #92FDF2

hsl(274, 87%, 37%) hsl(262, 100%, 78%) hsl(184, 90%, 34%) hsl(174, 96%, 78%)

#7A0ECC #DAC4FF #0FB5BA #C1FEF6

hsl(274, 87%, 43%) hsl(262, 100%, 88%) hsl(182, 85%, 39%) hsl(172, 97%, 88%)

#8719E0 #F2EBFE #1CD4D4 #E1FCF8

hsl(273, 80%, 49%) hsl(262, 90%, 96%) hsl(180, 77%, 47%) hsl(171, 82%, 94%)
Refactoring UI: Color Palettes

Red (Vivid) Yellow (Vivid)

#610316 #EF4E4E #8D2B0B #F7C948

hsl(348, 94%, 20%) hsl(360, 83%, 62%) hsl(15, 86%, 30%) hsl(44, 92%, 63%)

#8A041A #F86A6A #B44D12 #FADB5F

hsl(350, 94%, 28%) hsl(360, 91%, 69%) hsl(22, 82%, 39%) hsl(48, 94%, 68%)

#AB091E #FF9B9B #CB6E17 #FCE588

hsl(352, 90%, 35%) hsl(360, 100%, 80%) hsl(29, 80%, 44%) hsl(48, 95%, 76%)

#CF1124 #FFBDBD #DE911D #FFF3C4

hsl(354, 85%, 44%) hsl(360, 100%, 87%) hsl(36, 77%, 49%) hsl(48, 100%, 88%)

#E12D39 #FFE3E3 #F0B429 #FFFBEA

hsl(356, 75%, 53%) hsl(360, 100%, 95%) hsl(42, 87%, 55%) hsl(49, 100%, 96%)
Refactoring UI: Color Palettes

Palette 12
Refactoring UI: Color Palettes

Primary
These are the splashes of color that should appear the most in your UI,
and are the ones that determine the overall "look" of the site. Use these
for things like primary actions, links, navigation items, icons, accent
borders, or text you want to emphasize.

Green

#05400A #0E5814 #207227 #2F8132 #3F9142

hsl(125, 86%, 14%) hsl(125, 73%, 20%) hsl(125, 56%, 29%) hsl(122, 47%, 35%) hsl(122, 39%, 41%)

#57AE5B #7BC47F #A3D9A5 #C1EAC5 #E3F9E5

hsl(123, 35%, 51%) hsl(123, 38%, 63%) hsl(122, 42%, 75%) hsl(126, 49%, 84%) hsl(125, 65%, 93%)
Refactoring UI: Color Palettes

Neutrals
These are the colors you will use the most and will make up the majority
of your UI. Use them for most of your text, backgrounds, and borders,
as well as for things like secondary buttons and links.

Grey

#222222 #3B3B3B #515151 #626262 #7E7E7E

hsl(0, 0%, 13%) hsl(0, 0%, 23%) hsl(0, 0%, 32%) hsl(0, 0%, 38%) hsl(0, 0%, 49%)

#9E9E9E #B1B1B1 #CFCFCF #E1E1E1 #F7F7F7

hsl(0, 0%, 62%) hsl(0, 0%, 69%) hsl(0, 0%, 81%) hsl(0, 0%, 88%) hsl(0, 0%, 97%)
Refactoring UI: Color Palettes

Supporting
These colors should be used fairly conservatively throughout your UI to
avoid overpowering your primary colors. Use them when you need an
element to stand out, or to reinforce things like error states or positive
trends with the appropriate semantic color.

Purple Red

#240754 #724BB7 #610404 #D64545

hsl(263, 85%, 18%) hsl(262, 43%, 51%) hsl(360, 92%, 20%) hsl(360, 64%, 55%)

#34126F #8662C7 #780A0A #E66A6A

hsl(262, 72%, 25%) hsl(261, 47%, 58%) hsl(360, 85%, 25%) hsl(360, 71%, 66%)

#421987 #A081D9 #911111 #F29B9B

hsl(262, 69%, 31%) hsl(261, 54%, 68%) hsl(360, 79%, 32%) hsl(360, 77%, 78%)

#51279B #CFBCF2 #A61B1B #FACDCD

hsl(262, 60%, 38%) hsl(261, 68%, 84%) hsl(360, 72%, 38%) hsl(360, 82%, 89%)

#653CAD #EAE2F8 #BA2525 #FFEEEE

hsl(262, 48%, 46%) hsl(262, 61%, 93%) hsl(360, 67%, 44%) hsl(360, 100%, 97%)
Refactoring UI: Color Palettes

Yellow

#513C06 #F7D070
hsl(43, 86%, 17%) hsl(43, 89%, 70%)

#7C5E10 #F9DA8B
hsl(43, 77%, 27%) hsl(43, 90%, 76%)

#A27C1A #F8E3A3
hsl(43, 72%, 37%) hsl(45, 86%, 81%)

#C99A2E #FCEFC7
hsl(42, 63%, 48%) hsl(45, 90%, 88%)

#E9B949 #FFFAEB
hsl(42, 78%, 60%) hsl(45, 100%, 96%)
Refactoring UI: Color Palettes

Palette 13
Refactoring UI: Color Palettes

Primary
These are the splashes of color that should appear the most in your UI,
and are the ones that determine the overall "look" of the site. Use these
for things like primary actions, links, navigation items, icons, accent
borders, or text you want to emphasize.

Yellow (Vivid)

#8D2B0B #B44D12 #CB6E17 #DE911D #F0B429

hsl(15, 86%, 30%) hsl(22, 82%, 39%) hsl(29, 80%, 44%) hsl(36, 77%, 49%) hsl(42, 87%, 55%)

#F7C948 #FADB5F #FCE588 #FFF3C4 #FFFBEA

hsl(44, 92%, 63%) hsl(48, 94%, 68%) hsl(48, 95%, 76%) hsl(48, 100%, 88%) hsl(49, 100%, 96%)
Refactoring UI: Color Palettes

Light Blue (Vivid)

#035388 #0B69A3 #127FBF #1992D4 #2BB0ED

hsl(204, 96%, 27%) hsl(203, 87%, 34%) hsl(202, 83%, 41%) hsl(201, 79%, 46%) hsl(199, 84%, 55%)

#40C3F7 #5ED0FA #81DEFD #B3ECFF #E3F8FF

hsl(197, 92%, 61%) hsl(196, 94%, 67%) hsl(195, 97%, 75%) hsl(195, 100%, 85%) hsl(195, 100%, 95%)
Refactoring UI: Color Palettes

Neutrals
These are the colors you will use the most and will make up the majority
of your UI. Use them for most of your text, backgrounds, and borders,
as well as for things like secondary buttons and links.

Grey

#222222 #3B3B3B #515151 #626262 #7E7E7E

hsl(0, 0%, 13%) hsl(0, 0%, 23%) hsl(0, 0%, 32%) hsl(0, 0%, 38%) hsl(0, 0%, 49%)

#9E9E9E #B1B1B1 #CFCFCF #E1E1E1 #F7F7F7

hsl(0, 0%, 62%) hsl(0, 0%, 69%) hsl(0, 0%, 81%) hsl(0, 0%, 88%) hsl(0, 0%, 97%)
Refactoring UI: Color Palettes

Supporting
These colors should be used fairly conservatively throughout your UI to
avoid overpowering your primary colors. Use them when you need an
element to stand out, or to reinforce things like error states or positive
trends with the appropriate semantic color.

Red (Vivid) Teal

#610316 #EF4E4E #014D40 #3EBD93

hsl(348, 94%, 20%) hsl(360, 83%, 62%) hsl(170, 97%, 15%) hsl(160, 51%, 49%)

#8A041A #F86A6A #0C6B58 #65D6AD

hsl(350, 94%, 28%) hsl(360, 91%, 69%) hsl(168, 80%, 23%) hsl(158, 58%, 62%)

#AB091E #FF9B9B #147D64 #8EEDC7

hsl(352, 90%, 35%) hsl(360, 100%, 80%) hsl(166, 72%, 28%) hsl(156, 73%, 74%)

#CF1124 #FFBDBD #199473 #C6F7E2

hsl(354, 85%, 44%) hsl(360, 100%, 87%) hsl(164, 71%, 34%) hsl(154, 75%, 87%)

#E12D39 #FFE3E3 #27AB83 #EFFCF6

hsl(356, 75%, 53%) hsl(360, 100%, 95%) hsl(162, 63%, 41%) hsl(152, 68%, 96%)
Refactoring UI: Color Palettes

Palette 14
Refactoring UI: Color Palettes

Primary
These are the splashes of color that should appear the most in your UI,
and are the ones that determine the overall "look" of the site. Use these
for things like primary actions, links, navigation items, icons, accent
borders, or text you want to emphasize.

Orange

#572508 #77340D #8C3D10 #AB4E19 #C65D21

hsl(22, 83%, 19%) hsl(22, 80%, 26%) hsl(22, 79%, 31%) hsl(22, 74%, 38%) hsl(22, 71%, 45%)

#E67635 #EF8E58 #FAB38B #FFD3BA #FFEFE6

hsl(22, 78%, 55%) hsl(21, 83%, 64%) hsl(22, 92%, 76%) hsl(22, 100%, 86%) hsl(22, 100%, 95%)
Refactoring UI: Color Palettes

Lime Green

#2B4005 #42600C #507712 #63921A #7BB026

hsl(81, 86%, 14%) hsl(81, 78%, 21%) hsl(83, 74%, 27%) hsl(83, 70%, 34%) hsl(83, 64%, 42%)

#94C843 #ABDB5E #C7EA8F #E2F7C2 #F2FDE0

hsl(83, 55%, 52%) hsl(83, 63%, 61%) hsl(83, 68%, 74%) hsl(84, 77%, 86%) hsl(83, 88%, 94%)
Refactoring UI: Color Palettes

Neutrals
These are the colors you will use the most and will make up the majority
of your UI. Use them for most of your text, backgrounds, and borders,
as well as for things like secondary buttons and links.

Grey

#222222 #3B3B3B #515151 #626262 #7E7E7E

hsl(0, 0%, 13%) hsl(0, 0%, 23%) hsl(0, 0%, 32%) hsl(0, 0%, 38%) hsl(0, 0%, 49%)

#9E9E9E #B1B1B1 #CFCFCF #E1E1E1 #F7F7F7

hsl(0, 0%, 62%) hsl(0, 0%, 69%) hsl(0, 0%, 81%) hsl(0, 0%, 88%) hsl(0, 0%, 97%)
Refactoring UI: Color Palettes

Supporting
These colors should be used fairly conservatively throughout your UI to
avoid overpowering your primary colors. Use them when you need an
element to stand out, or to reinforce things like error states or positive
trends with the appropriate semantic color.

Light Blue Red

#0B4F71 #55AAD4 #610404 #D64545

hsl(200, 82%, 24%) hsl(200, 60%, 58%) hsl(360, 92%, 20%) hsl(360, 64%, 55%)

#166086 #7CC1E4 #780A0A #E66A6A

hsl(200, 72%, 31%) hsl(200, 66%, 69%) hsl(360, 85%, 25%) hsl(360, 71%, 66%)

#1D6F98 #A7D8F0 #911111 #F29B9B

hsl(200, 68%, 35%) hsl(200, 71%, 80%) hsl(360, 79%, 32%) hsl(360, 77%, 78%)

#2D83AE #D1EEFC #A61B1B #FACDCD

hsl(200, 59%, 43%) hsl(200, 88%, 90%) hsl(360, 72%, 38%) hsl(360, 82%, 89%)

#3994C1 #EBF8FF #BA2525 #FFEEEE

hsl(200, 54%, 49%) hsl(201, 100%, 96%) hsl(360, 67%, 44%) hsl(360, 100%, 97%)
Refactoring UI: Color Palettes

Yellow

#513C06 #F7D070
hsl(43, 86%, 17%) hsl(43, 89%, 70%)

#7C5E10 #F9DA8B
hsl(43, 77%, 27%) hsl(43, 90%, 76%)

#A27C1A #F8E3A3
hsl(43, 72%, 37%) hsl(45, 86%, 81%)

#C99A2E #FCEFC7
hsl(42, 63%, 48%) hsl(45, 90%, 88%)

#E9B949 #FFFAEB
hsl(42, 78%, 60%) hsl(45, 100%, 96%)
Refactoring UI: Color Palettes

Palette 15
Refactoring UI: Color Palettes

Primary
These are the splashes of color that should appear the most in your UI,
and are the ones that determine the overall "look" of the site. Use these
for things like primary actions, links, navigation items, icons, accent
borders, or text you want to emphasize.

Blue

#003E6B #0A558C #0F609B #186FAF #2680C2

hsl(205, 100%, 21%) hsl(205, 87%, 29%) hsl(205, 82%, 33%) hsl(205, 76%, 39%) hsl(205, 67%, 45%)

#4098D7 #62B0E8 #84C5F4 #B6E0FE #DCEEFB

hsl(205, 65%, 55%) hsl(205, 74%, 65%) hsl(205, 84%, 74%) hsl(205, 97%, 85%) hsl(205, 79%, 92%)
Refactoring UI: Color Palettes

Neutrals
These are the colors you will use the most and will make up the majority
of your UI. Use them for most of your text, backgrounds, and borders,
and use the higher contrast shades for your primary actions.

Blue Grey

#102A43 #243B53 #334E68 #486581 #627D98

hsl(209, 61%, 16%) hsl(211, 39%, 23%) hsl(209, 34%, 30%) hsl(209, 28%, 39%) hsl(210, 22%, 49%)

#829AB1 #9FB3C8 #BCCCDC #D9E2EC #F0F4F8

hsl(209, 23%, 60%) hsl(211, 27%, 70%) hsl(210, 31%, 80%) hsl(212, 33%, 89%) hsl(210, 36%, 96%)
Refactoring UI: Color Palettes

Supporting
These colors should be used fairly conservatively throughout your UI to
avoid overpowering your primary colors. Use them when you need an
element to stand out, or to reinforce things like error states or positive
trends with the appropriate semantic color.

Teal (Vivid) Red

#004440 #2DCCA7 #610404 #D64545

hsl(176, 100%, 13%) hsl(166, 64%, 49%) hsl(360, 92%, 20%) hsl(360, 64%, 55%)

#016457 #5FE3C0 #780A0A #E66A6A

hsl(172, 98%, 20%) hsl(164, 70%, 63%) hsl(360, 85%, 25%) hsl(360, 71%, 66%)

#048271 #8EEDD1 #911111 #F29B9B

hsl(172, 94%, 26%) hsl(162, 73%, 74%) hsl(360, 79%, 32%) hsl(360, 77%, 78%)

#079A82 #C6F7E9 #A61B1B #FACDCD

hsl(170, 91%, 32%) hsl(163, 75%, 87%) hsl(360, 72%, 38%) hsl(360, 82%, 89%)

#17B897 #F0FCF9 #BA2525 #FFEEEE

hsl(168, 78%, 41%) hsl(165, 67%, 96%) hsl(360, 67%, 44%) hsl(360, 100%, 97%)
Refactoring UI: Color Palettes

Yellow

#513C06 #F7D070
hsl(43, 86%, 17%) hsl(43, 89%, 70%)

#7C5E10 #F9DA8B
hsl(43, 77%, 27%) hsl(43, 90%, 76%)

#A27C1A #F8E3A3
hsl(43, 72%, 37%) hsl(45, 86%, 81%)

#C99A2E #FCEFC7
hsl(42, 63%, 48%) hsl(45, 90%, 88%)

#E9B949 #FFFAEB
hsl(42, 78%, 60%) hsl(45, 100%, 96%)
Refactoring UI: Color Palettes

Palette 16
Refactoring UI: Color Palettes

Primary
These are the splashes of color that should appear the most in your UI,
and are the ones that determine the overall "look" of the site. Use these
for things like primary actions, links, navigation items, icons, accent
borders, or text you want to emphasize.

Purple

#240754 #34126F #421987 #51279B #653CAD

hsl(263, 85%, 18%) hsl(262, 72%, 25%) hsl(262, 69%, 31%) hsl(262, 60%, 38%) hsl(262, 48%, 46%)

#724BB7 #8662C7 #A081D9 #CFBCF2 #EAE2F8

hsl(262, 43%, 51%) hsl(261, 47%, 58%) hsl(261, 54%, 68%) hsl(261, 68%, 84%) hsl(262, 61%, 93%)
Refactoring UI: Color Palettes

Red (Vivid)

#610316 #8A041A #AB091E #CF1124 #E12D39

hsl(348, 94%, 20%) hsl(350, 94%, 28%) hsl(352, 90%, 35%) hsl(354, 85%, 44%) hsl(356, 75%, 53%)

#EF4E4E #F86A6A #FF9B9B #FFBDBD #FFE3E3

hsl(360, 83%, 62%) hsl(360, 91%, 69%) hsl(360, 100%, 80%) hsl(360, 100%, 87%) hsl(360, 100%, 95%)
Refactoring UI: Color Palettes

Neutrals
These are the colors you will use the most and will make up the majority
of your UI. Use them for most of your text, backgrounds, and borders,
and use the higher contrast shades for your primary actions.

Blue Grey

#102A43 #243B53 #334E68 #486581 #627D98

hsl(209, 61%, 16%) hsl(211, 39%, 23%) hsl(209, 34%, 30%) hsl(209, 28%, 39%) hsl(210, 22%, 49%)

#829AB1 #9FB3C8 #BCCCDC #D9E2EC #F0F4F8

hsl(209, 23%, 60%) hsl(211, 27%, 70%) hsl(210, 31%, 80%) hsl(212, 33%, 89%) hsl(210, 36%, 96%)
Refactoring UI: Color Palettes

Supporting
These colors should be used fairly conservatively throughout your UI to
avoid overpowering your primary colors. Use them when you need an
element to stand out, or to reinforce things like error states or positive
trends with the appropriate semantic color.

Teal (Vivid) Yellow (Vivid)

#004440 #2DCCA7 #8D2B0B #F7C948

hsl(176, 100%, 13%) hsl(166, 64%, 49%) hsl(15, 86%, 30%) hsl(44, 92%, 63%)

#016457 #5FE3C0 #B44D12 #FADB5F

hsl(172, 98%, 20%) hsl(164, 70%, 63%) hsl(22, 82%, 39%) hsl(48, 94%, 68%)

#048271 #8EEDD1 #CB6E17 #FCE588

hsl(172, 94%, 26%) hsl(162, 73%, 74%) hsl(29, 80%, 44%) hsl(48, 95%, 76%)

#079A82 #C6F7E9 #DE911D #FFF3C4

hsl(170, 91%, 32%) hsl(163, 75%, 87%) hsl(36, 77%, 49%) hsl(48, 100%, 88%)

#17B897 #F0FCF9 #F0B429 #FFFBEA

hsl(168, 78%, 41%) hsl(165, 67%, 96%) hsl(42, 87%, 55%) hsl(49, 100%, 96%)
Refactoring UI: Color Palettes

Palette 17
Refactoring UI: Color Palettes

Primary
These are the splashes of color that should appear the most in your UI,
and are the ones that determine the overall "look" of the site. Use these
for things like primary actions, links, navigation items, icons, accent
borders, or text you want to emphasize.

Magenta

#4E0754 #671270 #7C1A87 #90279C #A23DAD

hsl(295, 85%, 18%) hsl(294, 72%, 25%) hsl(294, 68%, 32%) hsl(294, 60%, 38%) hsl(294, 48%, 46%)

#AD4BB8 #BB61C7 #CE80D9 #ECBDF2 #F5E1F7

hsl(294, 43%, 51%) hsl(293, 48%, 58%) hsl(293, 54%, 68%) hsl(293, 67%, 85%) hsl(295, 58%, 93%)
Refactoring UI: Color Palettes

Orange (Vivid)

#F9703E #FF9466 #FFB088 #FFD0B5 #FFE8D9

hsl(16, 94%, 61%) hsl(18, 100%, 70%) hsl(20, 100%, 77%) hsl(22, 100%, 85%) hsl(24, 100%, 93%)

#841003 #AD1D07 #C52707 #DE3A11 #F35627

hsl(6, 96%, 26%) hsl(8, 92%, 35%) hsl(10, 93%, 40%) hsl(12, 86%, 47%) hsl(14, 89%, 55%)
Refactoring UI: Color Palettes

Neutrals
These are the colors you will use the most and will make up the majority
of your UI. Use them for most of your text, backgrounds, and borders,
and use the higher contrast shades for your primary actions.

Blue Grey

#102A43 #243B53 #334E68 #486581 #627D98

hsl(209, 61%, 16%) hsl(211, 39%, 23%) hsl(209, 34%, 30%) hsl(209, 28%, 39%) hsl(210, 22%, 49%)

#829AB1 #9FB3C8 #BCCCDC #D9E2EC #F0F4F8

hsl(209, 23%, 60%) hsl(211, 27%, 70%) hsl(210, 31%, 80%) hsl(212, 33%, 89%) hsl(210, 36%, 96%)
Refactoring UI: Color Palettes

Supporting
These colors should be used fairly conservatively throughout your UI to
avoid overpowering your primary colors. Use them when you need an
element to stand out, or to reinforce things like error states or positive
trends with the appropriate semantic color.

Yellow (Vivid) Red (Vivid)

#8D2B0B #F7C948 #610316 #EF4E4E

hsl(15, 86%, 30%) hsl(44, 92%, 63%) hsl(348, 94%, 20%) hsl(360, 83%, 62%)

#B44D12 #FADB5F #8A041A #F86A6A

hsl(22, 82%, 39%) hsl(48, 94%, 68%) hsl(350, 94%, 28%) hsl(360, 91%, 69%)

#CB6E17 #FCE588 #AB091E #FF9B9B

hsl(29, 80%, 44%) hsl(48, 95%, 76%) hsl(352, 90%, 35%) hsl(360, 100%, 80%)

#DE911D #FFF3C4 #CF1124 #FFBDBD

hsl(36, 77%, 49%) hsl(48, 100%, 88%) hsl(354, 85%, 44%) hsl(360, 100%, 87%)

#F0B429 #FFFBEA #E12D39 #FFE3E3

hsl(42, 87%, 55%) hsl(49, 100%, 96%) hsl(356, 75%, 53%) hsl(360, 100%, 95%)
Refactoring UI: Color Palettes

Green (Vivid)

#014807 #31B237
hsl(125, 97%, 14%) hsl(123, 57%, 45%)

#07600E #51CA58
hsl(125, 86%, 20%) hsl(123, 53%, 55%)

#0E7817 #91E697
hsl(125, 79%, 26%) hsl(124, 63%, 74%)

#0F8613 #C1F2C7
hsl(122, 80%, 29%) hsl(127, 65%, 85%)

#18981D #E3F9E5
hsl(122, 73%, 35%) hsl(125, 65%, 93%)
Refactoring UI: Color Palettes

Palette 18
Refactoring UI: Color Palettes

Primary
These are the splashes of color that should appear the most in your UI,
and are the ones that determine the overall "look" of the site. Use these
for things like primary actions, links, navigation items, icons, accent
borders, or text you want to emphasize.

Purple

#240754 #34126F #421987 #51279B #653CAD

hsl(263, 85%, 18%) hsl(262, 72%, 25%) hsl(262, 69%, 31%) hsl(262, 60%, 38%) hsl(262, 48%, 46%)

#724BB7 #8662C7 #A081D9 #CFBCF2 #EAE2F8

hsl(262, 43%, 51%) hsl(261, 47%, 58%) hsl(261, 54%, 68%) hsl(261, 68%, 84%) hsl(262, 61%, 93%)
Refactoring UI: Color Palettes

Neutrals
These are the colors you will use the most and will make up the majority
of your UI. Use them for most of your text, backgrounds, and borders,
as well as for things like secondary buttons and links.

Warm Grey

#27241D #423D33 #504A40 #625D52 #857F72

hsl(42, 15%, 13%) hsl(40, 13%, 23%) hsl(37, 11%, 28%) hsl(41, 9%, 35%) hsl(41, 8%, 48%)

#A39E93 #B8B2A7 #D3CEC4 #E8E6E1 #FAF9F7

hsl(41, 8%, 61%) hsl(39, 11%, 69%) hsl(40, 15%, 80%) hsl(43, 13%, 90%) hsl(40, 23%, 97%)
Refactoring UI: Color Palettes

Supporting
These colors should be used fairly conservatively throughout your UI to
avoid overpowering your primary colors. Use them when you need an
element to stand out, or to reinforce things like error states or positive
trends with the appropriate semantic color.

Cyan Red (Vivid)

#044E54 #38BEC9 #610316 #EF4E4E

hsl(184, 91%, 17%) hsl(185, 57%, 50%) hsl(348, 94%, 20%) hsl(360, 83%, 62%)

#0A6C74 #54D1DB #8A041A #F86A6A

hsl(185, 84%, 25%) hsl(184, 65%, 59%) hsl(350, 94%, 28%) hsl(360, 91%, 69%)

#0E7C86 #87EAF2 #AB091E #FF9B9B

hsl(185, 81%, 29%) hsl(184, 80%, 74%) hsl(352, 90%, 35%) hsl(360, 100%, 80%)

#14919B #BEF8FD #CF1124 #FFBDBD

hsl(184, 77%, 34%) hsl(185, 94%, 87%) hsl(354, 85%, 44%) hsl(360, 100%, 87%)

#2CB1BC #E0FCFF #E12D39 #FFE3E3

hsl(185, 62%, 45%) hsl(186, 100%, 94%) hsl(356, 75%, 53%) hsl(360, 100%, 95%)
Refactoring UI: Color Palettes

Yellow Green (Vivid)

#513C06 #F7D070 #014807 #31B237

hsl(43, 86%, 17%) hsl(43, 89%, 70%) hsl(125, 97%, 14%) hsl(123, 57%, 45%)

#7C5E10 #F9DA8B #07600E #51CA58

hsl(43, 77%, 27%) hsl(43, 90%, 76%) hsl(125, 86%, 20%) hsl(123, 53%, 55%)

#A27C1A #F8E3A3 #0E7817 #91E697

hsl(43, 72%, 37%) hsl(45, 86%, 81%) hsl(125, 79%, 26%) hsl(124, 63%, 74%)

#C99A2E #FCEFC7 #0F8613 #C1F2C7

hsl(42, 63%, 48%) hsl(45, 90%, 88%) hsl(122, 80%, 29%) hsl(127, 65%, 85%)

#E9B949 #FFFAEB #18981D #E3F9E5

hsl(42, 78%, 60%) hsl(45, 100%, 96%) hsl(122, 73%, 35%) hsl(125, 65%, 93%)
Refactoring UI: Color Palettes

Palette 19
Refactoring UI: Color Palettes

Primary
These are the splashes of color that should appear the most in your UI,
and are the ones that determine the overall "look" of the site. Use these
for things like primary actions, links, navigation items, icons, accent
borders, or text you want to emphasize.

Indigo

#19216C #2D3A8C #35469C #4055A8 #4C63B6

hsl(234, 62%, 26%) hsl(232, 51%, 36%) hsl(230, 49%, 41%) hsl(228, 45%, 45%) hsl(227, 42%, 51%)

#647ACB #7B93DB #98AEEB #BED0F7 #E0E8F9

hsl(227, 50%, 59%) hsl(225, 57%, 67%) hsl(224, 67%, 76%) hsl(221, 78%, 86%) hsl(221, 68%, 93%)
Refactoring UI: Color Palettes

Orange (Vivid)

#F9703E #FF9466 #FFB088 #FFD0B5 #FFE8D9

hsl(16, 94%, 61%) hsl(18, 100%, 70%) hsl(20, 100%, 77%) hsl(22, 100%, 85%) hsl(24, 100%, 93%)

#841003 #AD1D07 #C52707 #DE3A11 #F35627

hsl(6, 96%, 26%) hsl(8, 92%, 35%) hsl(10, 93%, 40%) hsl(12, 86%, 47%) hsl(14, 89%, 55%)
Refactoring UI: Color Palettes

Neutrals
These are the colors you will use the most and will make up the majority
of your UI. Use them for most of your text, backgrounds, and borders,
as well as for things like secondary buttons and links.

Cool Grey

#1F2933 #323F4B #3E4C59 #52606D #616E7C

hsl(210, 24%, 16%) hsl(209, 20%, 25%) hsl(209, 18%, 30%) hsl(209, 14%, 37%) hsl(211, 12%, 43%)

#7B8794 #9AA5B1 #CBD2D9 #E4E7EB #F5F7FA

hsl(211, 10%, 53%) hsl(211, 13%, 65%) hsl(210, 16%, 82%) hsl(214, 15%, 91%) hsl(216, 33%, 97%)
Refactoring UI: Color Palettes

Supporting
These colors should be used fairly conservatively throughout your UI to
avoid overpowering your primary colors. Use them when you need an
element to stand out, or to reinforce things like error states or positive
trends with the appropriate semantic color.

Magenta (Vivid) Red (Vivid)

#6E0560 #ED47ED #610316 #EF4E4E

hsl(308, 91%, 23%) hsl(300, 82%, 60%) hsl(348, 94%, 20%) hsl(360, 83%, 62%)

#960888 #F368FC #8A041A #F86A6A

hsl(306, 90%, 31%) hsl(296, 96%, 70%) hsl(350, 94%, 28%) hsl(360, 91%, 69%)

#B30BA3 #F48FFF #AB091E #FF9B9B

hsl(306, 88%, 37%) hsl(294, 100%, 78%) hsl(352, 90%, 35%) hsl(360, 100%, 80%)

#CB10B8 #F8C4FE #CF1124 #FFBDBD

hsl(306, 85%, 43%) hsl(294, 97%, 88%) hsl(354, 85%, 44%) hsl(360, 100%, 87%)

#E019D0 #FDEBFF #E12D39 #FFE3E3

hsl(305, 80%, 49%) hsl(294, 100%, 96%) hsl(356, 75%, 53%) hsl(360, 100%, 95%)
Refactoring UI: Color Palettes

Yellow (Vivid) Green (Vivid)

#8D2B0B #F7C948 #014807 #31B237

hsl(15, 86%, 30%) hsl(44, 92%, 63%) hsl(125, 97%, 14%) hsl(123, 57%, 45%)

#B44D12 #FADB5F #07600E #51CA58

hsl(22, 82%, 39%) hsl(48, 94%, 68%) hsl(125, 86%, 20%) hsl(123, 53%, 55%)

#CB6E17 #FCE588 #0E7817 #91E697

hsl(29, 80%, 44%) hsl(48, 95%, 76%) hsl(125, 79%, 26%) hsl(124, 63%, 74%)

#DE911D #FFF3C4 #0F8613 #C1F2C7

hsl(36, 77%, 49%) hsl(48, 100%, 88%) hsl(122, 80%, 29%) hsl(127, 65%, 85%)

#F0B429 #FFFBEA #18981D #E3F9E5

hsl(42, 87%, 55%) hsl(49, 100%, 96%) hsl(122, 73%, 35%) hsl(125, 65%, 93%)
Refactoring UI: Color Palettes

Palette 20
Refactoring UI: Color Palettes

Primary
These are the splashes of color that should appear the most in your UI,
and are the ones that determine the overall "look" of the site. Use these
for things like primary actions, links, navigation items, icons, accent
borders, or text you want to emphasize.

Light Blue

#0B4F71 #166086 #1D6F98 #2D83AE #3994C1

hsl(200, 82%, 24%) hsl(200, 72%, 31%) hsl(200, 68%, 35%) hsl(200, 59%, 43%) hsl(200, 54%, 49%)

#55AAD4 #7CC1E4 #A7D8F0 #D1EEFC #EBF8FF

hsl(200, 60%, 58%) hsl(200, 66%, 69%) hsl(200, 71%, 80%) hsl(200, 88%, 90%) hsl(201, 100%, 96%)
Refactoring UI: Color Palettes

Green

#05400A #0E5814 #207227 #2F8132 #3F9142

hsl(125, 86%, 14%) hsl(125, 73%, 20%) hsl(125, 56%, 29%) hsl(122, 47%, 35%) hsl(122, 39%, 41%)

#57AE5B #7BC47F #A3D9A5 #C1EAC5 #E3F9E5

hsl(123, 35%, 51%) hsl(123, 38%, 63%) hsl(122, 42%, 75%) hsl(126, 49%, 84%) hsl(125, 65%, 93%)
Refactoring UI: Color Palettes

Neutrals
These are the colors you will use the most and will make up the majority
of your UI. Use them for most of your text, backgrounds, and borders,
as well as for things like secondary buttons and links.

Cool Grey

#1F2933 #323F4B #3E4C59 #52606D #616E7C

hsl(210, 24%, 16%) hsl(209, 20%, 25%) hsl(209, 18%, 30%) hsl(209, 14%, 37%) hsl(211, 12%, 43%)

#7B8794 #9AA5B1 #CBD2D9 #E4E7EB #F5F7FA

hsl(211, 10%, 53%) hsl(211, 13%, 65%) hsl(210, 16%, 82%) hsl(214, 15%, 91%) hsl(216, 33%, 97%)
Refactoring UI: Color Palettes

Supporting
These colors should be used fairly conservatively throughout your UI to
avoid overpowering your primary colors. Use them when you need an
element to stand out, or to reinforce things like error states or positive
trends with the appropriate semantic color.

Purple Red

#240754 #724BB7 #610404 #D64545

hsl(263, 85%, 18%) hsl(262, 43%, 51%) hsl(360, 92%, 20%) hsl(360, 64%, 55%)

#34126F #8662C7 #780A0A #E66A6A

hsl(262, 72%, 25%) hsl(261, 47%, 58%) hsl(360, 85%, 25%) hsl(360, 71%, 66%)

#421987 #A081D9 #911111 #F29B9B

hsl(262, 69%, 31%) hsl(261, 54%, 68%) hsl(360, 79%, 32%) hsl(360, 77%, 78%)

#51279B #CFBCF2 #A61B1B #FACDCD

hsl(262, 60%, 38%) hsl(261, 68%, 84%) hsl(360, 72%, 38%) hsl(360, 82%, 89%)

#653CAD #EAE2F8 #BA2525 #FFEEEE

hsl(262, 48%, 46%) hsl(262, 61%, 93%) hsl(360, 67%, 44%) hsl(360, 100%, 97%)
Refactoring UI: Color Palettes

Yellow

#513C06 #F7D070
hsl(43, 86%, 17%) hsl(43, 89%, 70%)

#7C5E10 #F9DA8B
hsl(43, 77%, 27%) hsl(43, 90%, 76%)

#A27C1A #F8E3A3
hsl(43, 72%, 37%) hsl(45, 86%, 81%)

#C99A2E #FCEFC7
hsl(42, 63%, 48%) hsl(45, 90%, 88%)

#E9B949 #FFFAEB
hsl(42, 78%, 60%) hsl(45, 100%, 96%)
Refactoring UI: Color Palettes

Palette 21
Refactoring UI: Color Palettes

Primary
These are the splashes of color that should appear the most in your UI,
and are the ones that determine the overall "look" of the site. Use these
for things like primary actions, links, navigation items, icons, accent
borders, or text you want to emphasize.

Orange (Vivid)

#F9703E #FF9466 #FFB088 #FFD0B5 #FFE8D9

hsl(16, 94%, 61%) hsl(18, 100%, 70%) hsl(20, 100%, 77%) hsl(22, 100%, 85%) hsl(24, 100%, 93%)

#841003 #AD1D07 #C52707 #DE3A11 #F35627

hsl(6, 96%, 26%) hsl(8, 92%, 35%) hsl(10, 93%, 40%) hsl(12, 86%, 47%) hsl(14, 89%, 55%)
Refactoring UI: Color Palettes

Neutrals
These are the colors you will use the most and will make up the majority
of your UI. Use them for most of your text, backgrounds, and borders,
as well as for things like secondary buttons and links.

Cool Grey

#1F2933 #323F4B #3E4C59 #52606D #616E7C

hsl(210, 24%, 16%) hsl(209, 20%, 25%) hsl(209, 18%, 30%) hsl(209, 14%, 37%) hsl(211, 12%, 43%)

#7B8794 #9AA5B1 #CBD2D9 #E4E7EB #F5F7FA

hsl(211, 10%, 53%) hsl(211, 13%, 65%) hsl(210, 16%, 82%) hsl(214, 15%, 91%) hsl(216, 33%, 97%)
Refactoring UI: Color Palettes

Supporting
These colors should be used fairly conservatively throughout your UI to
avoid overpowering your primary colors. Use them when you need an
element to stand out, or to reinforce things like error states or positive
trends with the appropriate semantic color.

Indigo Red

#19216C #647ACB #610404 #D64545

hsl(234, 62%, 26%) hsl(227, 50%, 59%) hsl(360, 92%, 20%) hsl(360, 64%, 55%)

#2D3A8C #7B93DB #780A0A #E66A6A

hsl(232, 51%, 36%) hsl(225, 57%, 67%) hsl(360, 85%, 25%) hsl(360, 71%, 66%)

#35469C #98AEEB #911111 #F29B9B

hsl(230, 49%, 41%) hsl(224, 67%, 76%) hsl(360, 79%, 32%) hsl(360, 77%, 78%)

#4055A8 #BED0F7 #A61B1B #FACDCD

hsl(228, 45%, 45%) hsl(221, 78%, 86%) hsl(360, 72%, 38%) hsl(360, 82%, 89%)

#4C63B6 #E0E8F9 #BA2525 #FFEEEE

hsl(227, 42%, 51%) hsl(221, 68%, 93%) hsl(360, 67%, 44%) hsl(360, 100%, 97%)
Refactoring UI: Color Palettes

Yellow Green

#513C06 #F7D070 #05400A #57AE5B

hsl(43, 86%, 17%) hsl(43, 89%, 70%) hsl(125, 86%, 14%) hsl(123, 35%, 51%)

#7C5E10 #F9DA8B #0E5814 #7BC47F

hsl(43, 77%, 27%) hsl(43, 90%, 76%) hsl(125, 73%, 20%) hsl(123, 38%, 63%)

#A27C1A #F8E3A3 #207227 #A3D9A5

hsl(43, 72%, 37%) hsl(45, 86%, 81%) hsl(125, 56%, 29%) hsl(122, 42%, 75%)

#C99A2E #FCEFC7 #2F8132 #C1EAC5

hsl(42, 63%, 48%) hsl(45, 90%, 88%) hsl(122, 47%, 35%) hsl(126, 49%, 84%)

#E9B949 #FFFAEB #3F9142 #E3F9E5

hsl(42, 78%, 60%) hsl(45, 100%, 96%) hsl(122, 39%, 41%) hsl(125, 65%, 93%)
Refactoring UI: Color Palettes

Palette 22
Refactoring UI: Color Palettes

Primary
These are the splashes of color that should appear the most in your UI,
and are the ones that determine the overall "look" of the site. Use these
for things like primary actions, links, navigation items, icons, accent
borders, or text you want to emphasize.

Indigo

#19216C #2D3A8C #35469C #4055A8 #4C63B6

hsl(234, 62%, 26%) hsl(232, 51%, 36%) hsl(230, 49%, 41%) hsl(228, 45%, 45%) hsl(227, 42%, 51%)

#647ACB #7B93DB #98AEEB #BED0F7 #E0E8F9

hsl(227, 50%, 59%) hsl(225, 57%, 67%) hsl(224, 67%, 76%) hsl(221, 78%, 86%) hsl(221, 68%, 93%)
Refactoring UI: Color Palettes

Cyan (Vivid)

#05606E #07818F #099AA4 #0FB5BA #1CD4D4

hsl(188, 91%, 23%) hsl(186, 91%, 29%) hsl(184, 90%, 34%) hsl(182, 85%, 39%) hsl(180, 77%, 47%)

#3AE7E1 #62F4EB #92FDF2 #C1FEF6 #E1FCF8

hsl(178, 78%, 57%) hsl(176, 87%, 67%) hsl(174, 96%, 78%) hsl(172, 97%, 88%) hsl(171, 82%, 94%)
Refactoring UI: Color Palettes

Neutrals
These are the colors you will use the most and will make up the majority
of your UI. Use them for most of your text, backgrounds, and borders,
as well as for things like secondary buttons and links.

Cool Grey

#1F2933 #323F4B #3E4C59 #52606D #616E7C

hsl(210, 24%, 16%) hsl(209, 20%, 25%) hsl(209, 18%, 30%) hsl(209, 14%, 37%) hsl(211, 12%, 43%)

#7B8794 #9AA5B1 #CBD2D9 #E4E7EB #F5F7FA

hsl(211, 10%, 53%) hsl(211, 13%, 65%) hsl(210, 16%, 82%) hsl(214, 15%, 91%) hsl(216, 33%, 97%)
Refactoring UI: Color Palettes

Supporting
These colors should be used fairly conservatively throughout your UI to
avoid overpowering your primary colors. Use them when you need an
element to stand out, or to reinforce things like error states or positive
trends with the appropriate semantic color.

Pink (Vivid) Red (Vivid)

#620042 #E8368F #610316 #EF4E4E

hsl(320, 100%, 19%) hsl(330, 79%, 56%) hsl(348, 94%, 20%) hsl(360, 83%, 62%)

#870557 #F364A2 #8A041A #F86A6A

hsl(322, 93%, 27%) hsl(334, 86%, 67%) hsl(350, 94%, 28%) hsl(360, 91%, 69%)

#A30664 #FF8CBA #AB091E #FF9B9B

hsl(324, 93%, 33%) hsl(336, 100%, 77%) hsl(352, 90%, 35%) hsl(360, 100%, 80%)

#BC0A6F #FFB8D2 #CF1124 #FFBDBD

hsl(326, 90%, 39%) hsl(338, 100%, 86%) hsl(354, 85%, 44%) hsl(360, 100%, 87%)

#DA127D #FFE3EC #E12D39 #FFE3E3

hsl(328, 85%, 46%) hsl(341, 100%, 95%) hsl(356, 75%, 53%) hsl(360, 100%, 95%)
Refactoring UI: Color Palettes

Yellow (Vivid) Green (Vivid)

#8D2B0B #F7C948 #014807 #31B237

hsl(15, 86%, 30%) hsl(44, 92%, 63%) hsl(125, 97%, 14%) hsl(123, 57%, 45%)

#B44D12 #FADB5F #07600E #51CA58

hsl(22, 82%, 39%) hsl(48, 94%, 68%) hsl(125, 86%, 20%) hsl(123, 53%, 55%)

#CB6E17 #FCE588 #0E7817 #91E697

hsl(29, 80%, 44%) hsl(48, 95%, 76%) hsl(125, 79%, 26%) hsl(124, 63%, 74%)

#DE911D #FFF3C4 #0F8613 #C1F2C7

hsl(36, 77%, 49%) hsl(48, 100%, 88%) hsl(122, 80%, 29%) hsl(127, 65%, 85%)

#F0B429 #FFFBEA #18981D #E3F9E5

hsl(42, 87%, 55%) hsl(49, 100%, 96%) hsl(122, 73%, 35%) hsl(125, 65%, 93%)
Refactoring UI: Color Palettes

Palette 23
Refactoring UI: Color Palettes

Primary
These are the splashes of color that should appear the most in your UI,
and are the ones that determine the overall "look" of the site. Use these
for things like primary actions, links, navigation items, icons, accent
borders, or text you want to emphasize.

Teal (Vivid)

#004440 #016457 #048271 #079A82 #17B897

hsl(176, 100%, 13%) hsl(172, 98%, 20%) hsl(172, 94%, 26%) hsl(170, 91%, 32%) hsl(168, 78%, 41%)

#2DCCA7 #5FE3C0 #8EEDD1 #C6F7E9 #F0FCF9

hsl(166, 64%, 49%) hsl(164, 70%, 63%) hsl(162, 73%, 74%) hsl(163, 75%, 87%) hsl(165, 67%, 96%)
Refactoring UI: Color Palettes

Neutrals
These are the colors you will use the most and will make up the majority
of your UI. Use them for most of your text, backgrounds, and borders,
as well as for things like secondary buttons and links.

Grey

#222222 #3B3B3B #515151 #626262 #7E7E7E

hsl(0, 0%, 13%) hsl(0, 0%, 23%) hsl(0, 0%, 32%) hsl(0, 0%, 38%) hsl(0, 0%, 49%)

#9E9E9E #B1B1B1 #CFCFCF #E1E1E1 #F7F7F7

hsl(0, 0%, 62%) hsl(0, 0%, 69%) hsl(0, 0%, 81%) hsl(0, 0%, 88%) hsl(0, 0%, 97%)
Refactoring UI: Color Palettes

Supporting
These colors should be used fairly conservatively throughout your UI to
avoid overpowering your primary colors. Use them when you need an
element to stand out, or to reinforce things like error states or positive
trends with the appropriate semantic color.

Yellow (Vivid) Red (Vivid)

#8D2B0B #F7C948 #610316 #EF4E4E

hsl(15, 86%, 30%) hsl(44, 92%, 63%) hsl(348, 94%, 20%) hsl(360, 83%, 62%)

#B44D12 #FADB5F #8A041A #F86A6A

hsl(22, 82%, 39%) hsl(48, 94%, 68%) hsl(350, 94%, 28%) hsl(360, 91%, 69%)

#CB6E17 #FCE588 #AB091E #FF9B9B

hsl(29, 80%, 44%) hsl(48, 95%, 76%) hsl(352, 90%, 35%) hsl(360, 100%, 80%)

#DE911D #FFF3C4 #CF1124 #FFBDBD

hsl(36, 77%, 49%) hsl(48, 100%, 88%) hsl(354, 85%, 44%) hsl(360, 100%, 87%)

#F0B429 #FFFBEA #E12D39 #FFE3E3

hsl(42, 87%, 55%) hsl(49, 100%, 96%) hsl(356, 75%, 53%) hsl(360, 100%, 95%)
Refactoring UI: Color Palettes

Palette 24
Refactoring UI: Color Palettes

Primary
These are the splashes of color that should appear the most in your UI,
and are the ones that determine the overall "look" of the site. Use these
for things like primary actions, links, navigation items, icons, accent
borders, or text you want to emphasize.

Yellow

#513C06 #7C5E10 #A27C1A #C99A2E #E9B949

hsl(43, 86%, 17%) hsl(43, 77%, 27%) hsl(43, 72%, 37%) hsl(42, 63%, 48%) hsl(42, 78%, 60%)

#F7D070 #F9DA8B #F8E3A3 #FCEFC7 #FFFAEB

hsl(43, 89%, 70%) hsl(43, 90%, 76%) hsl(45, 86%, 81%) hsl(45, 90%, 88%) hsl(45, 100%, 96%)
Refactoring UI: Color Palettes

Neutrals
These are the colors you will use the most and will make up the majority
of your UI. Use them for most of your text, backgrounds, and borders,
as well as for things like secondary buttons and links.

Grey

#222222 #3B3B3B #515151 #626262 #7E7E7E

hsl(0, 0%, 13%) hsl(0, 0%, 23%) hsl(0, 0%, 32%) hsl(0, 0%, 38%) hsl(0, 0%, 49%)

#9E9E9E #B1B1B1 #CFCFCF #E1E1E1 #F7F7F7

hsl(0, 0%, 62%) hsl(0, 0%, 69%) hsl(0, 0%, 81%) hsl(0, 0%, 88%) hsl(0, 0%, 97%)
Refactoring UI: Color Palettes

Supporting
These colors should be used fairly conservatively throughout your UI to
avoid overpowering your primary colors. Use them when you need an
element to stand out, or to reinforce things like error states or positive
trends with the appropriate semantic color.

Blue Orange

#003E6B #4098D7 #572508 #E67635

hsl(205, 100%, 21%) hsl(205, 65%, 55%) hsl(22, 83%, 19%) hsl(22, 78%, 55%)

#0A558C #62B0E8 #77340D #EF8E58

hsl(205, 87%, 29%) hsl(205, 74%, 65%) hsl(22, 80%, 26%) hsl(21, 83%, 64%)

#0F609B #84C5F4 #8C3D10 #FAB38B

hsl(205, 82%, 33%) hsl(205, 84%, 74%) hsl(22, 79%, 31%) hsl(22, 92%, 76%)

#186FAF #B6E0FE #AB4E19 #FFD3BA

hsl(205, 76%, 39%) hsl(205, 97%, 85%) hsl(22, 74%, 38%) hsl(22, 100%, 86%)

#2680C2 #DCEEFB #C65D21 #FFEFE6

hsl(205, 67%, 45%) hsl(205, 79%, 92%) hsl(22, 71%, 45%) hsl(22, 100%, 95%)
Refactoring UI: Color Palettes

Red Green

#610404 #D64545 #05400A #57AE5B

hsl(360, 92%, 20%) hsl(360, 64%, 55%) hsl(125, 86%, 14%) hsl(123, 35%, 51%)

#780A0A #E66A6A #0E5814 #7BC47F

hsl(360, 85%, 25%) hsl(360, 71%, 66%) hsl(125, 73%, 20%) hsl(123, 38%, 63%)

#911111 #F29B9B #207227 #A3D9A5

hsl(360, 79%, 32%) hsl(360, 77%, 78%) hsl(125, 56%, 29%) hsl(122, 42%, 75%)

#A61B1B #FACDCD #2F8132 #C1EAC5

hsl(360, 72%, 38%) hsl(360, 82%, 89%) hsl(122, 47%, 35%) hsl(126, 49%, 84%)

#BA2525 #FFEEEE #3F9142 #E3F9E5

hsl(360, 67%, 44%) hsl(360, 100%, 97%) hsl(122, 39%, 41%) hsl(125, 65%, 93%)
Refactoring UI: Color Palettes

Swatches
Refactoring UI: Color Palettes

Red Red (Vivid)

#610404 #D64545 #610316 #EF4E4E

hsl(360, 92%, 20%) hsl(360, 64%, 55%) hsl(348, 94%, 20%) hsl(360, 83%, 62%)

#780A0A #E66A6A #8A041A #F86A6A

hsl(360, 85%, 25%) hsl(360, 71%, 66%) hsl(350, 94%, 28%) hsl(360, 91%, 69%)

#911111 #F29B9B #AB091E #FF9B9B

hsl(360, 79%, 32%) hsl(360, 77%, 78%) hsl(352, 90%, 35%) hsl(360, 100%, 80%)

#A61B1B #FACDCD #CF1124 #FFBDBD

hsl(360, 72%, 38%) hsl(360, 82%, 89%) hsl(354, 85%, 44%) hsl(360, 100%, 87%)

#BA2525 #FFEEEE #E12D39 #FFE3E3

hsl(360, 67%, 44%) hsl(360, 100%, 97%) hsl(356, 75%, 53%) hsl(360, 100%, 95%)

Orange Orange (Vivid)

#572508 #E67635 #841003 #F9703E

hsl(22, 83%, 19%) hsl(22, 78%, 55%) hsl(6, 96%, 26%) hsl(16, 94%, 61%)

#77340D #EF8E58 #AD1D07 #FF9466

hsl(22, 80%, 26%) hsl(21, 83%, 64%) hsl(8, 92%, 35%) hsl(18, 100%, 70%)

#8C3D10 #FAB38B #C52707 #FFB088

hsl(22, 79%, 31%) hsl(22, 92%, 76%) hsl(10, 93%, 40%) hsl(20, 100%, 77%)

#AB4E19 #FFD3BA #DE3A11 #FFD0B5

hsl(22, 74%, 38%) hsl(22, 100%, 86%) hsl(12, 86%, 47%) hsl(22, 100%, 85%)

#C65D21 #FFEFE6 #F35627 #FFE8D9

hsl(22, 71%, 45%) hsl(22, 100%, 95%) hsl(14, 89%, 55%) hsl(24, 100%, 93%)
Refactoring UI: Color Palettes

Yellow Yellow (Vivid)

#513C06 #F7D070 #8D2B0B #F7C948

hsl(43, 86%, 17%) hsl(43, 89%, 70%) hsl(15, 86%, 30%) hsl(44, 92%, 63%)

#7C5E10 #F9DA8B #B44D12 #FADB5F

hsl(43, 77%, 27%) hsl(43, 90%, 76%) hsl(22, 82%, 39%) hsl(48, 94%, 68%)

#A27C1A #F8E3A3 #CB6E17 #FCE588

hsl(43, 72%, 37%) hsl(45, 86%, 81%) hsl(29, 80%, 44%) hsl(48, 95%, 76%)

#C99A2E #FCEFC7 #DE911D #FFF3C4

hsl(42, 63%, 48%) hsl(45, 90%, 88%) hsl(36, 77%, 49%) hsl(48, 100%, 88%)

#E9B949 #FFFAEB #F0B429 #FFFBEA

hsl(42, 78%, 60%) hsl(45, 100%, 96%) hsl(42, 87%, 55%) hsl(49, 100%, 96%)

Lime Green Lime Green (Vivid)

#2B4005 #94C843 #1E5303 #8DED2D

hsl(81, 86%, 14%) hsl(83, 55%, 52%) hsl(100, 93%, 17%) hsl(90, 84%, 55%)

#42600C #ABDB5E #2E7B06 #AFF75C

hsl(81, 78%, 21%) hsl(83, 63%, 61%) hsl(99, 91%, 25%) hsl(88, 91%, 66%)

#507712 #C7EA8F #399709 #CAFF84

hsl(83, 74%, 27%) hsl(83, 68%, 74%) hsl(100, 89%, 31%) hsl(86, 100%, 76%)

#63921A #E2F7C2 #5CB70B #E6FFBF

hsl(83, 70%, 34%) hsl(84, 77%, 86%) hsl(92, 89%, 38%) hsl(83, 100%, 87%)

#7BB026 #F2FDE0 #6CD410 #F8FFED

hsl(83, 64%, 42%) hsl(83, 88%, 94%) hsl(92, 86%, 45%) hsl(83, 100%, 96%)
Refactoring UI: Color Palettes

Green Green (Vivid)

#05400A #57AE5B #014807 #31B237

hsl(125, 86%, 14%) hsl(123, 35%, 51%) hsl(125, 97%, 14%) hsl(123, 57%, 45%)

#0E5814 #7BC47F #07600E #51CA58

hsl(125, 73%, 20%) hsl(123, 38%, 63%) hsl(125, 86%, 20%) hsl(123, 53%, 55%)

#207227 #A3D9A5 #0E7817 #91E697

hsl(125, 56%, 29%) hsl(122, 42%, 75%) hsl(125, 79%, 26%) hsl(124, 63%, 74%)

#2F8132 #C1EAC5 #0F8613 #C1F2C7

hsl(122, 47%, 35%) hsl(126, 49%, 84%) hsl(122, 80%, 29%) hsl(127, 65%, 85%)

#3F9142 #E3F9E5 #18981D #E3F9E5

hsl(122, 39%, 41%) hsl(125, 65%, 93%) hsl(122, 73%, 35%) hsl(125, 65%, 93%)

Teal Teal (Vivid)

#014D40 #3EBD93 #004440 #2DCCA7

hsl(170, 97%, 15%) hsl(160, 51%, 49%) hsl(176, 100%, 13%) hsl(166, 64%, 49%)

#0C6B58 #65D6AD #016457 #5FE3C0

hsl(168, 80%, 23%) hsl(158, 58%, 62%) hsl(172, 98%, 20%) hsl(164, 70%, 63%)

#147D64 #8EEDC7 #048271 #8EEDD1

hsl(166, 72%, 28%) hsl(156, 73%, 74%) hsl(172, 94%, 26%) hsl(162, 73%, 74%)

#199473 #C6F7E2 #079A82 #C6F7E9

hsl(164, 71%, 34%) hsl(154, 75%, 87%) hsl(170, 91%, 32%) hsl(163, 75%, 87%)

#27AB83 #EFFCF6 #17B897 #F0FCF9

hsl(162, 63%, 41%) hsl(152, 68%, 96%) hsl(168, 78%, 41%) hsl(165, 67%, 96%)
Refactoring UI: Color Palettes

Cyan Cyan (Vivid)

#044E54 #38BEC9 #05606E #3AE7E1

hsl(184, 91%, 17%) hsl(185, 57%, 50%) hsl(188, 91%, 23%) hsl(178, 78%, 57%)

#0A6C74 #54D1DB #07818F #62F4EB

hsl(185, 84%, 25%) hsl(184, 65%, 59%) hsl(186, 91%, 29%) hsl(176, 87%, 67%)

#0E7C86 #87EAF2 #099AA4 #92FDF2

hsl(185, 81%, 29%) hsl(184, 80%, 74%) hsl(184, 90%, 34%) hsl(174, 96%, 78%)

#14919B #BEF8FD #0FB5BA #C1FEF6

hsl(184, 77%, 34%) hsl(185, 94%, 87%) hsl(182, 85%, 39%) hsl(172, 97%, 88%)

#2CB1BC #E0FCFF #1CD4D4 #E1FCF8

hsl(185, 62%, 45%) hsl(186, 100%, 94%) hsl(180, 77%, 47%) hsl(171, 82%, 94%)

Light Blue Light Blue (Vivid)

#0B4F71 #55AAD4 #035388 #40C3F7

hsl(200, 82%, 24%) hsl(200, 60%, 58%) hsl(204, 96%, 27%) hsl(197, 92%, 61%)

#166086 #7CC1E4 #0B69A3 #5ED0FA

hsl(200, 72%, 31%) hsl(200, 66%, 69%) hsl(203, 87%, 34%) hsl(196, 94%, 67%)

#1D6F98 #A7D8F0 #127FBF #81DEFD

hsl(200, 68%, 35%) hsl(200, 71%, 80%) hsl(202, 83%, 41%) hsl(195, 97%, 75%)

#2D83AE #D1EEFC #1992D4 #B3ECFF

hsl(200, 59%, 43%) hsl(200, 88%, 90%) hsl(201, 79%, 46%) hsl(195, 100%, 85%)

#3994C1 #EBF8FF #2BB0ED #E3F8FF

hsl(200, 54%, 49%) hsl(201, 100%, 96%) hsl(199, 84%, 55%) hsl(195, 100%, 95%)
Refactoring UI: Color Palettes

Blue Blue (Vivid)

#003E6B #4098D7 #002159 #2186EB

hsl(205, 100%, 21%) hsl(205, 65%, 55%) hsl(218, 100%, 17%) hsl(210, 83%, 53%)

#0A558C #62B0E8 #01337D #47A3F3

hsl(205, 87%, 29%) hsl(205, 74%, 65%) hsl(216, 98%, 25%) hsl(208, 88%, 62%)

#0F609B #84C5F4 #03449E #7CC4FA

hsl(205, 82%, 33%) hsl(205, 84%, 74%) hsl(215, 96%, 32%) hsl(206, 93%, 73%)

#186FAF #B6E0FE #0552B5 #BAE3FF

hsl(205, 76%, 39%) hsl(205, 97%, 85%) hsl(214, 95%, 36%) hsl(204, 100%, 86%)

#2680C2 #DCEEFB #0967D2 #E6F6FF

hsl(205, 67%, 45%) hsl(205, 79%, 92%) hsl(212, 92%, 43%) hsl(202, 100%, 95%)

Indigo Indigo (Vivid)

#19216C #647ACB #061178 #3A66DB

hsl(234, 62%, 26%) hsl(227, 50%, 59%) hsl(234, 90%, 25%) hsl(224, 69%, 54%)

#2D3A8C #7B93DB #0B1D96 #5E8AEE

hsl(232, 51%, 36%) hsl(225, 57%, 67%) hsl(232, 86%, 32%) hsl(222, 81%, 65%)

#35469C #98AEEB #132DAD #88B1FC

hsl(230, 49%, 41%) hsl(224, 67%, 76%) hsl(230, 80%, 38%) hsl(219, 95%, 76%)

#4055A8 #BED0F7 #1D3DBF #B0D0FF

hsl(228, 45%, 45%) hsl(221, 78%, 86%) hsl(228, 74%, 43%) hsl(216, 100%, 85%)

#4C63B6 #E0E8F9 #2251CC #D9E8FF

hsl(227, 42%, 51%) hsl(221, 68%, 93%) hsl(223, 71%, 47%) hsl(216, 100%, 93%)
Refactoring UI: Color Palettes

Purple Purple (Vivid)

#240754 #724BB7 #44056E #9446ED

hsl(263, 85%, 18%) hsl(262, 43%, 51%) hsl(276, 91%, 23%) hsl(268, 82%, 60%)

#34126F #8662C7 #580A94 #A368FC

hsl(262, 72%, 25%) hsl(261, 47%, 58%) hsl(274, 87%, 31%) hsl(264, 96%, 70%)

#421987 #A081D9 #690CB0 #B990FF

hsl(262, 69%, 31%) hsl(261, 54%, 68%) hsl(274, 87%, 37%) hsl(262, 100%, 78%)

#51279B #CFBCF2 #7A0ECC #DAC4FF

hsl(262, 60%, 38%) hsl(261, 68%, 84%) hsl(274, 87%, 43%) hsl(262, 100%, 88%)

#653CAD #EAE2F8 #8719E0 #F2EBFE

hsl(262, 48%, 46%) hsl(262, 61%, 93%) hsl(273, 80%, 49%) hsl(262, 90%, 96%)

Magenta Magenta (Vivid)

#4E0754 #AD4BB8 #6E0560 #ED47ED

hsl(295, 85%, 18%) hsl(294, 43%, 51%) hsl(308, 91%, 23%) hsl(300, 82%, 60%)

#671270 #BB61C7 #960888 #F368FC

hsl(294, 72%, 25%) hsl(293, 48%, 58%) hsl(306, 90%, 31%) hsl(296, 96%, 70%)

#7C1A87 #CE80D9 #B30BA3 #F48FFF

hsl(294, 68%, 32%) hsl(293, 54%, 68%) hsl(306, 88%, 37%) hsl(294, 100%, 78%)

#90279C #ECBDF2 #CB10B8 #F8C4FE

hsl(294, 60%, 38%) hsl(293, 67%, 85%) hsl(306, 85%, 43%) hsl(294, 97%, 88%)

#A23DAD #F5E1F7 #E019D0 #FDEBFF

hsl(294, 48%, 46%) hsl(295, 58%, 93%) hsl(305, 80%, 49%) hsl(294, 100%, 96%)
Refactoring UI: Color Palettes

Pink Pink (Vivid)

#5C0B33 #DA4A91 #620042 #E8368F

hsl(330, 79%, 20%) hsl(330, 66%, 57%) hsl(320, 100%, 19%) hsl(330, 79%, 56%)

#781244 #E668A7 #870557 #F364A2

hsl(331, 74%, 27%) hsl(330, 72%, 65%) hsl(322, 93%, 27%) hsl(334, 86%, 67%)

#9B1B5A #F191C1 #A30664 #FF8CBA

hsl(330, 70%, 36%) hsl(330, 77%, 76%) hsl(324, 93%, 33%) hsl(336, 100%, 77%)

#AD2167 #FAB8D9 #BC0A6F #FFB8D2

hsl(330, 68%, 40%) hsl(330, 87%, 85%) hsl(326, 90%, 39%) hsl(338, 100%, 86%)

#C42D78 #FFE0F0 #DA127D #FFE3EC

hsl(330, 63%, 47%) hsl(329, 100%, 94%) hsl(328, 85%, 46%) hsl(341, 100%, 95%)
Refactoring UI: Color Palettes

Blue Grey Cool Grey

#102A43 #829AB1 #1F2933 #7B8794

hsl(209, 61%, 16%) hsl(209, 23%, 60%) hsl(210, 24%, 16%) hsl(211, 10%, 53%)

#243B53 #9FB3C8 #323F4B #9AA5B1

hsl(211, 39%, 23%) hsl(211, 27%, 70%) hsl(209, 20%, 25%) hsl(211, 13%, 65%)

#334E68 #BCCCDC #3E4C59 #CBD2D9

hsl(209, 34%, 30%) hsl(210, 31%, 80%) hsl(209, 18%, 30%) hsl(210, 16%, 82%)

#486581 #D9E2EC #52606D #E4E7EB

hsl(209, 28%, 39%) hsl(212, 33%, 89%) hsl(209, 14%, 37%) hsl(214, 15%, 91%)

#627D98 #F0F4F8 #616E7C #F5F7FA

hsl(210, 22%, 49%) hsl(210, 36%, 96%) hsl(211, 12%, 43%) hsl(216, 33%, 97%)

Grey Warm Grey

#222222 #9E9E9E #27241D #A39E93

hsl(0, 0%, 13%) hsl(0, 0%, 62%) hsl(42, 15%, 13%) hsl(41, 8%, 61%)

#3B3B3B #B1B1B1 #423D33 #B8B2A7

hsl(0, 0%, 23%) hsl(0, 0%, 69%) hsl(40, 13%, 23%) hsl(39, 11%, 69%)

#515151 #CFCFCF #504A40 #D3CEC4

hsl(0, 0%, 32%) hsl(0, 0%, 81%) hsl(37, 11%, 28%) hsl(40, 15%, 80%)

#626262 #625D52 #E8E6E1

#E1E1E1
hsl(0, 0%, 38%) hsl(0, 0%, 88%) hsl(41, 9%, 35%) hsl(43, 13%, 90%)

#7E7E7E #F7F7F7 #857F72 #FAF9F7

hsl(0, 0%, 49%) hsl(0, 0%, 97%) hsl(41, 8%, 48%) hsl(40, 23%, 97%)