Color Palettes

Refactoring UI: Font Recommendations

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 (Vivid)

#44056E #580A94 #690CB0 #7A0ECC #8719E0

hsl(276, 91%, 23%) hsl(274, 87%, 31%) hsl(274, 87%, 37%) hsl(274, 87%, 43%) hsl(273, 80%, 49%)

#9446ED #A368FC #B990FF #DAC4FF #F2EBFE

hsl(268, 82%, 60%) hsl(264, 96%, 70%) hsl(262, 100%, 78%) hsl(262, 100%, 88%) hsl(262, 90%, 96%)
Refactoring UI: Color Palettes

Green (Vivid)

#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.

Green (Vivid)

#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)

#44056E #9446ED #610316 #EF4E4E

hsl(276, 91%, 23%) hsl(268, 82%, 60%) hsl(348, 94%, 20%) hsl(360, 83%, 62%)

#580A94 #A368FC #8A041A #F86A6A

hsl(274, 87%, 31%) hsl(264, 96%, 70%) hsl(350, 94%, 28%) hsl(360, 91%, 69%)

#690CB0 #B990FF #AB091E #FF9B9B

hsl(274, 87%, 37%) hsl(262, 100%, 78%) hsl(352, 90%, 35%) hsl(360, 100%, 80%)

#7A0ECC #DAC4FF #CF1124 #FFBDBD

hsl(274, 87%, 43%) hsl(262, 100%, 88%) hsl(354, 85%, 44%) hsl(360, 100%, 87%)

#8719E0 #F2EBFE #E12D39 #FFE3E3

hsl(273, 80%, 49%) hsl(262, 90%, 96%) hsl(356, 75%, 53%) hsl(360, 100%, 95%)

Yellow (Vivid) Green (Vivid)

#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 Green (Vivid)

#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 #610316 #EF4E4E

hsl(188, 91%, 23%) hsl(178, 78%, 57%) hsl(348, 94%, 20%) hsl(360, 83%, 62%)

#07818F #62F4EB #8A041A #F86A6A

hsl(186, 91%, 29%) hsl(176, 87%, 67%) hsl(350, 94%, 28%) hsl(360, 91%, 69%)

#099AA4 #92FDF2 #AB091E #FF9B9B

hsl(184, 90%, 34%) hsl(174, 96%, 78%) hsl(352, 90%, 35%) hsl(360, 100%, 80%)

#0FB5BA #C1FEF6 #CF1124 #FFBDBD

hsl(182, 85%, 39%) hsl(172, 97%, 88%) hsl(354, 85%, 44%) hsl(360, 100%, 87%)

#1CD4D4 #E1FCF8 #E12D39 #FFE3E3

hsl(180, 77%, 47%) hsl(171, 82%, 94%) hsl(356, 75%, 53%) hsl(360, 100%, 95%)
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)

#44056E #9446ED #610316 #EF4E4E

hsl(276, 91%, 23%) hsl(268, 82%, 60%) hsl(348, 94%, 20%) hsl(360, 83%, 62%)

#580A94 #A368FC #8A041A #F86A6A

hsl(274, 87%, 31%) hsl(264, 96%, 70%) hsl(350, 94%, 28%) hsl(360, 91%, 69%)

#690CB0 #B990FF #AB091E #FF9B9B

hsl(274, 87%, 37%) hsl(262, 100%, 78%) hsl(352, 90%, 35%) hsl(360, 100%, 80%)

#7A0ECC #DAC4FF #CF1124 #FFBDBD

hsl(274, 87%, 43%) hsl(262, 100%, 88%) hsl(354, 85%, 44%) hsl(360, 100%, 87%)

#8719E0 #F2EBFE #E12D39 #FFE3E3

hsl(273, 80%, 49%) hsl(262, 90%, 96%) hsl(356, 75%, 53%) hsl(360, 100%, 95%)
Refactoring UI: Color Palettes

Yellow (Vivid) Green (Vivid)

#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) Green (Vivid)

#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

#44056E #580A94 #690CB0 #7A0ECC #8719E0

hsl(276, 91%, 23%) hsl(274, 87%, 31%) hsl(274, 87%, 37%) hsl(274, 87%, 43%) hsl(273, 80%, 49%)

#9446ED #A368FC #B990FF #DAC4FF #F2EBFE

hsl(268, 82%, 60%) hsl(264, 96%, 70%) hsl(262, 100%, 78%) hsl(262, 100%, 88%) hsl(262, 90%, 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.

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) Green (Vivid)

#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: Font Recommendations

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 #610316 #EF4E4E

hsl(22, 83%, 19%) hsl(22, 78%, 55%) hsl(348, 94%, 20%) hsl(360, 83%, 62%)

#77340D #EF8E58 #8A041A #F86A6A

hsl(22, 80%, 26%) hsl(21, 83%, 64%) hsl(350, 94%, 28%) hsl(360, 91%, 69%)

#8C3D10 #FAB38B #AB091E #FF9B9B

hsl(22, 79%, 31%) hsl(22, 92%, 76%) hsl(352, 90%, 35%) hsl(360, 100%, 80%)

#AB4E19 #FFD3BA #CF1124 #FFBDBD

hsl(22, 74%, 38%) hsl(22, 100%, 86%) hsl(354, 85%, 44%) hsl(360, 100%, 87%)

#C65D21 #FFEFE6 #E12D39 #FFE3E3

hsl(22, 71%, 45%) hsl(22, 100%, 95%) hsl(356, 75%, 53%) hsl(360, 100%, 95%)
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 #014D40 #3EBD93

hsl(125, 86%, 14%) hsl(123, 35%, 51%) hsl(170, 97%, 15%) hsl(160, 51%, 49%)

#0E5814 #7BC47F #0C6B58 #65D6AD

hsl(125, 73%, 20%) hsl(123, 38%, 63%) hsl(168, 80%, 23%) hsl(158, 58%, 62%)

#207227 #A3D9A5 #147D64 #8EEDC7

hsl(125, 56%, 29%) hsl(122, 42%, 75%) hsl(166, 72%, 28%) hsl(156, 73%, 74%)

#2F8132 #C1EAC5 #199473 #C6F7E2

hsl(122, 47%, 35%) hsl(126, 49%, 84%) hsl(164, 71%, 34%) hsl(154, 75%, 87%)

#3F9142 #E3F9E5 #27AB83 #EFFCF6

hsl(122, 39%, 41%) hsl(125, 65%, 93%) hsl(162, 63%, 41%) hsl(152, 68%, 96%)

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%)
Refactoring UI: Color Palettes

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%)

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%)
Refactoring UI: Color Palettes

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%)

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%)
Refactoring UI: Color Palettes

Pink Pink (Vivid)

#5C0B33 #DA4A91 #44056E #9446ED

hsl(330, 79%, 20%) hsl(330, 66%, 57%) hsl(276, 91%, 23%) hsl(268, 82%, 60%)

#781244 #E668A7 #580A94 #A368FC

hsl(331, 74%, 27%) hsl(330, 72%, 65%) hsl(274, 87%, 31%) hsl(264, 96%, 70%)

#9B1B5A #F191C1 #690CB0 #B990FF

hsl(330, 70%, 36%) hsl(330, 77%, 76%) hsl(274, 87%, 37%) hsl(262, 100%, 78%)

#AD2167 #FAB8D9 #7A0ECC #DAC4FF

hsl(330, 68%, 40%) hsl(330, 87%, 85%) hsl(274, 87%, 43%) hsl(262, 100%, 88%)

#C42D78 #FFE0F0 #8719E0 #F2EBFE

hsl(330, 63%, 47%) hsl(329, 100%, 94%) hsl(273, 80%, 49%) hsl(262, 90%, 96%)