{"id":7347,"date":"2026-08-31T22:08:16","date_gmt":"2026-09-01T02:08:16","guid":{"rendered":"https:\/\/www.visionpros.com\/pro\/?p=7347"},"modified":"2026-08-31T22:08:18","modified_gmt":"2026-09-01T02:08:18","slug":"colored-contacts-eye-color-simulator","status":"publish","type":"post","link":"https:\/\/www.visionpros.com\/pro\/colored-contacts-eye-color-simulator\/","title":{"rendered":"Colored Contact Lens Eye Color Simulator"},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n<title>VisionPros \u2014 Before \/ After Lens Color Preview<\/title>\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Libre+Baskerville:wght@400;700&family=Source+Sans+3:wght@400;500;600;700&display=swap');\n\n:root {\n  --navy: #1a3a6b;\n  --accent-blue: #0057a8;\n  --amber: #e8a13c;\n  --amber-soft: #e8a13c1a;\n  --bg: #faf9f6;\n  --card: #ffffff;\n  --line: #e2ded4;\n  --ink: #232323;\n  --muted: #6f6a5e;\n}\n\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  min-height: 100vh;\n  background: var(--bg);\n  color: var(--ink);\n  font-family: 'Source Sans 3', -apple-system, sans-serif;\n  padding: 52px 20px;\n}\n\n.wrap {\n  width: 100%;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n\n\/* ==========================================================\n   HEADING\n   ========================================================== *\/\n\nh2 {\n  font-family: 'Libre Baskerville', Georgia, serif;\n  font-weight: 700;\n  font-size: 2rem;\n  margin: 0 0 8px;\n  color: var(--navy);\n}\n\n.sub {\n  color: var(--muted);\n  font-size: 1rem;\n  margin: 0 0 36px;\n  width: 100%;\n  max-width: 1020px;\n  line-height: 1.65;\n  text-align: left;\n}\n\n\n\/* ==========================================================\n   LABELS\n   ========================================================== *\/\n\n.color-row-label {\n  font-family: 'Source Sans 3', -apple-system, sans-serif;\n  font-size: 0.72rem;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--navy);\n  margin: 0 0 10px;\n}\n\n\n\/* ==========================================================\n   COLOR BUTTONS\n   ========================================================== *\/\n\n.color-row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  margin-bottom: 30px;\n}\n\n.color-btn {\n  width: 34px;\n  height: 34px;\n  flex: 0 0 34px;\n\n  border-radius: 50%;\n  border: 2px solid var(--line);\n\n  cursor: pointer;\n  padding: 0;\n\n  transition:\n    transform 0.12s ease,\n    border-color 0.12s ease,\n    box-shadow 0.12s ease;\n}\n\n.color-btn:hover {\n  transform: scale(1.1);\n}\n\n.color-btn.active {\n  border-color: var(--navy);\n\n  box-shadow:\n    0 0 0 2px #ffffff,\n    0 0 0 4px var(--navy);\n}\n\n\n\/* ==========================================================\n   MAIN 3-COLUMN LAYOUT\n   ========================================================== *\/\n\n.comparison-layout {\n  width: 100%;\n  max-width: 1050px;\n  margin: 0 auto 32px;\n\n  display: grid;\n\n  grid-template-columns:\n    220px\n    320px\n    280px;\n\n  justify-content: center;\n  align-items: center;\n\n  gap: 48px;\n}\n\n.color-panel {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.color-panel-left {\n  align-items: flex-end;\n  text-align: right;\n}\n\n.color-panel-right {\n  align-items: flex-start;\n  text-align: left;\n}\n\n.color-panel .color-row-label {\n  margin-bottom: 16px;\n}\n\n\n\/* ==========================================================\n   NATURAL EYE COLOR GRID\n   ========================================================== *\/\n\n.color-panel-left .color-row {\n  display: grid;\n\n  grid-template-columns:\n    repeat(2, 34px);\n\n  gap: 14px;\n\n  margin: 0;\n\n  justify-content: end;\n}\n\n\n\/* ==========================================================\n   LENS BRAND BUTTONS\n   ========================================================== *\/\n\n.brand-buttons {\n  display: flex;\n  flex-direction: column;\n\n  gap: 8px;\n\n  width: 220px;\n\n  margin-bottom: 22px;\n}\n\n.brand-btn {\n  width: 100%;\n\n  border: 1px solid var(--line);\n\n  background: var(--card);\n  color: var(--navy);\n\n  border-radius: 6px;\n\n  padding: 9px 12px;\n\n  font-family: 'Source Sans 3', -apple-system, sans-serif;\n\n  font-size: 0.72rem;\n  font-weight: 700;\n  line-height: 1.3;\n\n  text-align: left;\n\n  cursor: pointer;\n\n  transition:\n    background 0.15s ease,\n    border-color 0.15s ease,\n    color 0.15s ease;\n}\n\n.brand-btn:hover {\n  border-color: var(--accent-blue);\n  background: #f5f8fb;\n}\n\n.brand-btn.active {\n  background: var(--navy);\n  border-color: var(--navy);\n  color: #ffffff;\n}\n\n.available-colors-label {\n  margin-top: 0;\n  margin-bottom: 12px !important;\n}\n\n\n\/* ==========================================================\n   LENS COLOR SCROLLER\n   Maximum of 2 rows\n   ========================================================== *\/\n\n.lens-color-scroll-wrap {\n  display: flex;\n  align-items: center;\n\n  gap: 8px;\n\n  width: 280px;\n  max-width: 100%;\n}\n\n\n\/* Actual color area *\/\n\n.lens-color-row {\n  display: grid !important;\n\n  \/* Maximum of TWO rows *\/\n  grid-template-rows:\n    repeat(2, 34px);\n\n  \/* Add additional colors horizontally *\/\n  grid-auto-flow: column;\n\n  grid-auto-columns: 34px;\n\n  column-gap: 12px !important;\n  row-gap: 12px !important;\n\n  width: 220px;\n  max-width: 220px;\n\n  overflow-x: auto;\n  overflow-y: hidden;\n\n  justify-content: start !important;\n\n  margin: 0 !important;\n\n  \/*\n    Gives the active-circle outline\n    enough room not to be clipped.\n  *\/\n  padding: 4px;\n\n  scroll-behavior: smooth;\n\n  scrollbar-width: none;\n}\n\n\n\/* Hide browser scrollbar *\/\n\n.lens-color-row::-webkit-scrollbar {\n  display: none;\n}\n\n\n\/* ==========================================================\n   LENS COLOR ARROWS\n   ========================================================== *\/\n\n.color-scroll-arrow {\n  width: 26px;\n  height: 44px;\n\n  flex: 0 0 26px;\n\n  display: flex;\n\n  align-items: center;\n  justify-content: center;\n\n  padding: 0;\n\n  border: 1px solid var(--line);\n\n  border-radius: 6px;\n\n  background: var(--card);\n  color: var(--navy);\n\n  font-family: Arial, sans-serif;\n\n  font-size: 1.35rem;\n  font-weight: 700;\n\n  line-height: 1;\n\n  cursor: pointer;\n\n  transition:\n    background 0.15s ease,\n    border-color 0.15s ease,\n    color 0.15s ease,\n    opacity 0.15s ease;\n}\n\n.color-scroll-arrow:hover:not(:disabled) {\n  background: var(--navy);\n  border-color: var(--navy);\n  color: #ffffff;\n}\n\n.color-scroll-arrow:disabled {\n  opacity: 0.22;\n  cursor: default;\n}\n\n\n\/* ==========================================================\n   EYE COMPARISON\n   ========================================================== *\/\n\n.compare-shell {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.compare-stage {\n  position: relative;\n\n  width: min(300px, 78vw);\n  height: min(300px, 78vw);\n}\n\n.compare-wrap {\n  position: absolute;\n  inset: 0;\n\n  border-radius: 50%;\n  overflow: hidden;\n\n  border: 5px solid var(--card);\n\n  box-shadow:\n    0 16px 40px rgba(26,58,107,0.18),\n    0 0 0 1px var(--line);\n\n  background: #000;\n}\n\n.layer {\n  position: absolute;\n  inset: 0;\n\n  border-radius: 50%;\n}\n\n.layer svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n\n\/* Natural eye *\/\n\n.layer-before {\n  clip-path:\n    inset(\n      0\n      var(--reveal, 50%)\n      0\n      0\n    );\n\n  z-index: 2;\n}\n\n\n\/* Contact lens eye *\/\n\n.layer-after {\n  z-index: 1;\n}\n\n\n\/* Comparison divider *\/\n\n.divider {\n  position: absolute;\n\n  top: 0;\n  bottom: 0;\n\n  left:\n    calc(\n      100% -\n      var(--reveal, 50%)\n    );\n\n  width: 2px;\n\n  background: var(--card);\n\n  z-index: 3;\n\n  pointer-events: none;\n\n  box-shadow:\n    0 0 8px\n    rgba(0,0,0,0.35);\n}\n\n\n\/* Drag handle *\/\n\n.handle {\n  position: absolute;\n\n  top: 50%;\n\n  left:\n    calc(\n      100% -\n      var(--reveal, 50%)\n    );\n\n  transform:\n    translate(-50%, -50%);\n\n  width: 34px;\n  height: 34px;\n\n  border-radius: 50%;\n\n  background: var(--card);\n  color: var(--navy);\n\n  display: flex;\n\n  align-items: center;\n  justify-content: center;\n\n  font-size: 0.9rem;\n  font-weight: 700;\n\n  z-index: 4;\n\n  pointer-events: none;\n\n  box-shadow:\n    0 2px 10px\n    rgba(0,0,0,0.25);\n}\n\n\n\/* Invisible range control covering entire eye *\/\n\n.compare-slider {\n  -webkit-appearance: none;\n  appearance: none;\n\n  position: absolute;\n\n  inset: 0;\n\n  width: 100%;\n  height: 100%;\n\n  margin: 0;\n\n  background: transparent;\n\n  z-index: 5;\n\n  cursor: ew-resize;\n\n  opacity: 0;\n}\n\n.compare-slider::-webkit-slider-thumb {\n  -webkit-appearance: none;\n\n  width: 34px;\n  height: 34px;\n\n  border-radius: 50%;\n\n  background: transparent;\n\n  cursor: ew-resize;\n}\n\n.compare-slider::-moz-range-thumb {\n  width: 34px;\n  height: 34px;\n\n  border: none;\n  border-radius: 50%;\n\n  background: transparent;\n\n  cursor: ew-resize;\n}\n\n.compare-slider::-webkit-slider-runnable-track {\n  background: transparent;\n}\n\n.compare-slider::-moz-range-track {\n  background: transparent;\n}\n\n\n\/* ==========================================================\n   NATURAL \/ WITH LENS LABELS\n   ========================================================== *\/\n\n.labels {\n  display: flex;\n  justify-content: space-between;\n\n  width:\n    min(300px, 78vw);\n\n  margin-top: 16px;\n\n  font-family:\n    'Source Sans 3',\n    -apple-system,\n    sans-serif;\n\n  font-size: 0.72rem;\n  font-weight: 700;\n\n  text-transform: uppercase;\n\n  letter-spacing: 0.08em;\n\n  color: var(--navy);\n}\n\n.label-before {\n  color: var(--navy);\n\n  font-weight: 700;\n\n  text-align: left;\n}\n\n.label-after {\n  color: var(--navy);\n\n  font-weight: 700;\n\n  text-align: right;\n}\n\n\n\/* ==========================================================\n   RESULT STRIP\n   ========================================================== *\/\n\n.result-strip {\n  width: 100%;\n\n  margin-top: 28px;\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 14px;\n\n  background: var(--card);\n\n  border: 1px solid var(--line);\n\n  border-left:\n    3px solid\n    var(--accent-blue);\n\n  border-radius: 8px;\n\n  padding: 16px 20px;\n\n  box-shadow:\n    0 1px 3px\n    rgba(0,0,0,0.05);\n}\n\n.result-strip .swatch {\n  width: 34px;\n  height: 34px;\n\n  border-radius: 50%;\n\n  flex-shrink: 0;\n\n  background: #c11414;\n\n  border:\n    2px solid\n    var(--line);\n}\n\n.result-strip .info {\n  flex: 1;\n}\n\n.result-strip .name {\n  font-family:\n    'Libre Baskerville',\n    Georgia,\n    serif;\n\n  font-weight: 700;\n\n  font-size: 1.1rem;\n\n  color: var(--navy);\n}\n\n.result-strip .line {\n  font-size: 0.68rem;\n\n  text-transform: uppercase;\n\n  letter-spacing: 0.05em;\n\n  color: var(--amber);\n\n  font-weight: 700;\n}\n\n.result-strip .shop {\n  font-size: 0.82rem;\n\n  font-weight: 700;\n\n  text-transform: uppercase;\n\n  color: var(--accent-blue);\n\n  text-decoration: none;\n\n  white-space: nowrap;\n}\n\n.result-strip .shop:hover {\n  text-decoration: underline;\n}\n\n\n\/* ==========================================================\n   MOBILE\n   ========================================================== *\/\n\n@media (max-width: 820px) {\n\n  .comparison-layout {\n    grid-template-columns: 1fr;\n\n    justify-items: center;\n\n    gap: 30px;\n  }\n\n  .color-panel-left,\n  .color-panel-right {\n    align-items: center;\n\n    text-align: center;\n  }\n\n  .color-panel-left .color-row {\n    justify-content: center;\n  }\n\n  .brand-buttons {\n    width:\n      min(320px, 100%);\n  }\n\n  .brand-btn {\n    text-align: center;\n  }\n\n  .lens-color-scroll-wrap {\n    justify-content: center;\n  }\n\n  .result-strip {\n    flex-wrap: wrap;\n  }\n\n  .result-strip .shop {\n    width: 100%;\n\n    margin-top: 6px;\n  }\n\n}\n\n<\/style>\n\n\n\n\n\n<div class=\"wrap\">\n\n\n  <!-- ======================================================\n       INTRO\n       ====================================================== -->\n\n  <h2>\n    See the transformation\n  <\/h2>\n\n  <p class=\"sub\">\n    Choose your natural eye color on the left, then select a colored or Halloween contact lens on the right.\n    Drag across the eye preview to compare the before-and-after effect and see how different lens shades can\n    change the overall appearance of your eyes before you shop.\n  <\/p>\n\n\n\n  <!-- ======================================================\n       MAIN COMPARISON AREA\n       ====================================================== -->\n\n  <div class=\"comparison-layout\">\n\n\n    <!-- ====================================================\n         LEFT: NATURAL EYE COLORS\n         ==================================================== -->\n\n    <div class=\"color-panel color-panel-left\">\n\n      <p class=\"color-row-label\">\n        Natural eye color\n      <\/p>\n\n\n      <div class=\"color-row\" id=\"naturalColorRow\">\n\n\n        <button type=\"button\" class=\"color-btn active\" style=\"background:#2e1a0f;\" data-name=\"Dark Brown\" data-color=\"#2e1a0f\" title=\"Dark Brown\" aria-label=\"Dark Brown\">\n        <\/button>\n\n\n        <button type=\"button\" class=\"color-btn\" style=\"background:#5a3821;\" data-name=\"Brown\" data-color=\"#5a3821\" title=\"Brown\" aria-label=\"Brown\">\n        <\/button>\n\n\n        <button type=\"button\" class=\"color-btn\" style=\"background:#8a5a34;\" data-name=\"Light Brown\" data-color=\"#8a5a34\" title=\"Light Brown\" aria-label=\"Light Brown\">\n        <\/button>\n\n\n        <button type=\"button\" class=\"color-btn\" style=\"background:#a97c4f;\" data-name=\"Hazel\" data-color=\"#a97c4f\" title=\"Hazel\" aria-label=\"Hazel\">\n        <\/button>\n\n\n        <button type=\"button\" class=\"color-btn\" style=\"background:#b8863b;\" data-name=\"Amber\" data-color=\"#b8863b\" title=\"Amber\" aria-label=\"Amber\">\n        <\/button>\n\n\n        <button type=\"button\" class=\"color-btn\" style=\"background:#4b7043;\" data-name=\"Green\" data-color=\"#4b7043\" title=\"Green\" aria-label=\"Green\">\n        <\/button>\n\n\n        <button type=\"button\" class=\"color-btn\" style=\"background:#7a9b6e;\" data-name=\"Hazel-Green\" data-color=\"#7a9b6e\" title=\"Hazel-Green\" aria-label=\"Hazel-Green\">\n        <\/button>\n\n\n        <button type=\"button\" class=\"color-btn\" style=\"background:#4f7d99;\" data-name=\"Blue-Gray\" data-color=\"#4f7d99\" title=\"Blue-Gray\" aria-label=\"Blue-Gray\">\n        <\/button>\n\n\n        <button type=\"button\" class=\"color-btn\" style=\"background:#5b7fa6;\" data-name=\"Blue\" data-color=\"#5b7fa6\" title=\"Blue\" aria-label=\"Blue\">\n        <\/button>\n\n\n        <button type=\"button\" class=\"color-btn\" style=\"background:#a9c4d6;\" data-name=\"Light Blue\" data-color=\"#a9c4d6\" title=\"Light Blue\" aria-label=\"Light Blue\">\n        <\/button>\n\n\n        <button type=\"button\" class=\"color-btn\" style=\"background:#8a8a86;\" data-name=\"Gray\" data-color=\"#8a8a86\" title=\"Gray\" aria-label=\"Gray\">\n        <\/button>\n\n\n        <button type=\"button\" class=\"color-btn\" style=\"background:#6b4a75;\" data-name=\"Violet\" data-color=\"#6b4a75\" title=\"Violet\" aria-label=\"Violet\">\n        <\/button>\n\n\n      <\/div>\n\n    <\/div>\n\n\n\n    <!-- ====================================================\n         CENTER: EYE\n         ==================================================== -->\n\n    <div class=\"compare-shell\">\n\n\n      <div class=\"compare-stage\">\n\n\n        <div class=\"compare-wrap\" id=\"compareWrap\" style=\"--reveal:50%;\">\n\n\n          <div class=\"layer layer-after\" id=\"layerAfter\">\n          <\/div>\n\n\n          <div class=\"layer layer-before\" id=\"layerBefore\">\n          <\/div>\n\n\n          <div class=\"divider\">\n          <\/div>\n\n\n          <div class=\"handle\">\n            \u2194\n          <\/div>\n\n\n        <\/div>\n\n\n        <input type=\"range\" class=\"compare-slider\" id=\"compareSlider\" min=\"0\" max=\"100\" value=\"50\" aria-label=\"Drag to compare before and after\">\n\n\n      <\/div>\n\n\n\n      <div class=\"labels\">\n\n        <span class=\"label-before\" id=\"beforeLabel\">\n\n          Natural Dark Brown\n\n        <\/span>\n\n\n        <span class=\"label-after\" id=\"afterLabel\">\n\n          With Hot Red\n\n        <\/span>\n\n      <\/div>\n\n\n    <\/div>\n\n\n\n    <!-- ====================================================\n         RIGHT: BRAND + LENS COLORS\n         ==================================================== -->\n\n    <div class=\"color-panel color-panel-right\">\n\n\n      <p class=\"color-row-label\">\n        Lens brand\n      <\/p>\n\n\n      <div class=\"brand-buttons\" id=\"brandButtons\">\n\n\n        <button type=\"button\" class=\"brand-btn active\" data-brand=\"pure-halloween\">\n\n          Pure Colors Halloween\n\n        <\/button>\n\n\n        <button type=\"button\" class=\"brand-btn\" data-brand=\"pure-hd\">\n\n          Pure Colors HD\n\n        <\/button>\n\n\n        <button type=\"button\" class=\"brand-btn\" data-brand=\"air-optix\">\n\n          AIR OPTIX COLORS\n\n        <\/button>\n\n\n        <button type=\"button\" class=\"brand-btn\" data-brand=\"dailies\">\n\n          DAILIES COLORS\n\n        <\/button>\n\n\n        <button type=\"button\" class=\"brand-btn\" data-brand=\"acuvue-define\">\n\n          1-DAY ACUVUE DEFINE\n\n        <\/button>\n\n\n      <\/div>\n\n\n\n      <p class=\"color-row-label available-colors-label\">\n\n        Lens color\n\n      <\/p>\n\n\n\n      <!-- ================================================\n           MAXIMUM 2 ROW COLOR SCROLLER\n           ================================================ -->\n\n      <div class=\"lens-color-scroll-wrap\">\n\n\n        <button type=\"button\" class=\"color-scroll-arrow\" id=\"colorPrev\" aria-label=\"Previous lens colors\">\n\n          \u2039\n\n        <\/button>\n\n\n\n        <div class=\"color-row lens-color-row\" id=\"colorRow\">\n        <\/div>\n\n\n\n        <button type=\"button\" class=\"color-scroll-arrow\" id=\"colorNext\" aria-label=\"More lens colors\">\n\n          \u203a\n\n        <\/button>\n\n\n      <\/div>\n\n\n    <\/div>\n\n\n  <\/div>\n\n\n\n  <!-- ======================================================\n       PRODUCT RESULT STRIP\n       ====================================================== -->\n\n  <div class=\"result-strip\">\n\n\n    <div class=\"swatch\" id=\"stripSwatch\">\n    <\/div>\n\n\n    <div class=\"info\">\n\n\n      <div class=\"line\" id=\"stripLine\">\n\n        PURE COLORS HALLOWEEN CONTACT LENSES\n\n      <\/div>\n\n\n      <div class=\"name\" id=\"stripName\">\n\n        Hot Red\n\n      <\/div>\n\n\n    <\/div>\n\n\n\n    <a class=\"shop\" id=\"stripShop\" href=\"https:\/\/www.visionpros.com\/contact-lenses\/pure-colors-hd-costume-halloween-edition\/\" target=\"_blank\" rel=\"noopener noreferrer\">\n\n      Shop this lens \u2192\n\n    <\/a>\n\n\n  <\/div>\n\n\n\n  <!-- ======================================================\n       CONTACT LENS PROMOTIONAL BANNER\n       ====================================================== -->\n\n  <div style=\"\n      font-family: Georgia, 'Times New Roman', serif;\n      max-width: 1200px;\n      margin: 40px auto;\n      border: 1px solid #e0e0e0;\n      border-radius: 8px;\n      overflow: hidden;\n    \">\n\n\n    <div style=\"\n        display: flex;\n        align-items: stretch;\n      \">\n\n\n      <div style=\"\n          flex: 1;\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          padding: 40px 44px;\n          background: #ffffff;\n        \">\n\n\n        <p style=\"\n            font-family: Arial, sans-serif;\n            font-size: 14px;\n            color: #7ba9d1;\n            letter-spacing: 0.08em;\n            text-transform: uppercase;\n            margin: 0 0 10px 0;\n            font-weight: 700;\n          \">\n\n          See the world more clearly\n\n        <\/p>\n\n\n        <p style=\"\n            font-family: Georgia, 'Times New Roman', serif;\n            font-size: 38px;\n            font-weight: 700;\n            color: #0e4773;\n            margin: 0 0 10px 0;\n            line-height: 1.3;\n          \">\n\n          Premium contacts,<br>\n          delivered to you.\n\n        <\/p>\n\n\n        <p style=\"\n            font-family: Arial, sans-serif;\n            font-size: 16px;\n            color: #555;\n            margin: 0 0 24px 0;\n            line-height: 1.6;\n          \">\n\n          Shop top brands like Acuvue, Bausch + Lomb, and Air Optix at trusted low prices.\n\n        <\/p>\n\n\n        <a href=\"https:\/\/www.visionpros.com\/contact-lenses\/\" style=\"\n            display: inline-block;\n            font-family: Arial, sans-serif;\n            font-size: 14px;\n            font-weight: 600;\n            color: #ffffff;\n            background: #3176b4;\n            text-decoration: none;\n            padding: 11px 24px;\n            border-radius: 4px;\n            width: fit-content;\n            letter-spacing: 0.03em;\n          \">\n\n          Shop Contact Lenses \u2192\n\n        <\/a>\n\n\n      <\/div>\n\n\n\n      <div style=\"\n          flex: 0 0 45%;\n          overflow: hidden;\n        \">\n\n\n        <img decoding=\"async\" class=\"lazyload\" data-src=\"https:\/\/www.visionpros.com\/pro\/wp-content\/uploads\/2026\/06\/Contact-Lenses-1.png\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"Contact lens boxes with lifestyle props\" style=\"\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            object-position: 100% center;\n            display: block;\n          \"><noscript><img decoding=\"async\" src=\"https:\/\/www.visionpros.com\/pro\/wp-content\/uploads\/2026\/06\/Contact-Lenses-1.png\" alt=\"Contact lens boxes with lifestyle props\" style=\"\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            object-position: 100% center;\n            display: block;\n          \"><\/noscript>\n\n\n      <\/div>\n\n\n    <\/div>\n\n\n  <\/div>\n\n\n<\/div>\n\n\n\n<script>\n\n\n\/* ==========================================================\n   DOM SELECTORS\n   ========================================================== *\/\n\nconst wrap =\n  document.getElementById(\n    'compareWrap'\n  );\n\n\nconst slider =\n  document.getElementById(\n    'compareSlider'\n  );\n\n\nconst afterLabel =\n  document.getElementById(\n    'afterLabel'\n  );\n\n\nconst beforeLabel =\n  document.getElementById(\n    'beforeLabel'\n  );\n\n\nconst stripName =\n  document.getElementById(\n    'stripName'\n  );\n\n\nconst stripLine =\n  document.getElementById(\n    'stripLine'\n  );\n\n\nconst stripSwatch =\n  document.getElementById(\n    'stripSwatch'\n  );\n\n\nconst stripShop =\n  document.getElementById(\n    'stripShop'\n  );\n\n\nconst colorRow =\n  document.getElementById(\n    'colorRow'\n  );\n\n\nconst naturalColorRow =\n  document.getElementById(\n    'naturalColorRow'\n  );\n\n\nconst layerAfter =\n  document.getElementById(\n    'layerAfter'\n  );\n\n\nconst layerBefore =\n  document.getElementById(\n    'layerBefore'\n  );\n\n\nconst brandButtons =\n  document.getElementById(\n    'brandButtons'\n  );\n\n\nconst colorPrev =\n  document.getElementById(\n    'colorPrev'\n  );\n\n\nconst colorNext =\n  document.getElementById(\n    'colorNext'\n  );\n\n\n\n\/* ==========================================================\n   LENS DATABASE\n   ========================================================== *\/\n\nconst LENS_BRANDS = {\n\n\n  \/* --------------------------------------------------------\n     PURE COLORS HALLOWEEN\n     -------------------------------------------------------- *\/\n\n  \"pure-halloween\": {\n\n    line:\n      \"PURE COLORS HALLOWEEN CONTACT LENSES\",\n\n    url:\n      \"https:\/\/www.visionpros.com\/contact-lenses\/pure-colors-hd-costume-halloween-edition\/\",\n\n    colors: [\n\n      {\n        name: \"Hot Red\",\n        color: \"#c11414\"\n      },\n\n      {\n        name: \"Devil\",\n        color: \"#8a0f0f\"\n      },\n\n      {\n        name: \"Black Out\",\n        color: \"#1a1a1a\"\n      },\n\n      {\n        name: \"White Out\",\n        color: \"#f2f2ef\"\n      },\n\n      {\n        name: \"Yellow Wolf\",\n        color: \"#e0b23a\"\n      },\n\n      {\n        name: \"Yellow Cat\",\n        color: \"#d9b23c\"\n      },\n\n      {\n        name: \"White Cat\",\n        color: \"#eef0e8\"\n      },\n\n      {\n        name: \"Psycho\",\n        color: \"#e8dede\"\n      },\n\n      {\n        name: \"Spider Web\",\n        color: \"#d8d5ce\"\n      },\n\n      {\n        name: \"Manson\",\n        color: \"#c7c6c1\"\n      }\n\n    ]\n\n  },\n\n\n\n  \/* --------------------------------------------------------\n     PURE COLORS HD\n     -------------------------------------------------------- *\/\n\n  \"pure-hd\": {\n\n    line:\n      \"PURE COLORS HD\",\n\n    url:\n      \"https:\/\/www.visionpros.com\/contact-lenses\/pure-colors-hd\/\",\n\n    colors: [\n\n      {\n        name: \"Amethyst\",\n        color: \"#8a5fc7\"\n      },\n\n      {\n        name: \"Chestnut Brown\",\n        color: \"#6b4226\"\n      },\n\n      {\n        name: \"Emerald Green\",\n        color: \"#1f7a4c\"\n      },\n\n      {\n        name: \"Ocean Blue\",\n        color: \"#1f6f9c\"\n      },\n\n      {\n        name: \"Grey\",\n        color: \"#9a9a9a\"\n      },\n\n      {\n        name: \"Hazel\",\n        color: \"#a97c4f\"\n      },\n\n      {\n        name: \"Honey\",\n        color: \"#c58a3a\"\n      },\n\n      {\n        name: \"Pure Hazel\",\n        color: \"#a88c5d\"\n      },\n\n      {\n        name: \"Sapphire Blue\",\n        color: \"#2b4fa0\"\n      },\n\n      {\n        name: \"Sky Blue\",\n        color: \"#7ec6e6\"\n      },\n\n      {\n        name: \"Turquoise\",\n        color: \"#2fb5a0\"\n      },\n\n      {\n        name: \"Vivid Green\",\n        color: \"#57c23a\"\n      },\n\n      {\n        name: \"Jade\",\n        color: \"#3f9e77\"\n      }\n\n    ]\n\n  },\n\n\n\n  \/* --------------------------------------------------------\n     AIR OPTIX COLORS\n     -------------------------------------------------------- *\/\n\n  \"air-optix\": {\n\n    line:\n      \"AIR OPTIX COLORS\",\n\n    url:\n      \"https:\/\/www.visionpros.com\/contact-lenses\/air-optix-colors\/\",\n\n    colors: [\n\n      {\n        name: \"Amethyst\",\n        color: \"#8870a8\"\n      },\n\n      {\n        name: \"Blue\",\n        color: \"#5b7fa6\"\n      },\n\n      {\n        name: \"Brown\",\n        color: \"#6b4933\"\n      },\n\n      {\n        name: \"Green\",\n        color: \"#5d7c54\"\n      },\n\n      {\n        name: \"Grey\",\n        color: \"#8d8f92\"\n      },\n\n      {\n        name: \"Honey\",\n        color: \"#c48a3a\"\n      },\n\n      {\n        name: \"Pure Hazel\",\n        color: \"#a58958\"\n      },\n\n      {\n        name: \"True Sapphire\",\n        color: \"#2e5c99\"\n      },\n\n      {\n        name: \"Turquoise\",\n        color: \"#4b9d9b\"\n      },\n\n      {\n        name: \"Gemstone Green\",\n        color: \"#408b62\"\n      },\n\n      {\n        name: \"Brilliant Blue\",\n        color: \"#3d78b8\"\n      },\n\n      {\n        name: \"Sterling Grey\",\n        color: \"#a3a7ab\"\n      }\n\n    ]\n\n  },\n\n\n\n  \/* --------------------------------------------------------\n     DAILIES COLORS\n     -------------------------------------------------------- *\/\n\n  \"dailies\": {\n\n    line:\n      \"DAILIES COLORS\",\n\n    url:\n      \"https:\/\/www.visionpros.com\/contact-lenses\/dailies-colors\/\",\n\n    colors: [\n\n      {\n        name: \"Mystic Blue\",\n        color: \"#5f88b6\"\n      },\n\n      {\n        name: \"Mystic Hazel\",\n        color: \"#9a7650\"\n      },\n\n      {\n        name: \"Mystic Gray\",\n        color: \"#8d9197\"\n      },\n\n      {\n        name: \"Mystic Green\",\n        color: \"#5f8b64\"\n      }\n\n    ]\n\n  },\n\n\n\n  \/* --------------------------------------------------------\n     1-DAY ACUVUE DEFINE\n     -------------------------------------------------------- *\/\n\n  \"acuvue-define\": {\n\n    line:\n      \"1-DAY ACUVUE DEFINE\",\n\n    url:\n      \"https:\/\/www.visionpros.com\/contact-lenses\/1-day-acuvue-define\/\",\n\n    colors: [\n\n      {\n        name: \"Natural Shine\",\n        color: \"#9a7657\"\n      },\n\n      {\n        name: \"Vivid\",\n        color: \"#73533d\"\n      },\n\n      {\n        name: \"Accent\",\n        color: \"#49382d\"\n      }\n\n    ]\n\n  }\n\n};\n\n\n\n\/* ==========================================================\n   BEFORE \/ AFTER SLIDER\n   ========================================================== *\/\n\nslider.addEventListener(\n  'input',\n  () => {\n\n    const reveal =\n      100 - slider.value;\n\n\n    wrap.style.setProperty(\n      '--reveal',\n      reveal + '%'\n    );\n\n  }\n);\n\n\n\n\/* ==========================================================\n   COLOR UTILITIES\n   ========================================================== *\/\n\nfunction hexToHsl(hex) {\n\n  let r =\n    parseInt(\n      hex.slice(1, 3),\n      16\n    ) \/ 255;\n\n\n  let g =\n    parseInt(\n      hex.slice(3, 5),\n      16\n    ) \/ 255;\n\n\n  let b =\n    parseInt(\n      hex.slice(5, 7),\n      16\n    ) \/ 255;\n\n\n  const max =\n    Math.max(r, g, b);\n\n\n  const min =\n    Math.min(r, g, b);\n\n\n  let h;\n  let s;\n\n\n  let l =\n    (max + min) \/ 2;\n\n\n  if (max === min) {\n\n    h = 0;\n    s = 0;\n\n  } else {\n\n    const d =\n      max - min;\n\n\n    s =\n      l > 0.5\n        ? d \/ (2 - max - min)\n        : d \/ (max + min);\n\n\n    switch (max) {\n\n      case r:\n\n        h =\n          (g - b) \/ d +\n          (g < b ? 6 : 0);\n\n        break;\n\n\n      case g:\n\n        h =\n          (b - r) \/ d + 2;\n\n        break;\n\n\n      default:\n\n        h =\n          (r - g) \/ d + 4;\n\n    }\n\n\n    h *= 60;\n\n  }\n\n\n  return {\n\n    h: h,\n\n    s: s * 100,\n\n    l: l * 100\n\n  };\n\n}\n\n\n\nfunction hexToRgbArr(hex) {\n\n  return [\n\n    parseInt(\n      hex.slice(1, 3),\n      16\n    ),\n\n    parseInt(\n      hex.slice(3, 5),\n      16\n    ),\n\n    parseInt(\n      hex.slice(5, 7),\n      16\n    )\n\n  ];\n\n}\n\n\n\nfunction blendHex(\n  hexA,\n  weightA,\n  hexB,\n  weightB\n) {\n\n  const [r1, g1, b1] =\n    hexToRgbArr(hexA);\n\n\n  const [r2, g2, b2] =\n    hexToRgbArr(hexB);\n\n\n  const total =\n    weightA +\n    weightB;\n\n\n  const r =\n    Math.round(\n      (\n        r1 * weightA +\n        r2 * weightB\n      ) \/\n      total\n    );\n\n\n  const g =\n    Math.round(\n      (\n        g1 * weightA +\n        g2 * weightB\n      ) \/\n      total\n    );\n\n\n  const b =\n    Math.round(\n      (\n        b1 * weightA +\n        b2 * weightB\n      ) \/\n      total\n    );\n\n\n  const toHex =\n    x =>\n      Math.max(\n        0,\n        Math.min(\n          255,\n          x\n        )\n      )\n      .toString(16)\n      .padStart(2, '0');\n\n\n  return (\n    \"#\" +\n    toHex(r) +\n    toHex(g) +\n    toHex(b)\n  );\n\n}\n\n\n\n\/* ==========================================================\n   BUILD PROCEDURAL IRIS\n   ========================================================== *\/\n\nfunction buildIrisSvg(\n  id,\n  strandSeed\n) {\n\n  const svgNS =\n    \"http:\/\/www.w3.org\/2000\/svg\";\n\n\n  const svg =\n    document.createElementNS(\n      svgNS,\n      \"svg\"\n    );\n\n\n  svg.setAttribute(\n    \"viewBox\",\n    \"0 0 200 200\"\n  );\n\n\n  svg.id =\n    id;\n\n\n  const cx = 100;\n  const cy = 100;\n\n  const outerR = 98;\n  const pupilR = 30;\n\n  const pupilCx = 96;\n  const pupilCy = 104;\n\n\n\n  \/* Gradient *\/\n\n  const defs =\n    document.createElementNS(\n      svgNS,\n      \"defs\"\n    );\n\n\n  const grad =\n    document.createElementNS(\n      svgNS,\n      \"radialGradient\"\n    );\n\n\n  grad.id =\n    id + \"-grad\";\n\n\n  grad.setAttribute(\n    \"cx\",\n    \"48%\"\n  );\n\n\n  grad.setAttribute(\n    \"cy\",\n    \"44%\"\n  );\n\n\n  grad.setAttribute(\n    \"r\",\n    \"62%\"\n  );\n\n\n\n  const stop1 =\n    document.createElementNS(\n      svgNS,\n      \"stop\"\n    );\n\n\n  stop1.setAttribute(\n    \"offset\",\n    \"0%\"\n  );\n\n\n  const stop2 =\n    document.createElementNS(\n      svgNS,\n      \"stop\"\n    );\n\n\n  stop2.setAttribute(\n    \"offset\",\n    \"65%\"\n  );\n\n\n  const stop3 =\n    document.createElementNS(\n      svgNS,\n      \"stop\"\n    );\n\n\n  stop3.setAttribute(\n    \"offset\",\n    \"100%\"\n  );\n\n\n  grad.appendChild(\n    stop1\n  );\n\n\n  grad.appendChild(\n    stop2\n  );\n\n\n  grad.appendChild(\n    stop3\n  );\n\n\n  defs.appendChild(\n    grad\n  );\n\n\n  svg.appendChild(\n    defs\n  );\n\n\n\n  \/* Base iris *\/\n\n  const base =\n    document.createElementNS(\n      svgNS,\n      \"circle\"\n    );\n\n\n  base.setAttribute(\n    \"cx\",\n    cx\n  );\n\n\n  base.setAttribute(\n    \"cy\",\n    cy\n  );\n\n\n  base.setAttribute(\n    \"r\",\n    outerR\n  );\n\n\n  base.setAttribute(\n    \"fill\",\n    `url(#${id}-grad)`\n  );\n\n\n  svg.appendChild(\n    base\n  );\n\n\n\n  \/* Fibers *\/\n\n  const fibers =\n    document.createElementNS(\n      svgNS,\n      \"g\"\n    );\n\n\n  fibers.setAttribute(\n    \"class\",\n    \"fibers\"\n  );\n\n\n  let seed =\n    strandSeed;\n\n\n  function rand() {\n\n    seed =\n      (\n        seed * 9301 +\n        49297\n      ) %\n      233280;\n\n\n    return (\n      seed \/\n      233280\n    );\n\n  }\n\n\n  const strandCount =\n    150;\n\n\n  for (\n    let i = 0;\n    i < strandCount;\n    i++\n  ) {\n\n    const angle =\n      (\n        i \/\n        strandCount\n      ) *\n      Math.PI *\n      2 +\n      (\n        rand() -\n        0.5\n      ) *\n      0.05;\n\n\n    const innerR =\n      pupilR +\n      2 +\n      rand() * 4;\n\n\n    const lenJitter =\n      0.78 +\n      rand() *\n      0.22;\n\n\n    const outerRr =\n      outerR *\n      lenJitter;\n\n\n    const x1 =\n      cx +\n      Math.cos(angle) *\n      innerR;\n\n\n    const y1 =\n      cy +\n      Math.sin(angle) *\n      innerR;\n\n\n    const x2 =\n      cx +\n      Math.cos(angle) *\n      outerRr;\n\n\n    const y2 =\n      cy +\n      Math.sin(angle) *\n      outerRr;\n\n\n    const bend =\n      (\n        rand() -\n        0.5\n      ) *\n      6;\n\n\n    const midAngle =\n      angle +\n      bend *\n      0.01;\n\n\n    const midR =\n      (\n        innerR +\n        outerRr\n      ) \/\n      2;\n\n\n    const mx =\n      cx +\n      Math.cos(midAngle) *\n      midR;\n\n\n    const my =\n      cy +\n      Math.sin(midAngle) *\n      midR;\n\n\n\n    const path =\n      document.createElementNS(\n        svgNS,\n        \"path\"\n      );\n\n\n    path.setAttribute(\n      \"d\",\n      `M ${x1.toFixed(1)} ${y1.toFixed(1)}\n       Q ${mx.toFixed(1)} ${my.toFixed(1)}\n       ${x2.toFixed(1)} ${y2.toFixed(1)}`\n    );\n\n\n    path.setAttribute(\n      \"fill\",\n      \"none\"\n    );\n\n\n    path.setAttribute(\n      \"stroke-width\",\n      (\n        0.5 +\n        rand() *\n        1.1\n      )\n      .toFixed(2)\n    );\n\n\n    path.dataset.lightVariant =\n      (\n        rand() *\n        40 -\n        20\n      )\n      .toFixed(1);\n\n\n    path.dataset.opacityVariant =\n      (\n        0.25 +\n        rand() *\n        0.45\n      )\n      .toFixed(2);\n\n\n    fibers.appendChild(\n      path\n    );\n\n  }\n\n\n  svg.appendChild(\n    fibers\n  );\n\n\n\n  \/* Dark outer ring *\/\n\n  const limbal =\n    document.createElementNS(\n      svgNS,\n      \"circle\"\n    );\n\n\n  limbal.setAttribute(\n    \"cx\",\n    cx\n  );\n\n\n  limbal.setAttribute(\n    \"cy\",\n    cy\n  );\n\n\n  limbal.setAttribute(\n    \"r\",\n    outerR - 2\n  );\n\n\n  limbal.setAttribute(\n    \"fill\",\n    \"none\"\n  );\n\n\n  limbal.setAttribute(\n    \"stroke\",\n    \"#000000\"\n  );\n\n\n  limbal.setAttribute(\n    \"stroke-width\",\n    \"5\"\n  );\n\n\n  limbal.setAttribute(\n    \"opacity\",\n    \"0.35\"\n  );\n\n\n  svg.appendChild(\n    limbal\n  );\n\n\n\n  \/* Pupil *\/\n\n  const pupil =\n    document.createElementNS(\n      svgNS,\n      \"circle\"\n    );\n\n\n  pupil.setAttribute(\n    \"cx\",\n    pupilCx\n  );\n\n\n  pupil.setAttribute(\n    \"cy\",\n    pupilCy\n  );\n\n\n  pupil.setAttribute(\n    \"r\",\n    pupilR\n  );\n\n\n  pupil.setAttribute(\n    \"fill\",\n    \"#080808\"\n  );\n\n\n  svg.appendChild(\n    pupil\n  );\n\n\n\n  \/* Pupil edge *\/\n\n  const pupilRing =\n    document.createElementNS(\n      svgNS,\n      \"circle\"\n    );\n\n\n  pupilRing.setAttribute(\n    \"cx\",\n    pupilCx\n  );\n\n\n  pupilRing.setAttribute(\n    \"cy\",\n    pupilCy\n  );\n\n\n  pupilRing.setAttribute(\n    \"r\",\n    pupilR\n  );\n\n\n  pupilRing.setAttribute(\n    \"fill\",\n    \"none\"\n  );\n\n\n  pupilRing.setAttribute(\n    \"stroke\",\n    \"#000000\"\n  );\n\n\n  pupilRing.setAttribute(\n    \"stroke-width\",\n    \"1.5\"\n  );\n\n\n  pupilRing.setAttribute(\n    \"opacity\",\n    \"0.6\"\n  );\n\n\n  svg.appendChild(\n    pupilRing\n  );\n\n\n\n  \/* Catchlight *\/\n\n  const catch1 =\n    document.createElementNS(\n      svgNS,\n      \"ellipse\"\n    );\n\n\n  catch1.setAttribute(\n    \"cx\",\n    68\n  );\n\n\n  catch1.setAttribute(\n    \"cy\",\n    70\n  );\n\n\n  catch1.setAttribute(\n    \"rx\",\n    13\n  );\n\n\n  catch1.setAttribute(\n    \"ry\",\n    9\n  );\n\n\n  catch1.setAttribute(\n    \"fill\",\n    \"#ffffff\"\n  );\n\n\n  catch1.setAttribute(\n    \"opacity\",\n    \"0.55\"\n  );\n\n\n  svg.appendChild(\n    catch1\n  );\n\n\n\n  const catch2 =\n    document.createElementNS(\n      svgNS,\n      \"ellipse\"\n    );\n\n\n  catch2.setAttribute(\n    \"cx\",\n    132\n  );\n\n\n  catch2.setAttribute(\n    \"cy\",\n    138\n  );\n\n\n  catch2.setAttribute(\n    \"rx\",\n    6\n  );\n\n\n  catch2.setAttribute(\n    \"ry\",\n    4\n  );\n\n\n  catch2.setAttribute(\n    \"fill\",\n    \"#ffffff\"\n  );\n\n\n  catch2.setAttribute(\n    \"opacity\",\n    \"0.25\"\n  );\n\n\n  svg.appendChild(\n    catch2\n  );\n\n\n\n  \/* Vignette *\/\n\n  const vignette =\n    document.createElementNS(\n      svgNS,\n      \"circle\"\n    );\n\n\n  vignette.setAttribute(\n    \"cx\",\n    cx\n  );\n\n\n  vignette.setAttribute(\n    \"cy\",\n    cy\n  );\n\n\n  vignette.setAttribute(\n    \"r\",\n    outerR\n  );\n\n\n  vignette.setAttribute(\n    \"fill\",\n    \"none\"\n  );\n\n\n  vignette.setAttribute(\n    \"stroke\",\n    \"#000000\"\n  );\n\n\n  vignette.setAttribute(\n    \"stroke-width\",\n    \"14\"\n  );\n\n\n  vignette.setAttribute(\n    \"opacity\",\n    \"0.12\"\n  );\n\n\n  svg.appendChild(\n    vignette\n  );\n\n\n  return svg;\n\n}\n\n\n\n\/* ==========================================================\n   COLORIZE EYE\n   ========================================================== *\/\n\nfunction colorizeIris(\n  svg,\n  hex\n) {\n\n  const {\n    h,\n    s,\n    l\n  } =\n    hexToHsl(hex);\n\n\n  const grad =\n    svg.querySelector(\n      `#${svg.id}-grad`\n    );\n\n\n  const stops =\n    grad.querySelectorAll(\n      'stop'\n    );\n\n\n  stops[0].setAttribute(\n    'stop-color',\n    `hsl(\n      ${h},\n      ${Math.min(s + 8, 100)}%,\n      ${Math.min(l + 18, 88)}%\n    )`\n  );\n\n\n  stops[1].setAttribute(\n    'stop-color',\n    `hsl(\n      ${h},\n      ${s}%,\n      ${l}%\n    )`\n  );\n\n\n  stops[2].setAttribute(\n    'stop-color',\n    `hsl(\n      ${h},\n      ${Math.max(s - 5, 0)}%,\n      ${Math.max(l - 22, 6)}%\n    )`\n  );\n\n\n  svg\n    .querySelectorAll(\n      '.fibers path'\n    )\n    .forEach(\n      path => {\n\n        const variant =\n          parseFloat(\n            path.dataset\n              .lightVariant\n          );\n\n\n        const opacity =\n          parseFloat(\n            path.dataset\n              .opacityVariant\n          );\n\n\n        const strandL =\n          Math.max(\n            4,\n            Math.min(\n              94,\n              l + variant\n            )\n          );\n\n\n        path.setAttribute(\n          'stroke',\n          `hsl(\n            ${h},\n            ${s}%,\n            ${strandL}%\n          )`\n        );\n\n\n        path.setAttribute(\n          'stroke-opacity',\n          opacity\n        );\n\n      }\n    );\n\n}\n\n\n\n\/* ==========================================================\n   BUILD BOTH EYES\n   ========================================================== *\/\n\nconst afterSvg =\n  buildIrisSvg(\n    'irisAfter',\n    7\n  );\n\n\nlayerAfter.appendChild(\n  afterSvg\n);\n\n\nconst beforeSvg =\n  buildIrisSvg(\n    'irisBefore',\n    23\n  );\n\n\nlayerBefore.appendChild(\n  beforeSvg\n);\n\n\n\n\/* ==========================================================\n   CURRENT COLORS\n   ========================================================== *\/\n\nlet currentNaturalColor =\n  '#2e1a0f';\n\n\nlet currentLensColor =\n  '#c11414';\n\n\n\n\/* ==========================================================\n   UPDATE CONTACT LENS EYE\n\n   70% lens color\n   30% natural eye color\n   ========================================================== *\/\n\nfunction updateAfterEye() {\n\n  const blended =\n    blendHex(\n      currentLensColor,\n      0.7,\n      currentNaturalColor,\n      0.3\n    );\n\n\n  colorizeIris(\n    afterSvg,\n    blended\n  );\n\n}\n\n\n\n\/* ==========================================================\n   APPLY LENS SELECTION\n   ========================================================== *\/\n\nfunction applyLensSelection(\n  button\n) {\n\n  if (!button) {\n    return;\n  }\n\n\n  colorRow\n    .querySelectorAll(\n      '.color-btn'\n    )\n    .forEach(\n      btn => {\n\n        btn.classList.remove(\n          'active'\n        );\n\n\n        btn.setAttribute(\n          'aria-pressed',\n          'false'\n        );\n\n      }\n    );\n\n\n  button.classList.add(\n    'active'\n  );\n\n\n  button.setAttribute(\n    'aria-pressed',\n    'true'\n  );\n\n\n  const color =\n    button.dataset.color;\n\n\n  const name =\n    button.dataset.name;\n\n\n  const line =\n    button.dataset.line;\n\n\n  const url =\n    button.dataset.url;\n\n\n  currentLensColor =\n    color;\n\n\n  updateAfterEye();\n\n\n  afterLabel.textContent =\n    'With ' + name;\n\n\n  stripName.textContent =\n    name;\n\n\n  stripLine.textContent =\n    line;\n\n\n  stripSwatch.style.background =\n    color;\n\n\n  stripShop.href =\n    url;\n\n}\n\n\n\n\/* ==========================================================\n   UPDATE LEFT \/ RIGHT ARROWS\n   ========================================================== *\/\n\nfunction updateColorArrows() {\n\n  const maxScroll =\n    colorRow.scrollWidth -\n    colorRow.clientWidth;\n\n\n  \/*\n    Disable LEFT arrow\n    when at beginning.\n  *\/\n\n  colorPrev.disabled =\n    colorRow.scrollLeft <= 2;\n\n\n  \/*\n    Disable RIGHT arrow\n    when at end or when every color fits.\n  *\/\n\n  colorNext.disabled =\n    maxScroll <= 2 ||\n    colorRow.scrollLeft >=\n      maxScroll - 2;\n\n}\n\n\n\n\/* ==========================================================\n   RENDER COLORS FOR CHOSEN BRAND\n   ========================================================== *\/\n\nfunction renderLensColors(\n  brandKey\n) {\n\n  const brand =\n    LENS_BRANDS[\n      brandKey\n    ];\n\n\n  if (!brand) {\n    return;\n  }\n\n\n  \/* Remove previous brand colors *\/\n\n  colorRow.innerHTML =\n    \"\";\n\n\n  \/* Create new buttons *\/\n\n  brand.colors.forEach(\n    item => {\n\n      const button =\n        document.createElement(\n          \"button\"\n        );\n\n\n      button.type =\n        \"button\";\n\n\n      button.className =\n        \"color-btn\";\n\n\n      button.style.background =\n        item.color;\n\n\n      button.dataset.name =\n        item.name;\n\n\n      button.dataset.color =\n        item.color;\n\n\n      button.dataset.line =\n        brand.line;\n\n\n      button.dataset.url =\n        brand.url;\n\n\n      button.title =\n        item.name;\n\n\n      button.setAttribute(\n        \"aria-label\",\n        item.name\n      );\n\n\n      button.setAttribute(\n        \"aria-pressed\",\n        \"false\"\n      );\n\n\n      colorRow.appendChild(\n        button\n      );\n\n    }\n  );\n\n\n\n  \/*\n    Automatically select\n    first shade of brand.\n  *\/\n\n  const firstColor =\n    colorRow.querySelector(\n      '.color-btn'\n    );\n\n\n  if (firstColor) {\n\n    applyLensSelection(\n      firstColor\n    );\n\n  }\n\n\n\n  \/*\n    Every time brand changes,\n    return scroller to beginning.\n  *\/\n\n  colorRow.scrollLeft =\n    0;\n\n\n\n  \/*\n    Wait until browser has calculated\n    new width, then update arrows.\n  *\/\n\n  requestAnimationFrame(\n    () => {\n\n      updateColorArrows();\n\n    }\n  );\n\n}\n\n\n\n\/* ==========================================================\n   BRAND BUTTON CLICKS\n   ========================================================== *\/\n\nbrandButtons.addEventListener(\n  'click',\n  (e) => {\n\n    const button =\n      e.target.closest(\n        '.brand-btn'\n      );\n\n\n    if (!button) {\n      return;\n    }\n\n\n\n    brandButtons\n      .querySelectorAll(\n        '.brand-btn'\n      )\n      .forEach(\n        btn => {\n\n          btn.classList.remove(\n            'active'\n          );\n\n\n          btn.setAttribute(\n            'aria-pressed',\n            'false'\n          );\n\n        }\n      );\n\n\n\n    button.classList.add(\n      'active'\n    );\n\n\n    button.setAttribute(\n      'aria-pressed',\n      'true'\n    );\n\n\n\n    renderLensColors(\n      button.dataset.brand\n    );\n\n  }\n);\n\n\n\n\/* ==========================================================\n   LENS COLOR CLICKS\n   ========================================================== *\/\n\ncolorRow.addEventListener(\n  'click',\n  (e) => {\n\n    const button =\n      e.target.closest(\n        '.color-btn'\n      );\n\n\n    if (!button) {\n      return;\n    }\n\n\n    applyLensSelection(\n      button\n    );\n\n  }\n);\n\n\n\n\/* ==========================================================\n   LEFT COLOR ARROW\n   ========================================================== *\/\n\ncolorPrev.addEventListener(\n  'click',\n  () => {\n\n    colorRow.scrollBy({\n\n      \/*\n        3 columns at a time:\n        34px circle + 12px gap\n        = 46px \u00d7 3\n        = 138px\n      *\/\n\n      left: -138,\n\n      behavior: 'smooth'\n\n    });\n\n  }\n);\n\n\n\n\/* ==========================================================\n   RIGHT COLOR ARROW\n   ========================================================== *\/\n\ncolorNext.addEventListener(\n  'click',\n  () => {\n\n    colorRow.scrollBy({\n\n      left: 138,\n\n      behavior: 'smooth'\n\n    });\n\n  }\n);\n\n\n\n\/* ==========================================================\n   UPDATE ARROWS WHILE SCROLLING\n   ========================================================== *\/\n\ncolorRow.addEventListener(\n  'scroll',\n  () => {\n\n    updateColorArrows();\n\n  }\n);\n\n\n\n\/* ==========================================================\n   NATURAL EYE COLOR\n   ========================================================== *\/\n\nnaturalColorRow.addEventListener(\n  'click',\n  (e) => {\n\n    const button =\n      e.target.closest(\n        '.color-btn'\n      );\n\n\n    if (!button) {\n      return;\n    }\n\n\n\n    naturalColorRow\n      .querySelectorAll(\n        '.color-btn'\n      )\n      .forEach(\n        btn => {\n\n          btn.classList.remove(\n            'active'\n          );\n\n        }\n      );\n\n\n\n    button.classList.add(\n      'active'\n    );\n\n\n    const color =\n      button.dataset.color;\n\n\n    const name =\n      button.dataset.name;\n\n\n    currentNaturalColor =\n      color;\n\n\n\n    \/* Change natural eye *\/\n\n    colorizeIris(\n      beforeSvg,\n      color\n    );\n\n\n\n    \/*\n      Recalculate contact lens result\n      based on new natural eye color.\n    *\/\n\n    updateAfterEye();\n\n\n\n    beforeLabel.textContent =\n      'Natural ' + name;\n\n  }\n);\n\n\n\n\/* ==========================================================\n   INITIAL PAGE STATE\n   ========================================================== *\/\n\n\/* Natural dark brown *\/\n\ncolorizeIris(\n  beforeSvg,\n  currentNaturalColor\n);\n\n\n\/*\n  Load Pure Colors Halloween\n  automatically when page opens.\n*\/\n\nrenderLensColors(\n  'pure-halloween'\n);\n\n\n\/*\n  Update arrows again if\n  browser window changes size.\n*\/\n\nwindow.addEventListener(\n  'resize',\n  () => {\n\n    updateColorArrows();\n\n  }\n);\n\n\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>VisionPros \u2014 Before \/ After Lens Color Preview See the transformation Choose your natural eye color on the left, then select a colored or Halloween contact lens on the right. Drag across the eye preview to compare the before-and-after effect and see how different lens shades can change the overall appearance of your eyes before [&hellip;]<\/p>\n","protected":false},"author":15,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[398],"tags":[],"semantictags":[],"class_list":["post-7347","post","type-post","status-publish","format-standard","hentry","category-cosplay"],"_links":{"self":[{"href":"https:\/\/www.visionpros.com\/pro\/wp-json\/wp\/v2\/posts\/7347","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.visionpros.com\/pro\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.visionpros.com\/pro\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.visionpros.com\/pro\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.visionpros.com\/pro\/wp-json\/wp\/v2\/comments?post=7347"}],"version-history":[{"count":20,"href":"https:\/\/www.visionpros.com\/pro\/wp-json\/wp\/v2\/posts\/7347\/revisions"}],"predecessor-version":[{"id":7367,"href":"https:\/\/www.visionpros.com\/pro\/wp-json\/wp\/v2\/posts\/7347\/revisions\/7367"}],"wp:attachment":[{"href":"https:\/\/www.visionpros.com\/pro\/wp-json\/wp\/v2\/media?parent=7347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.visionpros.com\/pro\/wp-json\/wp\/v2\/categories?post=7347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.visionpros.com\/pro\/wp-json\/wp\/v2\/tags?post=7347"},{"taxonomy":"semantictags","embeddable":true,"href":"https:\/\/www.visionpros.com\/pro\/wp-json\/wp\/v2\/semantictags?post=7347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}