Exclusively Ours - Candi Bae Makeup and Skincare - See in Candi Bae Collections

~Free Shipping on Orders of $50 ~~$10 off Signup with Email~

Candi Bae Cosmetics

Account/sign-in

Quick Pick Categories

Everyday Essentials

Your Perfect Makeup Match
Personal shade finder

Meet your most natural makeup look.

Answer five quick questions and get a personalized color story for complexion, eyes, cheeks, and lips.

Question 1 of 520%

Match your perfect shade of Foundation!

Get the perfect shade of foundation for your skin tone and undertone that looks natural and blends perfectly. Answer the questions in the quiz below to find the best product for your skin. This quiz uses the results from your answers to create a color profile for your specific skin tone and undertone that enhances your skin, not just covering it up. Get vibrant, non-oily, cake--free clean makeup style. Take the quiz now and get your personalized results straight to your inbox instantly.

The privacy of your information is protected by candibae.com.
See our privacy policy page @ https://candibae.com/privacy-policy/ for further details.

Quiz.
.cbq{--cream:#fbf9f3;--lilac:#c8a2c8;--plum:#2e1a35;--green:#93c572;--peach:#ff9e79;background:var(--cream);color:var(--plum);font:16px/1.6 system-ui,sans-serif;max-width:1120px;margin:24px auto;border:1px solid #e5dce6;border-radius:26px;overflow:hidden;box-shadow:0 18px 60px #2e1a3510}.cbq *{box-sizing:border-box}.cbq [hidden]{display:none!important}.cbq button,.cbq input,.cbq select{font:inherit}.cbq button{cursor:pointer}.cbq :focus-visible{outline:3px solid #745281;outline-offset:4px}.cbq header{padding:22px 32px;border-bottom:1px solid #e5dce6;display:flex;justify-content:space-between;gap:12px;align-items:center}.cbq header strong{font-size:13px;letter-spacing:.19em}.cbq header span{font-size:12px;background:#e9f1df;border-radius:30px;padding:5px 12px}.cbq .layout{display:grid;grid-template-columns:32% 1fr}.cbq aside{background:linear-gradient(150deg,#eadbed,#e5b6f744);padding:40px 30px;display:flex;flex-direction:column;justify-content:space-between}.cbq .eyebrow{font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}.cbq h2{font:normal clamp(34px,4vw,49px)/1.1 Georgia,serif;letter-spacing:-.04em;margin:14px 0 22px;color:var(--plum)}.cbq aside p{font-size:14px}.cbq .art{height:150px;display:flex;gap:8px;align-items:end;margin:30px 0}.cbq .art i{display:block;flex:1;height:90%;border-radius:60% 60% 35% 35%;background:#f2d4b5;transform:rotate(-8deg);box-shadow:inset -10px -6px 20px #0000000d}.cbq .art i:nth-child(2){background:#bd8056;height:100%;transform:rotate(7deg)}.cbq .art i:nth-child(3){background:#68422d;height:82%;transform:rotate(-5deg)}.cbq main{padding:35px 40px;min-height:590px;min-width:0}.cbq .demo{background:#fff0e8;border:1px solid #e7c4af;border-radius:10px;padding:10px 13px;font-size:12px;margin-bottom:22px}.cbq .meta{display:flex;justify-content:space-between;font-size:12px;gap:12px;margin-bottom:10px}.cbq progress{display:block;appearance:none;width:100%;height:5px;border:0;border-radius:20px;overflow:hidden;background:#e9e1e9;margin-bottom:30px}.cbq progress::-webkit-progress-bar{background:#e9e1e9}.cbq progress::-webkit-progress-value{background:var(--plum)}.cbq progress::-moz-progress-bar{background:var(--plum)}.cbq h3{font:normal 29px/1.2 Georgia,serif;margin:0 0 12px;color:var(--plum)}.cbq fieldset{padding:0;border:0;margin:0;min-width:0}.cbq legend{width:100%;padding:0}.cbq .help{font-size:14px;color:#66516b;margin:0 0 24px}.cbq .options{display:grid;gap:11px}.cbq .grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cbq .option{display:flex;gap:12px;align-items:center;padding:15px;border:1px solid #d9cddd;background:#ffffff99;border-radius:14px;cursor:pointer;line-height:1.4}.cbq .option:hover{border-color:#94769c}.cbq .option:has(input:checked){background:#eadbed;border-color:var(--plum);box-shadow:0 0 0 1px var(--plum)}.cbq input[type=radio],.cbq input[type=checkbox]{accent-color:var(--plum);width:18px;height:18px;flex-shrink:0}.cbq small{display:block;font-size:12px;color:#66516b;margin-top:4px}.cbq .tone{width:34px;height:34px;border:1px solid #0002;border-radius:50%;flex-shrink:0}.cbq .photo{width:60px;height:78px;object-fit:cover;border-radius:10px}.cbq nav{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:28px}.cbq .primary{display:inline-block;background:var(--plum);color:var(--cream);padding:13px 24px;border:1px solid var(--plum);border-radius:50px;font-size:14px;font-weight:700;line-height:1.4;text-decoration:none}.cbq .back{border:0;padding:12px 0;background:transparent;color:var(--plum)}.cbq button:disabled{opacity:.45;cursor:default}.cbq select,.cbq input[type=email]{width:100%;padding:15px;border:1px solid #bcaac2;border-radius:12px;background:white;color:var(--plum);margin:8px 0 12px}.cbq .error{color:#922e40;font-size:14px;min-height:22px;margin:12px 0 0}.cbq .note{font-size:12px;color:#66516b}.cbq .card{background:white;border:1px solid #e1d5e6;border-radius:18px;padding:23px;margin:22px 0}.cbq h4{font-size:20px;margin:12px 0 4px}.cbq .swatch{height:76px;border-radius:12px;margin:15px 0}.cbq .card ul{font-size:14px;padding-left:20px}.cbq .consent{display:flex;gap:10px;align-items:start;font-size:13px;margin:12px 0}.cbq .status{background:#edf4e5;padding:12px;border-radius:10px;font-size:13px}.cbq .answers div{display:flex;justify-content:space-between;gap:18px;border-bottom:1px solid #e5dce6;padding:8px 0;font-size:13px}.cbq footer{text-align:center;padding:17px 28px;border-top:1px solid #e5dce6;font-size:11px;color:#66516b}.cbq .trap{position:absolute;left:-10000px}@media(max-width:720px){.cbq{margin:12px auto;border-radius:18px}.cbq .layout{grid-template-columns:1fr}.cbq header{padding:18px 22px}.cbq aside{padding:23px}.cbq h2{font-size:34px;margin:8px 0}.cbq aside p{margin:8px 0}.cbq .art,.cbq .aside-bottom{display:none}.cbq main{padding:26px 22px;min-height:490px}.cbq h3{font-size:26px}.cbq .option{padding:13px 11px;gap:9px}.cbq .grid .option{flex-wrap:wrap}}
CANDI BAEYour shade. Your vibe.
Working demo · Products and shades are illustrative. No email is sent.
Question 1 of 17Skin Type
Please enable JavaScript to use this quiz.
(()=>{'use strict'; const root=document.currentScript.closest('.cbq');if(!root||root.dataset.ready)return;root.dataset.ready='true'; /* LAUNCH SETTINGS: replace sample data with your real catalog, then set demo:false. No API keys or passwords belong here. Endpoint contract is in SETUP.md. */ const CONFIG={demo:true,emailEndpoint:'',privacyUrl:'', modelPhotos:{light:[],medium:[],tan:[],deep:[]}, /* Verified reference mappings only. Example structure (not an actual conversion): 'Brand':{'Formula — Shade':{depth:7,undertone:'warm'}} */ benchmarks:{'MAC':{},'Fenty Beauty':{},'Estée Lauder':{},'Maybelline':{}}, products:[] /* Real product structure: {id:'foundation-1',name:'Actual product name',url:'https://your-site.com/product/name/', coverage:['medium','full'],finish:'natural',skin:['dry','combination','balanced'], concerns:['lines','spots'],inStock:true, shades:[{id:'real-shade-id',name:'Actual shade name',depth:7,undertone:'warm', hex:'#b27e58',inStock:true,url:'https://your-site.com/product/name/?attribute_pa_shade=your-slug'}]} */ }; const names=['Porcelain','Ivory','Vanilla','Sand','Beige','Honey','Caramel','Amber','Toffee','Bronze','Chestnut','Mocha','Cocoa','Espresso','Ebony','Onyx']; const colors=['#f6dfc7','#eed0b1','#e7bf9c','#dfb28e','#d3a17a','#c89469','#bc855b','#af784f','#a36c45','#95603c','#885334','#7b482e','#6d3f29','#5e3525','#4e2c21','#3e241c']; const samples=[{id:'tint',name:'Dewy Skin Tint · sample product',coverage:['sheer','medium'],finish:'dewy',skin:['dry','balanced'],concerns:['lines']},{id:'natural',name:'Everyday Natural Foundation · sample product',coverage:['medium','full'],finish:'natural',skin:['dry','combination','balanced'],concerns:['spots','lines']},{id:'matte',name:'Soft Matte Foundation · sample product',coverage:['medium','full'],finish:'matte',skin:['oily','combination'],concerns:['redness','spots']}].map(p=>({...p,inStock:true,url:'',shades:colors.flatMap((hex,depth)=>['cool','neutral','warm'].map(u=>({id:`${p.id}-${depth}-${u}`,name:`${names[depth]} ${depth+1}${u[0].toUpperCase()} · sample shade`,depth,undertone:u,hex,inStock:true})))})); const products=CONFIG.demo?samples:CONFIG.products; const o=(value,label,note='')=>({value,label,note}); const Q=[ ['skin','Skin Type','What’s your skin type?',[o('dry','Dry','Married to my moisturizer'),o('oily','Oily','I live for blotting papers and powder'),o('combination','Combination','Each part of my face has a mind of its own'),o('balanced','Balanced','Yeah, I’m blessed')]], ['coverage','Coverage Preference','What kind of coverage are you craving?',[o('sheer','Lightweight / Sheer'),o('medium','Medium','Buildable'),o('full','Full Coverage')]], ['finish','Finish Preference','What’s your dream finish?',[o('matte','Matte'),o('natural','Natural'),o('dewy','Luminous / Dewy')]], ['group','Skin Tone Group','Which category best represents your skin tone?',[o('light','Light'),o('medium','Medium'),o('tan','Tan'),o('deep','Dark / Deep')]], ['depth','Visual Sub-Matching','Which tone looks closest to yours?',[]], ['veins','Undertone Identification','Look at your wrist. What color are your veins?',[o('cool','Blue or Purple'),o('warm','Green or Olive'),o('neutral','Hard to tell / Mixture')]], ['sun','Sun Reaction','What happens when you spend time in the sun?',[o('burn','I burn easily and rarely tan'),o('both','I burn first, then gradually tan'),o('tan','I tan easily and rarely burn')]], ['jewelry','Jewelry Contrast','Which jewelry makes your skin pop?',[o('cool','Silver looks best on me'),o('warm','Gold looks best on me'),o('neutral','Both look equally great')]], ['season','Seasonal Shifts','Does your skin tone change with the seasons?',[o('yes','Yes, my tone changes significantly'),o('no','No, mostly consistent year-round')]], ['tool','Application Tools','How do you usually apply your foundation?',[o('brush','Makeup Brush'),o('sponge','Beauty Sponge / Blender'),o('fingers','My Fingers')]], ['prep','Skin Preparation','What do you apply right before foundation?',[o('moisturizer','Just Moisturizer'),o('primer','Makeup Primer'),o('bare','Bare Skin','Nothing at all')]], ['frequency','Usage Frequency','How often do you wear full-face makeup?',[o('daily','Every day'),o('weekly','A few times a week'),o('occasions','Special occasions only')]], ['brand','Brand Benchmarking','What foundation brand do you currently use?',[]], ['reference','Current Shade Match','What is your current formula and shade?',[]], ['concern','Primary Skin Concerns','What is your main skin concern?',[o('lines','Fine lines / Wrinkles'),o('spots','Dark spots / Hyperpigmentation'),o('redness','Redness / Acne / Large pores')]], ['age','Age Bracket','What is your age bracket?',[o('under25','Under 25'),o('25','25–34'),o('35','35–44'),o('45','45–54'),o('55','55+'),o('skip','Prefer not to say')]], ['email','Your Results','Your foundation edit is ready.',[]] ]; const $=s=>root.querySelector(s),step=$('[data-step]'),form=$('form'),err=$('[data-error]');let index=0,busy=false;const a={}; function el(tag,text,cls){const e=document.createElement(tag);if(text!==undefined)e.textContent=text;if(cls)e.className=cls;return e;} function safeUrl(value){if(!value)return '';try{const u=new URL(value,location.href);return /^https?:$/.test(u.protocol)?u.href:'';}catch{return '';}} function choices(){if(Q[index][0]==='depth'){const base=['light','medium','tan','deep'].indexOf(a.group)*4;return colors.slice(base,base+4).map((hex,i)=>({...o(String(base+i),['Lightest','Light-medium','Medium-deep','Deepest'][i]+' in this group'),hex,photo:CONFIG.modelPhotos[a.group]?.[i]}));}return Q[index][3].map((x,i)=>Q[index][0]==='group'?{...x,hex:colors[i*4+1]}:x);} function render(focus=true){err.textContent='';step.replaceChildren();const [id,category,title]=Q[index];$('[data-count]').textContent=`Question ${index+1} of ${Q.length}`;$('[data-category]').textContent=category;$('progress').value=index+1;$('[data-back]').disabled=index===0;$('[data-next]').textContent=index===16?'Reveal my match →':'Continue →';const fs=el('fieldset'),legend=el('legend'),h=el('h3',title);h.tabIndex=-1;legend.append(h);fs.append(legend);step.append(fs);let help='Choose the answer that feels most like you.'; if(id==='group'||id==='depth')help='Use your face and neck in natural light. Ignore hair color and facial features. '+(id==='depth'&&CONFIG.modelPhotos[a.group]?.length===4?'':'Illustrative swatches are shown until model photos are added.'); if(id==='sun')help='This adds context to your profile; sun response does not determine your undertone or shade.'; if(id==='reference')help='Only verified formula and shade mappings appear here. If yours is missing, we’ll use your visual answers.'; if(id==='age')help='Optional. Your age does not change your shade recommendation.'; if(id==='email')help=CONFIG.emailEndpoint&&!CONFIG.demo?'Enter your email to request your results. Marketing updates are optional.':'Demo preview: enter an email to reveal your result. It is not sent or saved.'; fs.append(el('p',help,'help')); if(id==='email'){const label=el('label','Email address'),input=el('input');input.type='email';input.name='email';input.autocomplete='email';input.placeholder='you@example.com';input.required=true;input.value=a.email||'';label.append(input);fs.append(label);if(CONFIG.emailEndpoint&&!CONFIG.demo){const consent=el('label',undefined,'consent'),check=el('input');check.type='checkbox';check.name='marketing';check.checked=!!a.marketing;consent.append(check,el('span','Yes, send me beauty news and offers too. (Optional)'));fs.append(consent);}const p=el('p',CONFIG.emailEndpoint&&!CONFIG.demo?'Your address is used to handle your requested result.':'No email collection is connected in this demo.','note');if(safeUrl(CONFIG.privacyUrl)){const link=el('a',' Privacy policy');link.href=safeUrl(CONFIG.privacyUrl);p.append(link);}fs.append(p);const trap=el('input');trap.name='website';trap.tabIndex=-1;trap.autocomplete='off';trap.className='trap';trap.setAttribute('aria-hidden','true');fs.append(trap); }else if(id==='brand'||id==='reference'){const select=el('select');select.name=id;select.setAttribute('aria-label',title);select.append(new Option('Select an option…',''));const entries=id==='brand'?[...Object.keys(CONFIG.benchmarks).map(b=>[b,b]),['other','Other / I don’t use foundation']]:[...Object.keys(CONFIG.benchmarks[a.brand]||{}).map(s=>[s,s]),['unknown','My shade is not listed / I’m not sure']];entries.forEach(([v,t])=>select.append(new Option(t,v)));select.value=a[id]||'';fs.append(select); }else{const group=el('div',undefined,'options'+(['group','depth'].includes(id)?' grid':''));choices().forEach(x=>{const label=el('label',undefined,'option'),radio=el('input');radio.type='radio';radio.name=id;radio.value=x.value;radio.checked=a[id]===x.value;label.append(radio);if(x.photo&&safeUrl(x.photo)){const img=el('img');img.src=safeUrl(x.photo);img.alt='';img.className='photo';label.append(img);}else if(x.hex){const sw=el('span',undefined,'tone');sw.style.background=x.hex;sw.setAttribute('aria-hidden','true');label.append(sw);}const txt=el('span',x.label);if(x.note)txt.append(el('small',x.note));label.append(txt);group.append(label);});fs.append(group);}if(focus)h.focus({preventScroll:true});} function read(){const id=Q[index][0],input=id==='email'?step.querySelector('input[type=email]'):step.querySelector('select')||step.querySelector('input:checked');if(!input||!input.value||(id==='email'&&!input.checkValidity())){err.textContent=id==='email'?'Please enter a valid email address.':'Choose an answer to continue.';if(input)input.focus();return false;}if(id==='group'&&a.group!==input.value)delete a.depth;if(id==='brand'&&a.brand!==input.value)delete a.reference;a[id]=input.value;if(id==='email')a.marketing=!!step.querySelector('[name=marketing]:checked');return true;} /* Heuristic, not a calibrated measurement. Veins weight 2, jewelry 1. Sun response and age never set undertone. Reference data must be verified. */ function profile(){const score={cool:0,neutral:0,warm:0};score[a.veins]+=2;score[a.jewelry]+=1;let undertone=Object.keys(score).sort((x,y)=>score[y]-score[x])[0],depth=Number(a.depth);const mixed=a.veins!==a.jewelry,reference=CONFIG.benchmarks[a.brand]?.[a.reference];let referenceUsed=false;if(reference&&Number.isFinite(reference.depth)&&Math.abs(reference.depth-depth)score[y]-score[x])[0];}referenceUsed=true;}return{depth,undertone,mixed,referenceUsed,referenceConflict:!!reference&&!referenceUsed};} function recommend(){const p=profile();const ranked=products.filter(x=>x.inStock!==false&&Array.isArray(x.shades)).map(product=>{const shades=product.shades.filter(s=>s.inStock!==false&&Number.isFinite(s.depth)&&s.depth>=0&&s.depth({shade,distance:Math.abs(shade.depth-p.depth)+(shade.undertone===p.undertone?0:(p.mixed&&shade.undertone==='neutral'?.4:1.4))})).sort((x,y)=>x.distance-y.distance);const fit=(product.coverage?.includes(a.coverage)?5:0)+(product.finish===a.finish?5:0)+(product.skin?.includes(a.skin)?3:0)+(product.concerns?.includes(a.concern)?1:0);return{product,match:shades[0],fit};}).filter(x=>x.match).sort((x,y)=>(y.fit-y.match.distance*3)-(x.fit-x.match.distance*3));return{profile:p,best:ranked[0]};} async function showResult(){const result=recommend();let emailState='';if(CONFIG.emailEndpoint&&!CONFIG.demo){busy=true;$('[data-next]').disabled=true;$('[data-back]').disabled=true;$('[data-next]').textContent='Preparing your result…';try{const url=safeUrl(CONFIG.emailEndpoint);if(!url||new URL(url).protocol!=='https:')throw Error('Invalid endpoint');const controller=new AbortController(),timer=setTimeout(()=>controller.abort(),10000);let response;try{response=await fetch(url,{method:'POST',headers:{'Content-Type':'application/json'},signal:controller.signal,body:JSON.stringify({email:a.email,marketingConsent:a.marketing,website:step.querySelector('[name=website]').value,answers:{...a,email:undefined,marketing:undefined},recommendation:result.best?{productId:result.best.product.id,shadeId:result.best.match.shade.id}:null})});}finally{clearTimeout(timer);}if(!response.ok||(await response.json()).ok!==true)throw Error('Submission failed');emailState='Your result request was accepted. Check your inbox shortly.';}catch{emailState='Your match is ready below, but we couldn’t submit your email request. Please try again later.';}finally{busy=false;}} form.hidden=true;const box=$('[data-result]');box.hidden=false;box.replaceChildren();$('[data-count]').textContent='Your foundation edit';$('[data-category]').textContent='Made for you';const heading=el('h3','Meet your starting-point match.');heading.tabIndex=-1;box.append(heading);if(emailState)box.append(el('p',emailState,'status')); if(!result.best){box.append(el('p','No available product matches are configured yet. Please contact us for a personal shade consultation.'));}else{const {product,match}=result.best,s=match.shade,p=result.profile;const card=el('div',undefined,'card');card.append(el('div',CONFIG.demo?'ILLUSTRATIVE RECOMMENDATION':'YOUR RECOMMENDATION','eyebrow'),el('h4',product.name),el('p',s.name));if(/^#[0-9a-f]{6}$/i.test(s.hex)){const sw=el('div',undefined,'swatch');sw.style.background=s.hex;sw.setAttribute('aria-label','Illustrative shade swatch');card.append(sw);}card.append(el('p',`${p.undertone[0].toUpperCase()+p.undertone.slice(1)} undertone starting point · ${product.finish} finish`));const reasons=el('ul');reasons.append(el('li',product.coverage?.includes(a.coverage)?'Matches your preferred coverage.':'Closest available formula; coverage differs from your preference.'),el('li',product.finish===a.finish?'Matches your preferred finish.':'The closest available formula has a different finish.'),el('li',match.distance>2?'This shade is outside a close match range. Request a swatch or consultation before buying.':'Compare this shade on your jawline in natural light.'));if(p.mixed)reasons.append(el('li','Your undertone clues differ. Compare a neutral shade alongside this suggestion.'));if(p.referenceUsed)reasons.append(el('li','Your verified current shade helped refine this starting point.'));if(p.referenceConflict)reasons.append(el('li','Your current-shade reference differs from your visual choice; a swatch check will help.'));if(a.season==='yes')reasons.append(el('li','Match your current face and neck; you may need another shade next season.'));card.append(reasons);const url=safeUrl(s.url||product.url);if(url&&!CONFIG.demo){const shop=el('a','View product & shade →','primary');shop.href=url;card.append(shop);}else card.append(el('p','Sample catalog: a shop button appears when real product URLs are configured.','note'));box.append(card);const tips=el('div',undefined,'card');tips.append(el('h4','Make it your kind of finish'));const toolTips={brush:'Use light brush strokes and build coverage in thin layers.',sponge:'Press on thin layers with a damp sponge; avoid dragging.',fingers:'Warm a little foundation between clean fingers and blend in thin layers.'};tips.append(el('p',toolTips[a.tool]),el('p',a.prep==='bare'?'Try a light moisturizer first and let it settle before foundation.':'Let your skin preparation settle before applying thin layers.'),el('p',a.frequency==='occasions'?'Do a wear test before your event to check shade and finish.':'Check the shade again after it settles on your skin.'));box.append(tips);} const details=el('details');details.append(el('summary','Review my answers'));const list=el('div',undefined,'answers');Q.slice(0,16).forEach(([id,theme,,opts])=>{const row=el('div');let value=opts.find(x=>x.value===a[id])?.label||a[id];if(id==='depth')value=`Tone ${Number(a.depth)+1} of 16`;row.append(el('span',theme),el('strong',value));list.append(row);});details.append(list);box.append(details);const restart=el('button','Start again','back');restart.type='button';restart.addEventListener('click',()=>{Object.keys(a).forEach(k=>delete a[k]);index=0;box.hidden=true;form.hidden=false;$('[data-next]').disabled=false;render();});box.append(restart);heading.focus({preventScroll:true});} form.addEventListener('submit',e=>{e.preventDefault();if(busy||!read())return;if(index===Q.length-1){showResult();return;}index++;render();});$('[data-back]').addEventListener('click',()=>{if(!busy&&index>0){const input=step.querySelector('input[type=email]');if(input)a.email=input.value;index--;render();}});$('[data-demo]').hidden=!CONFIG.demo;render(false); })();

Grand Opening Sales Event ~ All Month Long ~