Trending Color Shades & Presets
Explore thousands of generated color shades and tints starting from 8000+ hand-picked foundation swatches. Categorized across warm, cool, pastel, neon, earthy, jewel, vintage, autumn, ocean, metallic, solid/named, and grayscale families, every selection unlocks a complete, production-ready spectrum with instant HEX, RGB, CMYK, and HSL values for modern web, brand, and print design.
🌈 Your Color Personality
Ever wondered which palette matches your vibe? Pick a mood below — we'll show you a unique combination you can save or export.
🔥 Community & Trending Color Shades
Color shades saved and liked by other designers. Trending is ranked by likes; Gallery shows the newest community submissions.
Loading palettes…
Color Library
🎚️ Tints & Shades Generator
Pick any base color to instantly generate its full tint (mixed with white) and shade (mixed with black) scale — perfect for building a consistent, modern UI system.
Tints (mixed with white)
Shades (mixed with black)
🧭 How to Pick Colors for Design
A quick, practical framework — no color theory degree required.
- Start with mood, not hex codes. Decide if the design should feel calm, bold, playful, or premium, then browse the matching category above.
- Pick one dominant color, one neutral, one accent. Most modern interfaces use roughly 60% neutral, 30% dominant, 10% accent.
- Use tints & shades for hierarchy. Lighten a color for backgrounds/hover states, darken it for text and pressed states, instead of introducing unrelated new colors.
- Check contrast. Text over a background should be easy to read — aim for a clear light/dark difference between the two.
- Convert for the right medium. Use HEX/RGB for screens and web, and CMYK for print — the modal on every swatch gives you both.
🏷️ Popular Named Color Codes
Quick-reference hex, RGB, and HSL values for trending design colors—including Tan, Terracotta, Feria Red, and more.
Tan — HEX #D2B48C · RGB 210, 180, 140 · HSL 34°, 44%, 69%
Base: #D2B48C | Tints: #F6EFE5, #EFE3D3, #E7D7C0, #DECBAE | Shades: #BA9B73, #9E7E56, #80613B, #614522
A warm neutral used for backgrounds, leather goods, and organic skin-tone palettes. Best used as a card background or subtle sidebar panels.
Terracotta — HEX #E2725B · RGB 226, 114, 91 · HSL 10°, 70%, 62%
Base: #E2725B | Tints: #F9E3DF, #F4C7BE, #EEAA9D, #E88E7C | Shades: #C85943, #A9402C, #8A2817, #691204
A clay-inspired orange-red popular in earthy, autumn, and pottery-style branding. Excellent for warm, welcoming primary call-to-actions.
Feria Red — HEX #B63630 · RGB 182, 54, 48 · HSL 3°, 58%, 45%
Base: #B63630 | Tints: #F1D7D5, #E3AEAB, #D58682, #C55E59 | Shades: #9C231E, #7F110E, #610302, #420000
A deep red reference shade commonly searched alongside hair-color numbering charts. Use it for bold, energetic UI elements or dynamic accent lines.
Butter Yellow — HEX #FFEAA7 · RGB 255, 234, 167 · HSL 46°, 100%, 83%
Base: #FFEAA7 | Tints: #FFFDF5, #FFF9E5, #FFF3D1, #FFECA3 | Shades: #E2C983, #C4A962, #A68A43, #896B26
A soft, warm pastel yellow that brings joy and approachability to interfaces. Perfect for banners, highlights, and warning badges.
Dill Green — HEX #8FA89B · RGB 143, 168, 155 · HSL 149°, 13%, 61%
Base: #8FA89B | Tints: #F3F6F4, #E2ECE7, #D0E0D7, #BED3C7 | Shades: #738C7E, #587163, #405649, #293C31
An organic, muted sage green that represents nature, balance, and modern wellness branding. Incredible for sleek, minimalist interfaces.
Royal Blue — HEX #2D3436 · RGB 9, 132, 227 · HSL 208°, 92%, 46%
Base: #0984E3 | Tints: #E6F3FC, #BFDFF7, #99CAF3, #4CA0E9 | Shades: #076CB9, #05548E, #033B64, #01223A
A vivid, high-contrast digital blue. Outstanding for technology interfaces, secure interactive elements, and crisp links.
Vibrant Green — HEX #00B894 · RGB 0, 184, 148 · HSL 168°, 100%, 36%
Base: #00B894 | Tints: #E6F8F4, #BFECE2, #99E1D1, #4DC9B0 | Shades: #009679, #00745D, #005242, #003027
A highly energetic neon-teal green. The absolute industry favorite for success states, active features, and modern finance dashboards.
Orchid Purple — HEX #6C5CE7 · RGB 108, 92, 231 · HSL 247°, 74%, 63%
Base: #6C5CE7 | Tints: #F0EEFC, #DCD8F9, #C8C2F5, #A096EF | Shades: #5242CC, #3E2FB2, #2B1D97, #180D7C
A futuristic neon-purple built for creative tech platforms. Excellent as a brand accent, rich hover state, or dark-mode active indicator.
Pastel Pink — HEX #FF80AB · RGB 255, 128, 171 · HSL 340°, 100%, 75%
Base: #FF80AB | Tints: #FFF2F6, #FFD9E6, #FFBFD5, #FF99B2 | Shades: #E65C8C, #CC3D70, #9E224F, #6E0E32
An energetic yet playful sweet-pink hue. Works seamlessly for e-commerce badges, active love states, or creative fashion applications.
Muted Neutrals (Slate Grey) — HEX #636E72 · RGB 99, 110, 114 · HSL 196°, 7%, 42%
Base: #636E72 | Tints: #F0F1F1, #D8DCDC, #BFC5C7, #8F9AA0 | Shades: #4F585B, #3C4245, #292D2F, #161819
The perfect layout stabilizer. Use these shades for structural borders, secondary menu text, and structural dark-mode dividers.
🎛️ How to use the Tints & Shades Generator
Pick or paste any base color value directly into our analyzer to instantly calculate a beautifully balanced tint scale (mixed dynamically with pure white) and shade scale (mixed dynamically with dark-base black). This generator automatically prevents layout shifts, giving you ready-to-copy utility colors to construct your app’s cohesive visual system on the fly.
🌐 Share with our Community & Trending Color Shades
Found an elite palette? Tap Share to Community right inside the color details modal to add your discovery to our public showcase. Browse trending color profiles, inspect and test user-generated schemes, and vote for your favorite shades to help the design community find the absolute best palettes!
Search any of these codes above—or paste your own custom Hex/RGB/HSL value—to jump straight to its detail modal!
❓ Frequently Asked Questions
How do I pick the right colors for a design?
Choose one dominant color that matches the mood you want, pair it with a neutral for backgrounds and text, and add a single accent color for calls-to-action. Use the tints & shades tool above to build lighter and darker variants instead of adding more unrelated colors.
What's the difference between a tint, a shade and a tone?
A tint is a color mixed with white (lighter), a shade is a color mixed with black (darker), and a tone is a color mixed with gray (more muted). All three keep the same underlying hue.
What's the difference between RGB and CMYK?
RGB (Red, Green, Blue) is an additive model used for screens and digital design. CMYK (Cyan, Magenta, Yellow, Key/black) is a subtractive model used for printing. The same color can render slightly differently between the two, so always confirm CMYK values with your printer before production.
Which palettes look modern for 2026 UI design?
Muted, earthy, and grayscale families combined with a single saturated accent are currently popular for modern, minimal interfaces. Neon and jewel tones work well as small accent moments rather than full backgrounds.
What is the hex code for Tan, Terracotta or Feria red?
Tan is #D2B48C, Terracotta is #E2725B, and Feria red is #B63630. All three (plus dozens more named colors like Charcoal, Rust, and Olive) are in the Solid category of the color library above, with full RGB, CMYK and HSL conversions.
Can I use these colors for free, including commercial projects?
Yes. HEX, RGB and CMYK values are open color data, not copyrightable design assets, so you're free to use them in personal and commercial work.
Can I export or download a palette?
Yes — use the "Export" buttons next to any palette, the Tints & Shades scale, or your Favorites list to download CSS variables or a JSON file you can drop straight into a project.