---

name: color-palettes description: > 12 ready-to-use color palettes with exact hex and HSL values in a 50-900 shade scale. Covers primary, neutral, and supporting colors (cyan, blue, purple, teal, red, green, pink, indigo, warm grey, cool grey, blue grey). Apply whenever picking colors, defining CSS custom properties or Tailwind theme colors, choosing background/text/border colors, setting up a design system color scale, or needing semantic colors for error/warning/success states.

Color Palettes

How to Use These Palettes

Each palette provides a cohesive set of Primary, Neutral, and Supporting colors with 10 shades each (dark to light). When building a UI:

1. Pick one palette as your foundation
2. Primary colors (5-10% of UI): buttons, links, navigation, icons, accent borders, emphasized text
3. Neutral colors (80-90% of UI): text, backgrounds, panels, borders, secondary buttons
4. Supporting colors (5-10% of UI): semantic states (error, warning, success), accent features, badges

---

Palette 1 — Cyan + Blue Grey

Primary: Cyan

Shade	Hex	HSL
900	#044E54	hsl(184, 91%, 17%)
800	#0A6C74	hsl(185, 84%, 25%)
700	#0E7C86	hsl(185, 81%, 29%)
600	#14919B	hsl(184, 77%, 34%)
500	#2CB1BC	hsl(185, 62%, 45%)
400	#38BEC9	hsl(185, 57%, 50%)
300	#54D1DB	hsl(184, 65%, 59%)
200	#87EAF2	hsl(184, 80%, 74%)
100	#BEF8FD	hsl(185, 94%, 87%)
50	#E0FCFF	hsl(186, 100%, 94%)

Neutrals: Blue Grey

Shade	Hex	HSL
900	#102A43	hsl(209, 61%, 16%)
800	#243B53	hsl(211, 39%, 23%)
700	#334E68	hsl(209, 34%, 30%)
600	#486581	hsl(209, 28%, 39%)
500	#627D98	hsl(210, 22%, 49%)
400	#829AB1	hsl(209, 23%, 60%)
300	#9FB3C8	hsl(211, 27%, 70%)
200	#BCCCDC	hsl(210, 31%, 80%)
100	#D9E2EC	hsl(212, 33%, 89%)
50	#F0F4F8	hsl(210, 36%, 96%)

---

Palette 2 — Blue + Yellow Vivid + Blue Grey

Primary: Blue

Shade	Hex	HSL
900	#003E6B	hsl(205, 100%, 21%)
800	#0A558C	hsl(205, 87%, 29%)
700	#0F609B	hsl(205, 82%, 33%)
600	#186FAF	hsl(205, 76%, 39%)
500	#2680C2	hsl(205, 67%, 45%)
400	#4098D7	hsl(205, 65%, 55%)
300	#62B0E8	hsl(205, 74%, 65%)
200	#84C5F4	hsl(205, 84%, 74%)
100	#B6E0FE	hsl(205, 97%, 85%)
50	#DCEEFB	hsl(205, 79%, 92%)

Neutrals: Blue Grey

(Same as Palette 1)

Supporting: Yellow (Vivid)

Shade	Hex	HSL
900	#8D2B0B	hsl(15, 86%, 30%)
800	#B44D12	hsl(22, 82%, 39%)
700	#CB6E17	hsl(29, 80%, 44%)
600	#DE911D	hsl(36, 77%, 49%)
500	#F0B429	hsl(42, 87%, 55%)
400	#F7C948	hsl(44, 92%, 63%)
300	#FADB5F	hsl(48, 94%, 68%)
200	#FCE588	hsl(48, 95%, 76%)
100	#FFF3C4	hsl(48, 100%, 88%)
50	#FFFBEA	hsl(49, 100%, 96%)

---

Palette 3 — Purple + Teal + Blue Grey

Primary: Purple

Shade	Hex	HSL
900	#0C008C	hsl(245, 100%, 27%)
800	#1D0EBE	hsl(245, 86%, 40%)
700	#3525E6	hsl(245, 79%, 52%)
600	#4D3DF7	hsl(245, 92%, 60%)
500	#5D55FA	hsl(243, 94%, 66%)
400	#7069FA	hsl(243, 94%, 70%)
300	#8888FC	hsl(240, 95%, 76%)
200	#A2A5FC	hsl(238, 94%, 81%)
100	#C4C6FF	hsl(238, 100%, 88%)
50	#E6E6FF	hsl(240, 100%, 95%)

Primary: Teal

Shade	Hex	HSL
900	#014D40	hsl(170, 97%, 15%)
800	#0C6B58	hsl(168, 80%, 23%)
700	#147D64	hsl(166, 72%, 28%)
600	#199473	hsl(164, 71%, 34%)
500	#27AB83	hsl(162, 63%, 41%)
400	#3EBD93	hsl(160, 51%, 49%)
300	#65D6AD	hsl(158, 58%, 62%)
200	#8EEDC7	hsl(156, 73%, 74%)
100	#C6F7E2	hsl(154, 75%, 87%)
50	#EFFCF6	hsl(152, 68%, 96%)

Neutrals: Blue Grey

(Same as Palette 1)

---

Palette 4 — Teal + Blue Grey

Primary: Teal

(Same as Palette 3 Teal)

Neutrals: Blue Grey

(Same as Palette 1)

---

Palette 5 — Blue Grey as Primary/Neutrals

Primary/Neutrals: Blue Grey

Uses the Blue Grey scale as both primary and neutral. Higher-contrast shades serve as primary actions.

(Same values as Palette 1 Blue Grey)

---

Palette 6 — Red + Yellow Vivid + Warm Grey

Primary: Red

Shade	Hex	HSL
900	#610404	hsl(360, 92%, 20%)
800	#780A0A	hsl(360, 85%, 25%)
700	#911111	hsl(360, 79%, 32%)
600	#A61B1B	hsl(360, 72%, 38%)
500	#BA2525	hsl(360, 67%, 44%)
400	#D64545	hsl(360, 64%, 55%)
300	#E66A6A	hsl(360, 71%, 66%)
200	#F29B9B	hsl(360, 77%, 78%)
100	#FACDCD	hsl(360, 82%, 89%)
50	#FFEEEE	hsl(360, 100%, 97%)

Neutrals: Warm Grey

Shade	Hex	HSL
900	#27241D	hsl(42, 15%, 13%)
800	#423D33	hsl(40, 13%, 23%)
700	#504A40	hsl(37, 11%, 28%)
600	#625D52	hsl(41, 9%, 35%)
500	#857F72	hsl(41, 8%, 48%)
400	#A39E93	hsl(41, 8%, 61%)
300	#B8B2A7	hsl(39, 11%, 69%)
200	#D3CEC4	hsl(40, 15%, 80%)
100	#E8E6E1	hsl(43, 13%, 90%)
50	#FAF9F7	hsl(40, 23%, 97%)

Supporting: Yellow (Vivid)

(Same as Palette 2 Yellow Vivid)

---

Palette 7 — Cyan + Warm Grey

Primary: Cyan

(Same as Palette 1 Cyan)

Neutrals: Warm Grey

(Same as Palette 6 Warm Grey)

---

Palette 8 — Blue Vivid + Cool Grey

Primary: Blue (Vivid)

Shade	Hex	HSL
900	#002159	hsl(218, 100%, 17%)
800	#01337D	hsl(216, 98%, 25%)
700	#03449E	hsl(215, 96%, 32%)
600	#0552B5	hsl(214, 95%, 36%)
500	#0967D2	hsl(212, 92%, 43%)
400	#2186EB	hsl(210, 83%, 53%)
300	#47A3F3	hsl(208, 88%, 62%)
200	#7CC4FA	hsl(206, 93%, 73%)
100	#BAE3FF	hsl(204, 100%, 86%)
50	#E6F6FF	hsl(202, 100%, 95%)

Neutrals: Cool Grey

Shade	Hex	HSL
900	#1F2933	hsl(210, 24%, 16%)
800	#323F4B	hsl(209, 20%, 25%)
700	#3E4C59	hsl(209, 18%, 30%)
600	#52606D	hsl(209, 14%, 37%)
500	#616E7C	hsl(211, 12%, 43%)
400	#7B8794	hsl(211, 10%, 53%)
300	#9AA5B1	hsl(211, 13%, 65%)
200	#CBD2D9	hsl(210, 16%, 82%)
100	#E4E7EB	hsl(214, 15%, 91%)
50	#F5F7FA	hsl(216, 33%, 97%)

Supporting: Red (Vivid)

Shade	Hex	HSL
900	#610316	hsl(348, 94%, 20%)
800	#8A041A	hsl(350, 94%, 28%)
700	#AB091E	hsl(352, 90%, 35%)
600	#CF1124	hsl(354, 85%, 44%)
500	#E12D39	hsl(356, 75%, 53%)
400	#EF4E4E	hsl(360, 83%, 62%)
300	#F86A6A	hsl(360, 91%, 69%)
200	#FF9B9B	hsl(360, 100%, 80%)
100	#FFBDBD	hsl(360, 100%, 87%)
50	#FFE3E3	hsl(360, 100%, 95%)

---

Palette 9 — Light Blue Vivid + Cool Grey

Primary: Light Blue (Vivid)

Shade	Hex	HSL
900	#035388	hsl(204, 96%, 27%)
800	#0B69A3	hsl(203, 87%, 34%)
700	#127FBF	hsl(202, 83%, 41%)
600	#1992D4	hsl(201, 79%, 46%)
500	#2BB0ED	hsl(199, 84%, 55%)
400	#40C3F7	hsl(197, 92%, 61%)
300	#5ED0FA	hsl(196, 94%, 67%)
200	#81DEFD	hsl(195, 97%, 75%)
100	#B3ECFF	hsl(195, 100%, 85%)
50	#E3F8FF	hsl(195, 100%, 95%)

Neutrals: Cool Grey

(Same as Palette 8)

---

Palette 10 — Indigo + Cool Grey

Primary: Indigo

Shade	Hex	HSL
900	#19216C	hsl(234, 62%, 26%)
800	#2D3A8C	hsl(232, 51%, 36%)
700	#35469C	hsl(230, 49%, 41%)
600	#4055A8	hsl(228, 45%, 45%)
500	#4C63B6	hsl(227, 42%, 51%)
400	#647ACB	hsl(227, 50%, 59%)
300	#7B93DB	hsl(225, 57%, 67%)
200	#98AEEB	hsl(224, 67%, 76%)
100	#BED0F7	hsl(221, 78%, 86%)
50	#E0E8F9	hsl(221, 68%, 93%)

Neutrals: Cool Grey

(Same as Palette 8)

---

Palette 11 — Pink Vivid + Cool Grey

Primary: Pink (Vivid)

Shade	Hex	HSL
900	#620042	hsl(320, 100%, 19%)
800	#870557	hsl(322, 93%, 27%)
700	#A30664	hsl(324, 93%, 33%)
600	#BC0A6F	hsl(326, 90%, 39%)
500	#DA127D	hsl(328, 85%, 46%)
400	#E8368F	hsl(330, 79%, 56%)
300	#F364A2	hsl(334, 86%, 67%)
200	#FF8CBA	hsl(336, 100%, 77%)
100	#FFB8D2	hsl(338, 100%, 86%)
50	#FFE3EC	hsl(341, 100%, 95%)

Neutrals: Cool Grey

(Same as Palette 8)

---

Palette 12 — Green + Pure Grey

Primary: Green

Shade	Hex	HSL
900	#05400A	hsl(125, 86%, 14%)
800	#0E5814	hsl(125, 73%, 20%)
700	#207227	hsl(125, 56%, 29%)
600	#2F8132	hsl(122, 47%, 35%)
500	#3F9142	hsl(122, 39%, 41%)
400	#57AE5B	hsl(123, 35%, 51%)
300	#7BC47F	hsl(123, 38%, 63%)
200	#A3D9A5	hsl(122, 42%, 75%)
100	#C1EAC5	hsl(126, 49%, 84%)
50	#E3F9E5	hsl(125, 65%, 93%)

Neutrals: Grey (Pure)

Shade	Hex	HSL
900	#222222	hsl(0, 0%, 13%)
800	#3B3B3B	hsl(0, 0%, 23%)
700	#515151	hsl(0, 0%, 32%)
600	#626262	hsl(0, 0%, 38%)
500	#7E7E7E	hsl(0, 0%, 49%)
400	#9E9E9E	hsl(0, 0%, 62%)
300	#B1B1B1	hsl(0, 0%, 69%)
200	#CFCFCF	hsl(0, 0%, 81%)
100	#E1E1E1	hsl(0, 0%, 88%)
50	#F7F7F7	hsl(0, 0%, 97%)

---

Common Supporting Colors (Reusable Across Palettes)

Red (Standard)

Shade	Hex	HSL
900	#610404	hsl(360, 92%, 20%)
800	#780A0A	hsl(360, 85%, 25%)
700	#911111	hsl(360, 79%, 32%)
600	#A61B1B	hsl(360, 72%, 38%)
500	#BA2525	hsl(360, 67%, 44%)
400	#D64545	hsl(360, 64%, 55%)
300	#E66A6A	hsl(360, 71%, 66%)
200	#F29B9B	hsl(360, 77%, 78%)
100	#FACDCD	hsl(360, 82%, 89%)
50	#FFEEEE	hsl(360, 100%, 97%)

Yellow (Standard)

Shade	Hex	HSL
900	#513C06	hsl(43, 86%, 17%)
800	#7C5E10	hsl(43, 77%, 27%)
700	#A27C1A	hsl(43, 72%, 37%)
600	#C99A2E	hsl(42, 63%, 48%)
500	#E9B949	hsl(42, 78%, 60%)
400	#F7D070	hsl(43, 89%, 70%)
300	#F9DA8B	hsl(43, 90%, 76%)
200	#F8E3A3	hsl(45, 86%, 81%)
100	#FCEFC7	hsl(45, 90%, 88%)
50	#FFFAEB	hsl(45, 100%, 96%)

Teal (Standard)

Shade	Hex	HSL
900	#014D40	hsl(170, 97%, 15%)
800	#0C6B58	hsl(168, 80%, 23%)
700	#147D64	hsl(166, 72%, 28%)
600	#199473	hsl(164, 71%, 34%)
500	#27AB83	hsl(162, 63%, 41%)
400	#3EBD93	hsl(160, 51%, 49%)
300	#65D6AD	hsl(158, 58%, 62%)
200	#8EEDC7	hsl(156, 73%, 74%)
100	#C6F7E2	hsl(154, 75%, 87%)
50	#EFFCF6	hsl(152, 68%, 96%)

---

Color Usage Guidelines

Primary Colors

• Should appear the most in the UI
• Use for: primary actions, links, navigation items, icons, accent borders, emphasized text
• Pick the 500 shade as the base (good for button backgrounds)
• Use 700-900 for text on colored backgrounds
• Use 50-200 for tinted backgrounds (alerts, badges, selected states)

Neutral Colors

• Make up the majority of the UI (80-90%)
• Use for: text, backgrounds, panels, borders, secondary buttons, form controls
• 900: darkest text (headings)
• 700: body text
• 500: secondary text, icons
• 300: borders, dividers
• 100: subtle backgrounds
• 50: page backgrounds

Supporting Colors

• Use sparingly to avoid overpowering primary colors
• Red: errors, destructive actions, negative trends
• Yellow/Orange: warnings, pending states
• Green/Teal: success, positive trends, completed states
• Blue: informational, links (when primary isn't blue)