For our most recent project, we need 24 distinct color codes that can be easily differentiated from the others. Here are my list of useful distinct 24 color codes:
| Color | Code | Color | Code |
| #f00 | #ff0 | ||
| #c00 | #cc0 | ||
| #900 | #990 | ||
| #600 | #660 | ||
| #0f0 | #f0f | ||
| #0c0 | #c0c | ||
| #090 | #909 | ||
| #060 | #606 | ||
| #00f | #0ff | ||
| #00c | #0cc | ||
| #009 | #099 | ||
| #006 | #066 |
Light mode palettes
Below are multiple pastel color palettes formatted in the same HTML table style you provided. Each row shows color swatches with their HEX codes.
Soft Pink & Lavender
| Color | Code | Color | Code |
| #ffd6e8 | #e6d6ff | ||
| #ffb3d9 | #d1b3ff | ||
| #ff99cc | #c299ff | ||
| #ff80bf | #b380ff |
Mint & Sky Blue
| Color | Code | Color | Code |
| #d6fff5 | #d6ecff | ||
| #b3ffea | #b3d9ff | ||
| #99ffe0 | #99caff | ||
| #80ffd6 | #80baff |
Peach & Cream
| Color | Code | Color | Code |
| #ffe5d6 | #fff5d6 | ||
| #ffd1b3 | #ffeb99 | ||
| #ffbf80 | #ffe066 | ||
| #ffa366 | #ffd24d |
Soft Neutral Grays & Beige
| Color | Code | Color | Code |
| #f5f5f5 | #f2e9e4 | ||
| #e0e0e0 | #e6d5c3 | ||
| #cccccc | #d8c3a5 | ||
| #bfbfbf | #cbb89d |
Dark mode palettes
Here are more consistent, practical dark mode palettes where each set follows a clear structure: background → surface → elevated surface → border → accent.
Slate UI (Modern SaaS)
| Color | Code | Color | Code |
| #111827 | #1f2937 | ||
| #374151 | #4b5563 | ||
| #60a5fa | #3b82f6 | ||
| #9ca3af | #e5e7eb |
Deep Indigo UI (Product Dashboards)
| Color | Code | Color | Code |
| #0f172a | #1e293b | ||
| #334155 | #475569 | ||
| #6366f1 | #818cf8 | ||
| #cbd5e1 | #f1f5f9 |
Soft Forest UI
| Color | Code | Color | Code |
| #0b1f1a | #102a23 | ||
| #1f3b32 | #2a4a3f | ||
| #34d399 | #10b981 | ||
| #d1fae5 | #ecfdf5 |
Warm UI (Modern Apps)
| Color | Code | Color | Code |
| #1c1917 | #292524 | ||
| #44403c | #57534e | ||
| #fb923c | #f97316 | ||
| #fde68a | #fff7ed |
Neutral UI (Clean Minimal SaaS)
| Color | Code | Color | Code |
| #0f172a | #1e293b | ||
| #334155 | #475569 | ||
| #94a3b8 | #cbd5e1 | ||
| #38bdf8 | #0ea5e9 |
Neon / cyberpunk palettes
Here are Neon / Cyberpunk color palettes designed for glowing UI styles, futuristic dashboards, and sci-fi interfaces. Each palette is structured for dark backgrounds + high-saturation neon accents.
Cyber Purple & Cyan
| Color | Code | Color | Code |
| #0b0b16 | #111827 | ||
| #22d3ee | #a855f7 | ||
| #06b6d4 | #c084fc | ||
| #38bdf8 | #f0abfc |
Electric Pink & Blue
| Color | Code | Color | Code |
| #0a0a0a | #0f172a | ||
| #ff00ff | #00e5ff | ||
| #ff2d95 | #3b82f6 | ||
| #ff6bd6 | #60a5fa |
Cyber Green (Matrix Inspired)
| Color | Code | Color | Code |
| #050505 | #0b1f1a | ||
| #00ff9f | #00ff66 | ||
| #00cc7a | #39ff14 | ||
| #a7f3d0 | #d1fae5 |
Retro Synthwave
| Color | Code | Color | Code |
| #0b0b16 | #1a103d | ||
| #ff0080 | #7c3aed | ||
| #ff4d6d | #a855f7 | ||
| #ffd166 | #06b6d4 |
Futuristic UI (Mixed Glow)
| Color | Code | Color | Code |
| #0f0f1a | #111827 | ||
| #00f5d4 | #ff00cc | ||
| #00e5ff | #8b5cf6 | ||
| #facc15 | #fb7185 |
Material UI–style palettes
Here are Material UI–style color palettes, designed in the spirit of Material UI and Google’s Material Design system. These follow a structured approach: 50 → 900 scale + accent colors + neutrals.
Primary UI Theme
| Color | Code | Color | Code |
| #E3F2FD | #BBDEFB | ||
| #90CAF9 | #64B5F6 | ||
| #42A5F5 | #1E88E5 | ||
| #1976D2 | #0D47A1 |
Green (Success / Growth Theme)
| Color | Code | Color | Code |
| #E8F5E9 | #C8E6C9 | ||
| #A5D6A7 | #81C784 | ||
| #66BB6A | #43A047 | ||
| #2E7D32 | #1B5E20 |
Red (Error / Alerts)
| Color | Code | Color | Code |
| #FFEBEE | #FFCDD2 | ||
| #EF9A9A | #E57373 | ||
| #EF5350 | #E53935 | ||
| #C62828 | #B71C1C |
Purple (Creative / Premium UI)
| Color | Code | Color | Code |
| #F3E5F5 | #E1BEE7 | ||
| #CE93D8 | #BA68C8 | ||
| #AB47BC | #8E24AA | ||
| #6A1B9A | #4A148C |
Neutral Grey (UI Foundation)
| Color | Code | Color | Code |
| #FAFAFA | #F5F5F5 | ||
| #EEEEEE | #E0E0E0 | ||
| #BDBDBD | #9E9E9E | ||
| #616161 | #212121 |
References
1. Official Material UI Palette Documentation
• https://mui.com/material-ui/customization/palette/
2. Google Material Design Color System
• https://m1.material.io/style/color.html
3. Material Design Color Tool (Palette Generator)
• https://material.io/resources/color/
4. MUI Color System Explanation Page
• https://mui.com/material-ui/customization/color/