@mossui/colors
v0.0.4
Published
Colors
Readme
Moss UI - Colors
A comprehensive CSS color palette library with semantic naming and easy-to-use CSS variables.
Features
- 🎨 18 color families
- 🖌️ CSS variables for easy theming
- 📦 Lightweight (~6KB minified)
- 🌍 Available via NPM and CDN
- 🏗️ Framework agnostic
Installation
NPM
# npm
npm i @mossui/colorsThen import in your CSS:
@import '@mossui/colors';CDN
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@mossui/colors/dist/colors.min.css"
/>Usage
<h1>Hello World</h1>h1 {
color: var(--color-red-500)
}Color pallete
Moss UI provides a complete color system with 18 color families:
| Variable | Value | Color Preview |
|----------|-------|---------------|
| --color-white | #fff | 
|
| --color-black | #000 | 
|
| --color-red-50 | #fff | |
| --color-red-100 | #fedcde | 
|
| --color-red-200 | #fdaaae | 
|
| --color-red-300 | #fc787f | 
|
| --color-red-400 | #fb464f | 
|
| --color-red-500 | #fb2d38 | 
|
| --color-red-600 | #f00511 | 
|
| --color-red-700 | #be040d | 
|
| --color-red-800 | #8c030a | 
|
| --color-red-900 | #5a0206 | 
|
| --color-red-950 | #410105 | 
|
| --color-red | #fb2d38 | |
| --color-orange-50 | #fff0e6 | 
|
| --color-orange-100 | #ffd2b3 | 
|
| --color-orange-200 | #ffb480 | 
|
| --color-orange-300 | #ff964d | 
|
| --color-orange-400 | #ff781a | 
|
| --color-orange-500 | #ff6900 | 
|
| --color-orange-600 | #cc5400 | 
|
| --color-orange-700 | #993f00 | 
|
| --color-orange-800 | #662a00 | 
|
| --color-orange-900 | #331500 | 
|
| --color-orange-950 | #1a0a00 | 
|
| --color-orange | #ff6900 | |
| --color-amber-50 | #fff5e6 | 
|
| --color-amber-100 | #ffe1b3 | 
|
| --color-amber-200 | #ffcd80 | 
|
| --color-amber-300 | #ffb94d | 
|
| --color-amber-400 | #ffa51a | 
|
| --color-amber-500 | #ff9b00 | 
|
| --color-amber-600 | #cc7c00 | 
|
| --color-amber-700 | #995d00 | 
|
| --color-amber-800 | #663e00 | 
|
| --color-amber-900 | #331f00 | 
|
| --color-amber-950 | #1a1000 | 
|
| --color-amber | #ff9b00 | |
| --color-yellow-50 | #fff4d6 | 
|
| --color-yellow-100 | #ffe7a3 | 
|
| --color-yellow-200 | #ffda70 | 
|
| --color-yellow-300 | #ffcd3d | 
|
| --color-yellow-400 | #ffbf0a | 
|
| --color-yellow-500 | #f0b100 | 
|
| --color-yellow-600 | #bd8c00 | 
|
| --color-yellow-700 | #8a6600 | 
|
| --color-yellow-800 | #574000 | 
|
| --color-yellow-900 | #241a00 | 
|
| --color-yellow-950 | #0a0800 | 
|
| --color-yellow | #f0b100 | |
| --color-lime-50 | #e1ffb3 | 
|
| --color-lime-100 | #ccff80 | 
|
| --color-lime-200 | #b8ff4d | 
|
| --color-lime-300 | #a4ff1a | 
|
| --color-lime-400 | #8ae600 | 
|
| --color-lime-500 | #7bcc00 | 
|
| --color-lime-600 | #5c9900 | 
|
| --color-lime-700 | #3d6600 | 
|
| --color-lime-800 | #1f3300 | 
|
| --color-lime-900 | #000 | |
| --color-lime-950 | #000 | |
| --color-lime | #7bcc00 | |
| --color-green-50 | #adffce | 
|
| --color-green-100 | #7affb0 | 
|
| --color-green-200 | #47ff91 | 
|
| --color-green-300 | #14ff73 | 
|
| --color-green-400 | #00e05a | 
|
| --color-green-500 | #00c750 | 
|
| --color-green-600 | #00943b | 
|
| --color-green-700 | #006127 | 
|
| --color-green-800 | #002e12 | 
|
| --color-green-900 | #000 | |
| --color-green-950 | #000 | |
| --color-green | #00c750 | |
| --color-emerald-50 | #a3ffe0 | 
|
| --color-emerald-100 | #70ffcf | 
|
| --color-emerald-200 | #3dffbe | 
|
| --color-emerald-300 | #0affac | 
|
| --color-emerald-400 | #00d68e | 
|
| --color-emerald-500 | #00bd7d | 
|
| --color-emerald-600 | #008a5b | 
|
| --color-emerald-700 | #005739 | 
|
| --color-emerald-800 | #002418 | 
|
| --color-emerald-900 | #000 | |
| --color-emerald-950 | #000 | |
| --color-emerald | #00bd7d | |
| --color-teal-50 | #a3fff5 | 
|
| --color-teal-100 | #70fff0 | 
|
| --color-teal-200 | #3dffea | 
|
| --color-teal-300 | #0affe5 | 
|
| --color-teal-400 | #00d6bf | 
|
| --color-teal-500 | #00bda9 | 
|
| --color-teal-600 | #008a7b | 
|
| --color-teal-700 | #00574d | 
|
| --color-teal-800 | #002420 | 
|
| --color-teal-900 | #000 | |
| --color-teal-950 | #000 | |
| --color-teal | #00bda9 | |
| --color-cyan-50 | #c2f5ff | 
|
| --color-cyan-100 | #8fedff | 
|
| --color-cyan-200 | #5ce5ff | 
|
| --color-cyan-300 | #29ddff | 
|
| --color-cyan-400 | #00cef5 | 
|
| --color-cyan-500 | #00b9db | 
|
| --color-cyan-600 | #008ea8 | 
|
| --color-cyan-700 | #006375 | 
|
| --color-cyan-800 | #003842 | 
|
| --color-cyan-900 | #000d0f | 
|
| --color-cyan-950 | #000 | |
| --color-cyan | #00b9db | |
| --color-sky-50 | #dbf4ff | 
|
| --color-sky-100 | #a8e3ff | 
|
| --color-sky-200 | #75d3ff | 
|
| --color-sky-300 | #42c2ff | 
|
| --color-sky-400 | #0fb2ff | 
|
| --color-sky-500 | #00a6f5 | 
|
| --color-sky-600 | #0084c2 | 
|
| --color-sky-700 | #00618f | 
|
| --color-sky-800 | #003e5c | 
|
| --color-sky-900 | #001c29 | 
|
| --color-sky-950 | #000a0f | 
|
| --color-sky | #00a6f5 | |
| --color-blue-50 | #fff | |
| --color-blue-100 | #dbe9ff | 
|
| --color-blue-200 | #a8cbff | 
|
| --color-blue-300 | #75acff | 
|
| --color-blue-400 | #428dff | 
|
| --color-blue-500 | #297eff | 
|
| --color-blue-600 | #0061f5 | 
|
| --color-blue-700 | #004dc2 | 
|
| --color-blue-800 | #00398f | 
|
| --color-blue-900 | #00245c | 
|
| --color-blue-950 | #001a42 | 
|
| --color-blue | #297eff | |
| --color-indigo-50 | #fff | |
| --color-indigo-100 | #fff | |
| --color-indigo-200 | #e1e0ff | 
|
| --color-indigo-300 | #afadff | 
|
| --color-indigo-400 | #7d7aff | 
|
| --color-indigo-500 | #6361ff | 
|
| --color-indigo-600 | #312eff | 
|
| --color-indigo-700 | #0400fa | 
|
| --color-indigo-800 | #0300c7 | 
|
| --color-indigo-900 | #020094 | 
|
| --color-indigo-950 | #02007a | 
|
| --color-indigo | #6361ff | |
| --color-violet-50 | #fff | |
| --color-violet-100 | #fff | |
| --color-violet-200 | #e1d1ff | 
|
| --color-violet-300 | #c09eff | 
|
| --color-violet-400 | #9f6bff | 
|
| --color-violet-500 | #8e52ff | 
|
| --color-violet-600 | #6d1fff | 
|
| --color-violet-700 | #5200eb | 
|
| --color-violet-800 | #4000b8 | 
|
| --color-violet-900 | #2e0085 | 
|
| --color-violet-950 | #25006b | 
|
| --color-violet | #8e52ff | |
| --color-purple-50 | #fff | |
| --color-purple-100 | #fdfaff | 
|
| --color-purple-200 | #e6c7ff | 
|
| --color-purple-300 | #cf94ff | 
|
| --color-purple-400 | #b961ff | 
|
| --color-purple-500 | #ad47ff | 
|
| --color-purple-600 | #9714ff | 
|
| --color-purple-700 | #7d00e0 | 
|
| --color-purple-800 | #6000ad | 
|
| --color-purple-900 | #44007a | 
|
| --color-purple-950 | #360061 | 
|
| --color-purple | #ad47ff | |
| --color-fuchsia-50 | #fff | |
| --color-fuchsia-100 | #fadcfe | 
|
| --color-fuchsia-200 | #f3aafd | 
|
| --color-fuchsia-300 | #ec78fc | 
|
| --color-fuchsia-400 | #e546fb | 
|
| --color-fuchsia-500 | #e12dfb | 
|
| --color-fuchsia-600 | #d305f0 | 
|
| --color-fuchsia-700 | #a704be | 
|
| --color-fuchsia-800 | #7b038c | 
|
| --color-fuchsia-900 | #4f025a | 
|
| --color-fuchsia-950 | #390141 | 
|
| --color-fuchsia | #e12dfb | |
| --color-pink-50 | #fff | |
| --color-pink-100 | #feddee | 
|
| --color-pink-200 | #fcacd6 | 
|
| --color-pink-300 | #f97abe | 
|
| --color-pink-400 | #f74aa6 | 
|
| --color-pink-500 | #f6319a | 
|
| --color-pink-600 | #eb0a81 | 
|
| --color-pink-700 | #ba0866 | 
|
| --color-pink-800 | #89064b | 
|
| --color-pink-900 | #580430 | 
|
| --color-pink-950 | #400323 | 
|
| --color-pink | #f6319a | |
| --color-rose-50 | #fff | |
| --color-rose-100 | #ffd1dc | 
|
| --color-rose-200 | #ff9eb6 | 
|
| --color-rose-300 | #ff6b8f | 
|
| --color-rose-400 | #ff3869 | 
|
| --color-rose-500 | #ff1f56 | 
|
| --color-rose-600 | #eb0039 | 
|
| --color-rose-700 | #b8002d | 
|
| --color-rose-800 | #850020 | 
|
| --color-rose-900 | #520014 | 
|
| --color-rose-950 | #38000e | 
|
| --color-rose | #ff1f56 | |
| --color-slate-50 | #e7eaee | 
|
| --color-slate-100 | #c9d0d9 | 
|
| --color-slate-200 | #abb5c4 | 
|
| --color-slate-300 | #8d9bb0 | 
|
| --color-slate-400 | #6f819b | 
|
| --color-slate-500 | #62748d | 
|
| --color-slate-600 | #4d5b6f | 
|
| --color-slate-700 | #384351 | 
|
| --color-slate-800 | #242a33 | 
|
| --color-slate-900 | #0f1115 | 
|
| --color-slate-950 | #040506 | 
|
| --color-slate | #62748d | |
| --color-gray-50 | #e6e7ea | 
|
| --color-gray-100 | #cacdd3 | 
|
| --color-gray-200 | #aeb3bc | 
|
| --color-gray-300 | #9298a5 | 
|
| --color-gray-400 | #767e8f | 
|
| --color-gray-500 | #6a7181 | 
|
| --color-gray-600 | #535965 | 
|
| --color-gray-700 | #3c4049 | 
|
| --color-gray-800 | #25272d | 
|
| --color-gray-900 | #0e0f11 | 
|
| --color-gray-950 | #020203 | 
|
| --color-gray | #6a7181 | |
| --color-zinc-50 | #e7e7e9 | 
|
| --color-zinc-100 | #cdcdd0 | 
|
| --color-zinc-200 | #b2b2b8 | 
|
| --color-zinc-300 | #9898a0 | 
|
| --color-zinc-400 | #7d7d87 | 
|
| --color-zinc-500 | #71717a | 
|
| --color-zinc-600 | #58585f | 
|
| --color-zinc-700 | #404045 | 
|
| --color-zinc-800 | #27272a | 
|
| --color-zinc-900 | #0f0f10 | 
|
| --color-zinc-950 | #020203 | |
| --color-zinc | #71717a | |
| --color-neutral-50 | #e6e6e6 | 
|
| --color-neutral-100 | #ccc | 
|
| --color-neutral-200 | #b3b3b3 | 
|
| --color-neutral-300 | #999 | 
|
| --color-neutral-400 | grey | 
|
| --color-neutral-500 | #737373 | 
|
| --color-neutral-600 | #595959 | 
|
| --color-neutral-700 | #404040 | 
|
| --color-neutral-800 | #262626 | 
|
| --color-neutral-900 | #0d0d0d | 
|
| --color-neutral-950 | #000 | |
| --color-neutral | #737373 | |
| --color-stone-50 | #e7e5e4 | 
|
| --color-stone-100 | #cfcbc9 | 
|
| --color-stone-200 | #b7b2ae | 
|
| --color-stone-300 | #9f9893 | 
|
| --color-stone-400 | #877e78 | 
|
| --color-stone-500 | #7a726c | 
|
| --color-stone-600 | #5f5854 | 
|
| --color-stone-700 | #443f3c | 
|
| --color-stone-800 | #292624 | 
|
| --color-stone-900 | #0e0d0c | 
|
| --color-stone-950 | #000 | |
| --color-stone | #7a726c | |
License
Licensed under the MIT license.
Contributors
Contributions are welcome! Please feel free to submit a Pull Request.