RGB vs HSL vs LAB vs CMYK: Which Color Model Should You Use, and When
Four color models, one practical answer: which to use in CSS, which to use in print, and why LAB quietly became the most important of all.
A tested library of 60+ color combinations with hex codes for websites, brands, interiors, and UI — organized by mood and industry, with usage notes for each.
Every designer keeps a swipe file of palettes that work. This article is ours, opened up: sixty-plus combinations with actual hex values, organized by the job you need them to do rather than by color name. Each entry includes a short note on why the pairing succeeds and where it performs best, because a palette without context is just decoration.
A quick note on method: every combination here follows at least one classical harmony (monochromatic, analogous, complementary, split-complementary, or triadic) — if the logic behind those schemes isn't familiar, our color theory guide explains the mechanics in ten minutes. And since contrast matters as much as harmony, we've flagged combos that pass WCAG AA for body text; run anything else through the checker on our explore page before committing.
Reliable palettes built on cool neutrals with disciplined accents.
#2D3436 · #0984E3 · #DFE6E9 · #FFFFFF. Charcoal anchors, cobalt acts, pale blue-gray breathes. The default answer for trustworthy B2B.#3B4252 · #4C566A · #D8DEE9 · #ECEFF4. Monochromatic slate ramp; ideal for documentation and developer tools.#1565C0 · #42A5F5 · #F5F9FF · #0D47A1. Layered blues signal hygiene and competence; strong choice for health tech.#212529 · #495057 · #ADB5BD · #F8F9FA. Near-total neutral scheme for fintech dashboards where data must dominate.#00695C · #26A69A · #E0F2F1 · #004D40. Teal reads as both professional and fresh; passes contrast easily when paired with white.#1B2A4A · #3E5C96 · #C9D6EA · #FAFBFD. Navy-forward, print-inspired; law firms and consultancies.#37474F · #607D8B · #CFD8DC · #FFFFFF. Cool gray quartet that photographs well; portfolio sites.Analogous warmth that feels human and appetizing.
#B3573F · #D98E73 · #F2E3D5 · #5C2E22. Clay tones over parchment; food blogs and boutique hotels.#FFDDC1 · #FFAB73 · #FF6F61 · #C84B31. Sunset gradient family; lifestyle magazines.#3B1F0E · #714A2E · #C68642 · #F3EBE0. Coffee-house browns; cafés and bakeries wanting warmth without red.#BC8A3C · #8C5E2A · #EFE0CB · #402E13. Mustard-on-linen; artisan brands.#9C2B1F · #C1503D · #F4D8C0 · #401711. Deep paprika with cream; restaurants that want appetite appeal minus fast-food clichés.#C4622D · #E09F3E · #5F797B · #F6F1E7. Warm spice balanced by a single cool counterweight; farm-to-table everything.High-contrast pairs used with restraint read as confident, not chaotic.
#FF3864 · #2DE1FC · #170F2B · #FFF8F0. Hot pink against cyan on near-black; streaming and esports.#111111 · #FFE600 · #FFFFFF · #FF3EA5. Black plus electric yellow; streetwear and event posters.#E63946 · #1D3557 · #F1FAEE · #457B9D. Red/navy/ivory; athletic programs and news sites.#7209B7 · #F72585 · #4CC9F0 · #10002B. A violet-based triadic set; playful apps for younger audiences.#FF5714 · #353535 · #FFFFFF · #FFB3C1. Blaze orange on charcoal; fitness and outdoor gear.#0B132B · #1C2541 · #5BC0BE · #FF5A5F. Dark navy with neon teal and coral accents; ticketing and fan platforms.Muted mid-tones borrowed from landscape.
#2D4A32 · #5B8266 · #DAD7CD · #1B3022. Layered greens over stone; eco brands done tastefully.#9CAF88 · #71816D · #EFEBE4 · #4A5340. Desaturated sage family; wellness studios.#C8A97A · #76B5BE · #F5F0E6 · #5E5045. Sand meets seafoam; travel and coastal real estate.#5C6B73 · #9DB4C0 · #E0FBFC · #253237. Cool mineral grays; meditation and sleep apps.#1B4332 · #2D6A4F · #95D5B2 · #081C15. Deep botanical ramp; premium organic packaging.#A24936 · #C97B63 · #EAD8C3 · #54311F. Desert strata; ceramics and handmade goods.Dark surfaces need light text tiers and one luminous accent — not five dim ones.
#191C1D · #1B31E7 · #BDC2FF · #F8F9FA. Our gallery's namesake: black surface, electric cobalt action, periwinkle highlights.#0D1117 · #161B22 · #39D353 · #E6EDF3. GitHub-dark inspired; code products.#12002E · #5A189A · #E0AAFF · #F8F7FF. Purple depth ladder; creative tools.#000865 · #3E51FF · #E8E8FF · #BDC2FF. Abyssal blue with electric surfacing; music and nightlife.#121212 · #1F1F1F · #FFB74D · #ECEFF1. Material dark plus warm amber; reading apps.Low-saturation families where lightness does the work.
#F7C5C5 · #F4C2C2 · #C27BA0 · #5C3A45. Blush pinks anchored by plum text; beauty salons.#E6E6FA · #D8BFD8 · #BA55D3 · #4A3B52. Lilac ramp with one saturated anchor; boutique gifting.#FFE5B4 · #FFDAB9 · #A2D2FF · #556270. Peach-and-sky pastels; children's products.#B0D4E8 · #D6E2E9 · #89C2D9 · #3A506B. Icy blues; dental, air, and water brands.#F9E4E4 · #ECC5C0 · #B5838D · #6D6875. Dusty rose with muted mauve; invitations and editorial.#D8F3DC · #B7E4C7 · #40916C · #334155. Green-tinted whites; modern wellness DTC.Deep values, restrained hue, generous negative space.
#0A0A0A · #1C1C1C · #C9A227 · #F4F1EC. Black-on-black with antique gold; jewelry standard for good reason.#2B0F1E · #5C1A3A · #C99DA3 · #F5EDF0. Wine-dark plum suite; fashion editorial.#003434 · #006666 · #9ECCA4 · #F2F7F5. Deep teal with mint lift; boutique hotels.#444556 · #C5C5D9 · #F0F1F2 · #1B31E7. Our Clean Corporate set: smoky neutrals with one precise blue.#14080E · #3D1226 · #A5677C · #EFE6EA. Near-black bordeaux; perfume and lingerie.#F5EFE0 · #E3D3B3 · #8C7853 · #2E2A26. Inverted luxury: ivory dominant, gold as ink.#191C1D · #757688 · #BC3E00 · #FFDBCF. Our Industrial Rust set: iron grays fired by rust orange.#3B1F0E · #6B3B2A · #C8A97A · #EFE6D8. Furniture-showroom warmth.#7C2D12 · #A85751 · #E7D8C9 · #3F3A36. Faded barnwood palette; artisan food labels.#6B7C45 · #4E5D33 · #D9CBA8 · #2E3323. Olive-dominant earth; olive oil, literally.#8B7F74 · #B0A695 · #E8DDD0 · #40372F. Warm masonry neutrals; architecture studios.#00B4D8 · #90E0EF · #CAF0F8 · #03045E. Crisp aqua ramp capped by navy text; healthcare SaaS.#FFF44F · #FFE97F · #457B9D · #FFFFFF. Citrus accent with steel-blue text; cleaning products.#228B22 · #7CB342 · #F1F8E9 · #33691E. Grocery-fresh greens; farmers' markets.#E0F7FA · #B2EBF2 · #00ACC1 · #263238. Aqua glass layers; window, water, clarity metaphors.#FFFFFF · #F1F5F9 · #2563EB · #0F172A. The accounting-tool special: white canvas, one decisive blue.#EF476F · #FFD166 · #06D6A0 · #118AB2. Four high-legibility brights; education research favorite.#FF6B6B · #FFD93D · #6BCB77 · #4D96FF. Even-lightness rainbow set; classroom materials.#FF87AB · #FFD6BA · #8AC6D1 · #3D348B. Pastels undercut by deep indigo; zines and indie games.#F15BB5 · #FEE440 · #00BBF9 · #9B5DE5. Party-bright tetrad for festival branding; use sparingly on white.#F4A261 · #E76F51 · #2A9D8F · #264653. Warm-to-cool story arc; children's publishing.#FFFFFF · #E5E5E5 · #7A7A7A · #111111. Full neutral ramp from paper to ink; photography portfolios.#0F2A43 · #27496D · #A9C1D9 · #EDF2F7. Single-hue blue monochrome; engineering firms.#1b1b1b · #595959 · #8c8c8c · #bfbfbf. Our Urban Nights theme: pure value study, zero chroma.#F4EFE6 · #D9C7AE · #8A6F4D · #2B2118. Aged-paper monochrome; archives and heritage brands.Three rules turn these swatches into finished designs:
If none of these fit exactly, treat the closest match as a seed and mutate it — shift the hue, deepen the darkest step, swap the accent. That's precisely what our palette generator automates: start from a proven structure and make it yours in seconds.
Try the techniques from this guide in our free tools — no sign-up required.
More in Web Design · All articles · FAQ
Four color models, one practical answer: which to use in CSS, which to use in print, and why LAB quietly became the most important of all.
You have one hex code from the brand team. Here's the exact process for turning it into a complete, accessible design system — ramps, semantics, dark mode and all.
The color wheel, harmonies, temperature and contrast — explained for people who ship interfaces, not oil paintings.