Custom Color Matching
/* ========================================================= INSTAWRAPS COLOR LAB PRODUCT DESCRIPTION Shared responsive styling for the Instawraps Color Lab ======================= ================================== */ .iwcl { --iwcl-accent: #ff4b4b; --iwcl-accent-dark: #e93d3d; --iwcl-black: #111111; --iwcl-charcoal: #202020; --iwcl-text: #1a1a1a; --iwcl-muted: #666666; --iwcl-soft: #f5f5f5; --iwcl-soft-2: #fafafa; --iwcl-border: #e4e4e4; --iwcl-white: #ffffff; --iwcl-radius-lg: 28px; --iwcl-radius-md: 18px; --iwcl-radius-sm: 12px; width: 100%; max-width: 1180px; margin: 0 auto; color: var(--iwcl-text); font-family: inherit; font-size: 16px; line-height: 1.55; } .iwcl, .iwcl *, .iwcl *::before, .iwcl *::after { box-sizing: border-box; } .iwcl svg { display: block; max-width: 100%; } .iwcl a { color: inherit; } /* ========================= HERO ========================= */ .iwcl__hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr); gap: clamp(24px, 5vw, 64px); align-items: center; overflow: hidden; padding: clamp(30px, 6vw, 72px); border-radius: var(--iwcl-radius-lg); color: var(--iwcl-white); background: radial-gradient( circle at 85% 10%, rgba(255, 75, 75, 0.22), transparent 34% ), linear-gradient(135deg, #0d0d0d 0%, #1d1d1d 58%, #292929 100%); } .iwcl__hero::before { position: absolute; top: 0; left: clamp(30px, 6vw, 72px); width: clamp(84px, 13vw, 160px); height: 5px; border-radius: 0 0 20px 20px; background: var(--iwcl-accent); content: ""; } .iwcl__hero-copy, .iwcl__starter-card { position: relative; z-index: 1; } .iwcl__eyebrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; } .iwcl__eyebrow span { display: inline-flex; align-items: center; min-height: 30px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.19); border-radius: 999px; color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.08); font-size: 11px; font-weight: 700; letter-spacing: 0.09em; line-height: 1.2; text-transform: uppercase; } .iwcl__eyebrow span:first-child { border-color: var(--iwcl-accent); color: var(--iwcl-white); background: var(--iwcl-accent); } .iwcl__hero h2 { max-width: 720px; margin: 0; color: var(--iwcl-white); font-size: clamp(34px, 5.4vw, 68px); font-weight: 800; letter-spacing: -0.045em; line-height: 0.98; text-transform: none; } .iwcl__hero-lead { max-width: 690px; margin: 24px 0 0; color: rgba(255, 255, 255, 0.76); font-size: clamp(16px, 1.8vw, 20px); line-height: 1.6; } .iwcl__hero-lead strong { color: var(--iwcl-white); } .iwcl__chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; } .iwcl__chip { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 9px 14px; border-radius: 999px; color: rgba(255, 255, 255, 0.92); background: rgba(255, 255, 255, 0.1); font-size: 13px; font-weight: 600; } .iwcl__chip::before { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--iwcl-accent); content: ""; } /* ========================= OVERVIEW CARD ========================= */ .iwcl__starter-card { width: 100%; max-width: 390px; justify-self: end; padding: 14px; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 24px; background: rgba(255, 255, 255, 0.07); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22); backdrop-filter: blur(8px); } .iwcl__starter-inner { overflow: hidden; padding: 24px; border-radius: 17px; background: radial-gradient( circle at 100% 0%, rgba(255, 75, 75, 0.09), transparent 38% ), linear-gradient(135deg, #ffffff 0%, #f3f3f3 100%); } .iwcl__starter-label { color: var(--iwcl-accent); font-size: 10px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; } .iwcl__starter-title { margin: 8px 0 0; color: var(--iwcl-black); font-size: 23px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; } .iwcl__starter-list { display: grid; gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; } .iwcl__starter-list li { position: relative; padding-left: 29px; color: #555555; font-size: 13px; line-height: 1.55; } .iwcl__starter-list li::before { position: absolute; top: 1px; left: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; color: var(--iwcl-white); background: var(--iwcl-accent); font-size: 11px; font-weight: 800; content: "✓"; } .iwcl__starter-note { margin: 14px 4px 2px; color: rgba(255, 255, 255, 0.55); font-size: 11px; line-height: 1.45; } /* ========================= QUICK FACTS ========================= */ .iwcl__facts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; } .iwcl__fact { min-width: 0; padding: 21px 17px; border: 1px solid var(--iwcl-border); border-radius: var(--iwcl-radius-md); background: var(--iwcl-soft-2); } .iwcl__fact-icon { display: flex; align-items: center; justify-content: center; width: 39px; height: 39px; margin-bottom: 15px; border-radius: 11px; color: var(--iwcl-accent); background: #fff0f0; } .iwcl__fact-icon svg { width: 20px; height: 20px; } .iwcl__fact-label { color: var(--iwcl-muted); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.3; text-transform: uppercase; } .iwcl__fact-value { display: block; margin-top: 5px; color: var(--iwcl-black); font-size: 14px; font-weight: 750; line-height: 1.35; } /* ========================= GENERAL SECTIONS ========================= */ .iwcl__section { padding: clamp(48px, 7vw, 86px) 0 0; } .iwcl__section-heading { max-width: 840px; margin-bottom: 30px; } .iwcl__section-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--iwcl-accent); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .iwcl__section-kicker::before { width: 26px; height: 3px; border-radius: 10px; background: var(--iwcl-accent); content: ""; } .iwcl__section h3 { margin: 0; color: var(--iwcl-black); font-size: clamp(29px, 4vw, 46px); font-weight: 800; letter-spacing: -0.038em; line-height: 1.05; } .iwcl__section-intro { max-width: 790px; margin: 17px 0 0; color: var(--iwcl-muted); font-size: clamp(15px, 1.6vw, 18px); line-height: 1.75; } /* ========================= INTRO STORY ========================= */ .iwcl__story-main { width: 100%; padding: clamp(28px, 5vw, 56px); border: 1px solid var(--iwcl-border); border-radius: var(--iwcl-radius-lg); background: radial-gradient( circle at 100% 0%, rgba(255, 75, 75, 0.055), transparent 30% ), var(--iwcl-white); } .iwcl__story-main > p { max-width: 930px; margin: 0; color: #454545; font-size: clamp(15px, 1.65vw, 18px); line-height: 1.8; } .iwcl__story-main > p + p { margin-top: 20px; } .iwcl__story-main strong { color: var(--iwcl-black); } .iwcl__principle { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(250px, 0.85fr); gap: 24px; align-items: center; margin-top: 34px; padding: clamp(22px, 4vw, 34px); border: 1px solid #ffd4d4; border-radius: 20px; background: radial-gradient( circle at 100% 0%, rgba(255, 75, 75, 0.12), transparent 34% ), linear-gradient(135deg, #fff8f8 0%, #fffdfd 100%); } .iwcl__principle-label { color: var(--iwcl-accent); font-size: 10px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; } .iwcl__principle h4 { max-width: 650px; margin: 10px 0 0; color: var(--iwcl-black); font-size: clamp(22px, 3vw, 34px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.12; } .iwcl__principle p { margin: 0; padding-left: 24px; border-left: 3px solid var(--iwcl-accent); color: #635454; font-size: 14px; line-height: 1.7; } /* ========================= SEVEN-STEP OVERVIEW ========================= */ .iwcl__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .iwcl__step { position: relative; min-height: 250px; overflow: hidden; padding: 29px; border: 1px solid var(--iwcl-border); border-radius: var(--iwcl-radius-md); background: var(--iwcl-soft-2); } .iwcl__step:last-child { grid-column: 1 / -1; min-height: 0; } .iwcl__step::after { position: absolute; right: -30px; bottom: -40px; width: 115px; height: 115px; border-radius: 50%; background: rgba(255, 75, 75, 0.06); content: ""; } .iwcl__step-number { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: var(--iwcl-white); background: var(--iwcl-black); font-size: 12px; font-weight: 800; } .iwcl__step h4 { position: relative; z-index: 1; margin: 23px 0 0; color: var(--iwcl-black); font-size: 20px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.25; } .iwcl__step p { position: relative; z-index: 1; margin: 11px 0 0; color: var(--iwcl-muted); font-size: 14px; line-height: 1.65; } /* ========================= TOOL CATEGORIES ========================= */ .iwcl__tool-categories { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; } .iwcl__tool-category { display: flex; flex-direction: column; min-height: 220px; padding: 24px; border: 1px solid var(--iwcl-border); border-radius: var(--iwcl-radius-md); background: var(--iwcl-white); } .iwcl__tool-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; color: var(--iwcl-accent); background: #fff0f0; } .iwcl__tool-icon svg { width: 21px; height: 21px; } .iwcl__tool-category strong { display: block; margin-top: 23px; color: var(--iwcl-black); font-size: 16px; line-height: 1.3; } .iwcl__tool-category ul { display: grid; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; } .iwcl__tool-category li { position: relative; padding-left: 15px; color: var(--iwcl-muted); font-size: 12px; line-height: 1.45; } .iwcl__tool-category li::before { position: absolute; top: 0.65em; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--iwcl-accent); content: ""; } .iwcl__pro-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 14px; padding: 23px 25px; border: 1px solid #ffd4d4; border-radius: var(--iwcl-radius-md); background: #fff7f7; } .iwcl__pro-note-icon { display: flex; align-items: center; justify-content: center; width: 43px; height: 43px; border-radius: 50%; color: var(--iwcl-white); background: var(--iwcl-accent); } .iwcl__pro-note-icon svg { width: 21px; height: 21px; } .iwcl__pro-note strong { display: block; color: var(--iwcl-black); font-size: 15px; } .iwcl__pro-note p { margin: 5px 0 0; color: #695050; font-size: 13px; line-height: 1.6; } /* ========================= ACCORDIONS ========================= */ .iwcl__details { display: grid; gap: 9px; } .iwcl__detail { overflow: hidden; border: 1px solid var(--iwcl-border); border-radius: var(--iwcl-radius-md); background: var(--iwcl-soft-2); } .iwcl__detail summary { position: relative; display: flex; align-items: center; min-height: 78px; padding: 20px 64px 20px 24px; color: var(--iwcl-black); cursor: pointer; list-style: none; font-size: 16px; font-weight: 750; line-height: 1.35; } .iwcl__detail summary::-webkit-details-marker { display: none; } .iwcl__detail summary::before, .iwcl__detail summary::after { position: absolute; top: 50%; right: 25px; width: 15px; height: 2px; border-radius: 3px; background: var(--iwcl-black); transform: translateY(-50%); transition: transform 0.2s ease; content: ""; } .iwcl__detail summary::after { transform: translateY(-50%) rotate(90deg); } .iwcl__detail[open] summary::after { transform: translateY(-50%) rotate(0deg); } .iwcl__detail[open] summary { background: var(--iwcl-white); } .iwcl__detail-content { padding: 0 24px 27px; background: var(--iwcl-white); } .iwcl__detail-intro { margin: 0 0 19px; color: #555555; font-size: 14px; line-height: 1.7; } .iwcl__check-list { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; } .iwcl__check-list li { position: relative; padding-left: 31px; color: #4e4e4e; font-size: 14px; line-height: 1.65; } .iwcl__check-list li::before { position: absolute; top: 3px; left: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; color: var(--iwcl-white); background: var(--iwcl-accent); font-size: 11px; font-weight: 800; content: "✓"; } .iwcl__check-list strong { color: var(--iwcl-black); } .iwcl__warning-list li::before { background: var(--iwcl-black); content: "!"; } /* ========================= KNIFELESS SPOTLIGHT ========================= */ .iwcl__knifeless { width: 100%; padding: clamp(28px, 5vw, 56px); border: 1px solid var(--iwcl-border); border-radius: var(--iwcl-radius-lg); background: radial-gradient( circle at 100% 0%, rgba(255, 75, 75, 0.08), transparent 34% ), linear-gradient(135deg, #ffffff 0%, #fafafa 100%); } .iwcl__knifeless-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr); gap: 26px; align-items: start; } .iwcl__knifeless h4 { margin: 0; color: var(--iwcl-black); font-size: clamp(24px, 3.5vw, 38px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; } .iwcl__knifeless-copy { margin: 15px 0 0; color: var(--iwcl-muted); font-size: 15px; line-height: 1.75; } .iwcl__benefits { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .iwcl__benefits li { position: relative; padding: 15px 16px 15px 46px; border: 1px solid #ffdede; border-radius: 13px; color: #604e4e; background: #fff8f8; font-size: 13px; line-height: 1.55; } .iwcl__benefits li::before { position: absolute; top: 15px; left: 15px; display: flex; align-items: center; justify-content: center; width: 21px; height: 21px; border-radius: 50%; color: var(--iwcl-white); background: var(--iwcl-accent); font-size: 11px; font-weight: 800; content: "✓"; } .iwcl__tape-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 28px; } .iwcl__tape-type { padding: 20px; border: 1px solid var(--iwcl-border); border-radius: 15px; background: var(--iwcl-white); } .iwcl__tape-type small { color: var(--iwcl-accent); font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .iwcl__tape-type strong { display: block; margin-top: 6px; color: var(--iwcl-black); font-size: 16px; } .iwcl__tape-type p { margin: 8px 0 0; color: var(--iwcl-muted); font-size: 13px; line-height: 1.55; } /* ========================= FINAL BANNER ========================= */ .iwcl__final-banner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 25px; align-items: center; margin-top: 14px; padding: clamp(24px, 4vw, 38px); border-radius: var(--iwcl-radius-lg); background: var(--iwcl-soft); } .iwcl__final-banner h4 { margin: 0; color: var(--iwcl-black); font-size: clamp(22px, 3vw, 32px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; } .iwcl__final-banner p { max-width: 760px; margin: 9px 0 0; color: var(--iwcl-muted); font-size: 14px; line-height: 1.65; } .iwcl__final-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 19px; border-radius: 999px; color: var(--iwcl-white); background: var(--iwcl-black); font-size: 12px; font-weight: 800; line-height: 1.25; text-align: center; white-space: nowrap; } /* ========================= SUPPORT SECTION ========================= */ .iwcl__support { position: relative; overflow: hidden; margin-top: clamp(48px, 7vw, 86px); padding: clamp(30px, 6vw, 60px); border-radius: var(--iwcl-radius-lg); color: var(--iwcl-white); background: radial-gradient( circle at 95% 5%, rgba(255, 75, 75, 0.35), transparent 34% ), linear-gradient(135deg, #111111, #222222); } .iwcl__support::before { position: absolute; top: 0; left: clamp(30px, 6vw, 60px); width: 120px; height: 5px; border-radius: 0 0 15px 15px; background: var(--iwcl-accent); content: ""; } .iwcl__support-inner { position: relative; z-index: 1; } .iwcl__support-label { color: var(--iwcl-accent); font-size: 11px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; } .iwcl__support h3 { max-width: 760px; margin: 12px 0 0; color: var(--iwcl-white); font-size: clamp(29px, 4.2vw, 50px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; } .iwcl__support-copy { max-width: 760px; margin: 15px 0 0; color: rgba(255, 255, 255, 0.68); font-size: 15px; line-height: 1.65; } .iwcl__support-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 31px; } .iwcl a.iwcl__support-button, .iwcl a.iwcl__support-button:link, .iwcl a.iwcl__support-button:visited { all: unset; position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 64px; padding: 14px 16px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.17); border-radius: 14px; color: var(--iwcl-white); background-color: rgba(255, 255, 255, 0.08); background-image: none; box-shadow: none; cursor: pointer; font-family: inherit; text-decoration: none; transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .iwcl a.iwcl__support-button:first-child { border-color: var(--iwcl-accent); background-color: var(--iwcl-accent); } .iwcl a.iwcl__support-button:hover { border-color: var(--iwcl-accent); color: var(--iwcl-white); background-color: var(--iwcl-accent); background-image: none; box-shadow: none; text-decoration: none; transform: translateY(-2px); } .iwcl a.iwcl__support-button:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.75); outline-offset: 3px; } .iwcl a.iwcl__support-button::before, .iwcl a.iwcl__support-button::after { display: none; content: none; } .iwcl__support-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; color: var(--iwcl-white); background: rgba(255, 255, 255, 0.14); } .iwcl__support-icon svg { width: 18px; height: 18px; } .iwcl__support-text { min-width: 0; } .iwcl__support-text small { display: block; color: rgba(255, 255, 255, 0.58); font-size: 9px; font-weight: 700; letter-spacing: 0.09em; line-height: 1.3; text-transform: uppercase; } .iwcl__support-button:first-child small, .iwcl__support-button:hover small { color: rgba(255, 255, 255, 0.76); } .iwcl__support-text strong { display: block; overflow: hidden; margin-top: 3px; color: var(--iwcl-white); font-size: 13px; font-weight: 750; line-height: 1.3; text-overflow: ellipsis; } .iwcl__fine-print { margin: 18px 3px 0; color: #858585; font-size: 10px; line-height: 1.55; } /* ========================= TABLET ========================= */ @media (max-width: 1020px) { .iwcl__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .iwcl__tool-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); } .iwcl__support-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 820px) { .iwcl__hero { grid-template-columns: 1fr; } .iwcl__starter-card { max-width: none; justify-self: stretch; } .iwcl__principle, .iwcl__knifeless-top { grid-template-columns: 1fr; } .iwcl__principle p { padding-top: 4px; padding-left: 18px; } .iwcl__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .iwcl__step:last-child { grid-column: 1 / -1; } } /* ========================= MOBILE ========================= */ @media (max-width: 600px) { .iwcl { font-size: 15px; } .iwcl__hero { padding: 35px 20px 22px; border-radius: 22px; } .iwcl__hero::before { left: 20px; } .iwcl__hero h2 { font-size: clamp(34px, 12vw, 48px); } .iwcl__hero-lead { margin-top: 19px; } .iwcl__chips { margin-top: 22px; } .iwcl__starter-card { padding: 10px; border-radius: 19px; } .iwcl__starter-inner { padding: 21px; border-radius: 14px; } .iwcl__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .iwcl__fact { padding: 18px 14px; } .iwcl__section { padding-top: 52px; } .iwcl__section-heading { margin-bottom: 23px; } .iwcl__story-main, .iwcl__knifeless { padding: 26px 21px; border-radius: 20px; } .iwcl__principle { margin-top: 27px; padding: 22px 19px; border-radius: 16px; } .iwcl__principle p { padding-left: 15px; } .iwcl__steps, .iwcl__tool-categories, .iwcl__tape-types { grid-template-columns: 1fr; } .iwcl__step, .iwcl__step:last-child { min-height: 0; grid-column: auto; padding: 24px 21px; } .iwcl__tool-category { min-height: 0; padding: 21px; } .iwcl__pro-note { grid-template-columns: 1fr; padding: 21px; } .iwcl__detail summary { min-height: 70px; padding: 18px 56px 18px 18px; } .iwcl__detail summary::before, .iwcl__detail summary::after { right: 20px; } .iwcl__detail-content { padding: 0 17px 20px; } .iwcl__final-banner { grid-template-columns: 1fr; padding: 24px 21px; border-radius: 20px; } .iwcl__final-pill { justify-self: start; white-space: normal; } .iwcl__support { padding: 36px 20px 22px; border-radius: 22px; } .iwcl__support::before { left: 20px; } .iwcl__support-actions { grid-template-columns: 1fr; margin-top: 25px; } .iwcl a.iwcl__support-button { min-height: 60px; } } @media (prefers-reduced-motion: reduce) { .iwcl a.iwcl__support-button, .iwcl__detail summary::after { transition: none; } } Instawraps Color Lab Image-Based Color Development Custom Color Matching Turn a real-world color reference into a professionally organized range of custom wrap-film possibilities. Upload an image, select the exact area you want to explore and compare up to 110 coordinated color variations before ordering physical samples. Upload almost any image Explore up to 110 variations Adjust shade intensity Approve a physical sample For the best starting point Use a clear, honest reference image Photograph the color in neutral, even lighting. Avoid filters, heavy reflections and extreme shadows. Keep the target area sharp, close and easy to select. Use physical samples, not the screen, as final approval. Cameras, lighting and screens can shift color. The uploaded image establishes a useful direction; the produced sample is the approval reference. Starting point Uploaded image Color exploration Up to 110 variations Variation control Adjustable intensity Appearance Multiple finish options Evaluation Physical sample sheet Next step Approve and record a swatch Match from the real world Develop a wrap color from a vehicle, product, paint, material, logo or photograph Custom Color Matching is designed for projects that begin with a visual reference rather than an existing wrap-film code. Upload a photo, select the area that represents the color you want and use the generated variation range to explore nearby lighter, darker, warmer, cooler, softer and more intense directions. This process is especially useful when recreating a discontinued shade, coordinating with painted parts or interiors, developing a company color, or finding the closest practical wrap-film direction from an object or image. Color-development principle Use the image to find the direction. Use the physical sample to approve the color. A screen preview cannot reproduce every effect created by ink, film, overlaminate, lighting and viewing angle. Final decisions should be made from the produced sample in the environment where the material will be used. Matching workflow Six steps from uploaded reference to approved custom color Work through the process in order. A strong reference image and careful sample evaluation will give you a more reliable path to the final film. 01 Upload your reference Choose a clear photo of the vehicle, painted part, product, material, logo or other color source. 02 Select the target color Use the image picker on the exact area that best represents the shade you want to develop. 03 Set the intensity Control whether neighboring variations remain very close or explore a broader range around the selected color. 04 Review the variation grid Compare the coordinated colors and identify the directions that best support your project. 05 Choose material and finish Select the available graphic film, overlaminate and appearance that should be represented in the physical samples. 06 Order, inspect and approve Evaluate the physical samples in real lighting, choose the final swatch and keep its order and swatch information. Detailed guidance Open each topic before creating your matching sample set Choosing a useful reference image The selected pixel is affected by the photograph itself. A better image gives the tool a more useful starting color. Use neutral lighting. Daylight or evenly diffused light generally shows the source more honestly than colored indoor lighting. Avoid glare and deep shadows. Reflections can make glossy paint appear white, blue, black or much brighter than the actual color. Do not use filtered images. Social-media filters, automatic enhancement and heavy editing may change hue, saturation and contrast. Photograph the actual surface when possible. A screenshot or online image may already contain unknown color corrections. Include a large target area. The area should be sharp enough that the picker does not accidentally select an edge, highlight or background color. Selecting the color from your image Zoom in before selecting. Choose a representative midtone rather than the brightest reflection or darkest shadow. Test nearby points. Complex surfaces may contain several visibly different pixels even when they appear to be one color. Use the preview as guidance. The selected digital value begins the variation process; it is not a promise of exact paint or brand-color reproduction. Consider the final finish. The same printed color can appear different under gloss, satin, matte, metallic or textured constructions. Understanding the intensity setting Subtle variation: use a closer range when the selected image color is already near the desired result. Broader exploration: increase the separation when you want clearly different color directions around the original selection. The center remains the reference direction. The surrounding swatches help you compare how small or larger changes affect the project. Choose based on the decision you need to make. Close variations are useful for precision; broader variations are useful for discovery. Choosing graphic film, overlaminate and finish Match the sample configuration to the intended final order. Changing the base film or overlaminate later may change appearance and performance. Gloss increases reflection and apparent depth. It may also make surrounding colors and lighting more noticeable. Matte and satin reduce glare. Lower-reflection surfaces can make a color appear softer, flatter or lighter in certain conditions. Metallic, pearlescent and textured finishes add visual effects. These effects should be evaluated from a physical sample and at multiple viewing angles. Review material information. Installation behavior, conformability, removability, durability and intended use depend on the exact film and overlaminate selected. How to evaluate the physical samples Review the samples in daylight, shade and the indoor lighting where the finished project will be seen. Hold the sample beside the actual vehicle, trim, material, logo, wall or product being coordinated. View gloss, metallic and effect finishes from several angles. Allow time between comparisons so very similar colors do not become difficult to distinguish. Record the original order number and exact swatch number immediately after approval. Moving from an approved swatch to full wrap film Open the Custom Color Wrap Film ordering tool after approving the physical sample. Enter the original sample order number and the number of the approved swatch. Choose the same intended film and finish configuration whenever possible. Select the required width, length and quantity after measuring the complete project. Keep a copy of all identifying information for later reorders or additions. Built around your reference Useful for color problems standard wrap collections cannot solve Vehicle and paint references Develop a wrap direction around an existing paint color, rare shade, restored part or discontinued vehicle color. Brands and company colors Start from a logo, product image, signage reference or approved visual standard and create physical options. Materials and interiors Coordinate with upholstery, trim, architectural finishes, furniture, accessories or other project materials. Creative inspiration Explore color from fashion, nature, artwork, photography or any visual source that inspires the project. Custom Color Matching is a development and sampling process—not an instrument-certified paint-match service. Image capture, lighting, screen settings, printing, film color, overlaminate and surface finish can all influence the result. Always approve the physical sample before ordering full rolls or beginning installation. Start with inspiration. Finish with a physical color you can approve. The strongest workflow is simple: upload a useful reference, explore the coordinated range, order samples and make the final decision beside the actual surfaces in your project. Upload • Compare • Approve Instawraps Color Lab support Need help choosing a color-development path, finish or material? Our team can help with Color Lab workflow questions, sample planning, film and finish selection, sizing, order details and general product guidance. Choose the most convenient way to reach us. Fast assistance Live Chat Send a request Contact Us Email our team [email protected] Speak with us 1-866-258-6908 This description provides general product and workflow guidance. Available films, finishes, overlaminates, sizes, production methods and policies may change. Digital previews and uploaded images are approximate and are affected by cameras, lighting, displays and color conversion. Always inspect and approve the physical sample before ordering custom wrap film. 3M and Avery Dennison are trademarks of their respective owners.
More you might like
- Custom Color Matching
Related
Custom Color Matching
Related
Color custom matching necklace
Related