Useful Color Codes and Color Palettes
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/
