Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
From ui-design
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.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ui-design:color-palettesThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Each palette provides a cohesive set of **Primary**, **Neutral**, and **Supporting** colors with 10 shades each (dark to light). When building a UI:
Each palette provides a cohesive set of Primary, Neutral, and Supporting colors with 10 shades each (dark to light). When building a UI:
| 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%) |
| 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%) |
| 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%) |
(Same as Palette 1)
| 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%) |
| 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%) |
| 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%) |
(Same as Palette 1)
(Same as Palette 3 Teal)
(Same as Palette 1)
Uses the Blue Grey scale as both primary and neutral. Higher-contrast shades serve as primary actions.
(Same values as Palette 1 Blue Grey)
| 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%) |
| 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%) |
(Same as Palette 2 Yellow Vivid)
(Same as Palette 1 Cyan)
(Same as Palette 6 Warm Grey)
| 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%) |
| 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%) |
| 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%) |
| 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%) |
(Same as Palette 8)
| 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%) |
(Same as Palette 8)
| 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%) |
(Same as Palette 8)
| 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%) |
| 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%) |
| 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%) |
| 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%) |
| 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%) |
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin svengraziani-ui-designGuides completion of development work by verifying tests, detecting environment, and presenting structured options for merge, PR, or cleanup.
Guides creation and editing of skills using test-driven development with pressure scenarios and subagents to verify agent compliance.
Dispatches multiple subagents concurrently for independent tasks without shared state. Use when facing 2+ unrelated failures or subsystems that can be investigated in parallel.