Originally shared as a carousel on @dailywebdesign, original carousel by @adarshxdesign.

Stop Using True Colors in UI Design: Practical Palettes for Digital Products

True black (#000000), true white (#FFFFFF), and pure primary colors look harsh in digital interfaces. Here's why senior designers avoid them and what to use instead.

Why True Colors Are Problematic

True Black (#000000)

Pure black creates maximum contrast, which can cause eye strain and looks unnatural on screens. Most operating systems use dark grays instead.

Use instead: #0A0A0A, #121212, #1A1A1A, these feel softer while still appearing 'black' to users.

True White (#FFFFFF)

Pure white is blinding in dark mode and creates harsh edges. It also makes light gray elements invisible.

Use instead: #FAFAFA, #F5F5F5, #FCFCFC, still appears white but reduces eye strain.

Pure Red/Green/Blue

Pure RGB primaries (#FF0000, #00FF00, #0000FF) look like error states and are hard to read. They lack sophistication.

Use instead: Tinted variants, #E5484D (red), #3CB043 (green), #1C7ED6 (blue).

Building a Practical Palette

1. Start with a neutral scale (9-10 grays from near-black to near-white)
2. Add your brand color in 5-6 shades
3. Include semantic colors (success, warning, error) in muted tones
4. Test on both light and dark mode
5. Ensure WCAG AA contrast ratios

Tools for Color Systems

• Coolors . Generate and test color palettes
• Realtime Colors . Preview colors in realistic UI contexts
• Tailwind Colors . Production-ready color scales

Ready to improve your color system? Try the NewForm mockup studio.

---

View the full carousel on Instagram →

Originally shared as a carousel on @dailywebdesign, original carousel by @adarshxdesign.