https://onlinetools.com/image/replace-image-color

ID scansione:
72d86c7e-55fb-4e92-9bc9-cbd60506f781Fatto
URL inviato:
https://onlinetools.com/image/replace-image-color
Report terminato:

I link in uscita identificati dalla pagina

LinkTesto
https://www.browserling.com/?from=otBrowserling
https://www.browserling.com/?from=tools-menuBrowserling
https://www.browserling.com/?from=tools-image-ld-2021-04-25team Browserling
https://www.browserling.com/?from=tools-image-cr-2021-04-25Browserling
https://www.browserling.com/tools?from=tools-image-crt-2021-04-25web developer tools
https://onlinePNGtools.comPNG Tools
https://onlineJPGtools.comJPG Tools
https://onlineGIFtools.comGIF Tools
https://onlineTEXTtools.comText Tools
https://onlineSTRINGtools.comString Tools

Variabili JavaScript Ā· 88 trovate

Le variabili JavaScript globali caricate sull'oggetto finestra di una pagina sono variabili dichiarate all'esterno delle funzioni e accessibili da qualsiasi punto del codice nell'ambito corrente

NomeTipo
onbeforetoggleobject
documentPictureInPictureobject
onscrollendobject
sc_projectnumber
sc_invisiblenumber
sc_securitystring
_statcounterfunction
gtagfunction
dataLayerobject
setCookiefunction

Messaggi di log della console Ā· 1 trovati

Messaggi registrati nella console Web

TipoCategoriaLog
logother
URL
https://onlinetools.com/CACHE/js/main.js?v=6b7ec175f782ec6221c3cfc7a1edf4abc2c2735b
Testo
%c You've found a secret! Use coupon code TOOLHACKER to get a discount for our tools! (You can apply this coupon code in the pricing page.) color: rgb(180,180,180)

HTML

Il corpo HTML non elaborato della pagina

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><link href="/favicon.ico" rel="icon" type="image/x-icon"><meta content="width=device-width,minimum-scale=1,initial-scale=1" name="viewport"><meta content="#5581b5" name="theme-color"><title>Replace a Color in Image ā€“ Online Image Tools</title><meta content="Simple, free, and easy-to-use online tool that replaces one color with another in images. Simply import your image and it'll transform into an image with a new color." name="description"><meta content="Replace a Color in Image" property="og:title"><meta content="Simple, free, and easy-to-use online tool that replaces one color with another in images. Simply import your image and it'll transform into an image with a new color." property="og:description"><meta content="https://onlinetools.com/image/replace-image-color" property="og:url"><meta content="https://onlinetools.com/images/preview-image-onlineimagetools.png" property="og:image"><meta content="293802344440222" property="fb:app_id"><meta content="summary_large_image" name="twitter:card"><meta content="@browserling" name="twitter:site"><meta content="Replace a Color in Image" name="twitter:title"><meta content="Simple, free, and easy-to-use online tool that replaces one color with another in images. Simply import your image and it'll transform into an image with a new color." name="twitter:description"><meta content="@browserling" name="twitter:creator"><meta content="https://onlinetools.com/images/preview-image-onlineimagetools.png" name="twitter:image:src"><link href="https://onlinetools.com/image/replace-image-color" rel="canonical"><link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"><link as="style" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&amp;display=swap" rel="preload"><link as="style" href="https://fonts.googleapis.com/css?family=Source+Sans+3:400,500,700&amp;display=swap" rel="preload"><link as="style" href="https://fonts.googleapis.com/css?family=Plus+Jakarta+Sans:400,500,700&amp;display=swap" rel="preload"><link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&amp;display=swap" onload="this.onload=null;this.removeAttribute('media');" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com/css?family=Source+Sans+3:400,500,700&amp;display=swap" onload="this.onload=null;this.removeAttribute('media');" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com/css?family=Plus+Jakarta+Sans:400,500,700&amp;display=swap" onload="this.onload=null;this.removeAttribute('media');" rel="stylesheet" type="text/css"><link href="/CACHE/css/main.css?v=6b7ec175f782ec6221c3cfc7a1edf4abc2c2735b" rel="stylesheet" type="text/css"><link as="style" class="unique-resource" href="/css/colorpicker.css?v=6b7ec175f782ec6221c3cfc7a1edf4abc2c2735b" onload="this.onload=null;this.rel='stylesheet'" rel="stylesheet"><link href="/css/options.css?v=6b7ec175f782ec6221c3cfc7a1edf4abc2c2735b" rel="stylesheet"><style id="googleidentityservice_button_styles">.qJTHM{-moz-user-select:none;color:#202124;direction:ltr;font-family:"Roboto-Regular",arial,sans-serif;font-weight:400;margin:0;overflow:hidden}.ynRLnc{left:-9999px;position:absolute;top:-9999px}.L6cTce{display:none}.bltWBb{word-break:break-all}.hSRGPd{color:#1a73e8;cursor:pointer;font-weight:500;text-decoration:none}.Bz112c-W3lGp{height:16px;width:16px}.Bz112c-E3DyYd{height:20px;width:20px}.Bz112c-r9oPif{height:24px;width:24px}.Bz112c-uaxL4e{-moz-border-radius:10px;border-radius:10px}.LgbsSe-Bz112c{display:block}.S9gUrf-YoZ4jf,.S9gUrf-YoZ4jf *{border:none;margin:0;padding:0}.fFW7wc-ibnC6b>.aZ2wEe>div{border-color:#4285f4}.P1ekSe-ZMv3u>div:nth-child(1){background-color:#1a73e8!important}.P1ekSe-ZMv3u>div:nth-child(2),.P1ekSe-ZMv3u>div:nth-child(3){background-image:linear-gradient(to right,rgba(255,255,255,.7),rgba(255,255,255,.7)),linear-gradient(to right,#1a73e8,#1a73e8)!important}.haAclf{display:inline-block}.nsm7Bb-HzV7m-LgbsSe{border-radius:4px;box-sizing:border-box;transition:background-color .218s,border-color .218s;-moz-user-select:none;background-color:#fff;background-image:none;border:1px solid #dadce0;color:#3c4043;cursor:pointer;font-family:"Google Sans",arial,sans-serif;font-size:14px;height:40px;letter-spacing:0.25px;outline:none;overflow:hidden;padding:0 12px;position:relative;text-align:center;vertical-align:middle;white-space:nowrap;width:auto}@media screen and (-ms-high-contrast:active){.nsm7Bb-HzV7m-LgbsSe{border:2px solid windowText;color:windowText}}.nsm7Bb-HzV7m-LgbsSe.pSzOP-SxQuSe{font-size:14px;height:32px;letter-spacing:0.25px;padding:0 10px}.nsm7Bb-HzV7m-LgbsSe.purZT-SxQuSe{font-size:11px;height:20px;letter-spacing:0.3px;padding:0 8px}.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe{padding:0;width:40px}.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe.pSzOP-SxQuSe{width:32px}.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe.purZT-SxQuSe{width:20px}.nsm7Bb-HzV7m-LgbsSe.JGcpL-RbRzK{border-radius:20px}.nsm7Bb-HzV7m-LgbsSe.JGcpL-RbRzK.pSzOP-SxQuSe{border-radius:16px}.nsm7Bb-HzV7m-LgbsSe.JGcpL-RbRzK.purZT-SxQuSe{border-radius:10px}.nsm7Bb-HzV7m-LgbsSe.MFS4be-Ia7Qfc{border:none;color:#fff}.nsm7Bb-HzV7m-LgbsSe.MFS4be-v3pZbf-Ia7Qfc{background-color:#1a73e8}.nsm7Bb-HzV7m-LgbsSe.MFS4be-JaPV2b-Ia7Qfc{background-color:#202124;color:#e8eaed}.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-Bz112c{height:18px;margin-right:8px;min-width:18px;width:18px}.nsm7Bb-HzV7m-LgbsSe.pSzOP-SxQuSe .nsm7Bb-HzV7m-LgbsSe-Bz112c{height:14px;min-width:14px;width:14px}.nsm7Bb-HzV7m-LgbsSe.purZT-SxQuSe .nsm7Bb-HzV7m-LgbsSe-Bz112c{height:10px;min-width:10px;width:10px}.nsm7Bb-HzV7m-LgbsSe.jVeSEe .nsm7Bb-HzV7m-LgbsSe-Bz112c{margin-left:8px;margin-right:-4px}.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe .nsm7Bb-HzV7m-LgbsSe-Bz112c{margin:0;padding:10px}.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe.pSzOP-SxQuSe .nsm7Bb-HzV7m-LgbsSe-Bz112c{padding:8px}.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe.purZT-SxQuSe .nsm7Bb-HzV7m-LgbsSe-Bz112c{padding:4px}.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{border-top-left-radius:3px;border-bottom-left-radius:3px;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;justify-content:center;align-items:center;background-color:#fff;height:36px;margin-left:-10px;margin-right:12px;min-width:36px;width:36px}.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf .nsm7Bb-HzV7m-LgbsSe-Bz112c,.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf .nsm7Bb-HzV7m-LgbsSe-Bz112c{margin:0;padding:0}.nsm7Bb-HzV7m-LgbsSe.pSzOP-SxQuSe .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{height:28px;margin-left:-8px;margin-right:10px;min-width:28px;width:28px}.nsm7Bb-HzV7m-LgbsSe.purZT-SxQuSe .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{height:16px;margin-left:-6px;margin-right:8px;min-width:16px;width:16px}.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{border-radius:3px;margin-left:2px;margin-right:0;padding:0}.nsm7Bb-HzV7m-LgbsSe.JGcpL-RbRzK .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{border-radius:18px}.nsm7Bb-HzV7m-LgbsSe.pSzOP-SxQuSe.JGcpL-RbRzK .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{border-radius:14px}.nsm7Bb-HzV7m-LgbsSe.purZT-SxQuSe.JGcpL-RbRzK .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{border-radius:8px}.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;align-items:center;flex-direction:row;justify-content:space-between;flex-wrap:nowrap;height:100%;position:relative;width:100%}.nsm7Bb-HzV7m-LgbsSe .oXtfBe-l4eHX{justify-content:center}.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-BPrWId{flex-grow:1;font-family:"Google Sans",arial,sans-serif;font-weight:500;overflow:hidden;text-overflow:ellipsis;vertical-align:top}.nsm7Bb-HzV7m-LgbsSe.purZT-SxQuSe .nsm7Bb-HzV7m-LgbsSe-BPrWId{font-weight:300}.nsm7Bb-HzV7m-LgbsSe .oXtfBe-l4eHX .nsm7Bb-HzV7m-LgbsSe-BPrWId{flex-grow:0}.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-MJoBVe{transition:background-color .218s;bottom:0;left:0;position:absolute;right:0;top:0}.nsm7Bb-HzV7m-LgbsSe:hover,.nsm7Bb-HzV7m-LgbsSe:focus{box-shadow:none;border-color:#d2e3fc;outline:none}.nsm7Bb-HzV7m-LgbsSe:hover .nsm7Bb-HzV7m-LgbsSe-MJoBVe,.nsm7Bb-HzV7m-LgbsSe:focus .nsm7Bb-HzV7m-LgbsSe-MJoBVe{background:rgba(66,133,244,.04)}.nsm7Bb-HzV7m-LgbsSe:active .nsm7Bb-HzV7m-LgbsSe-MJoBVe{background:rgba(66,133,244,.1)}.nsm7Bb-HzV7m-LgbsSe.MFS4be-Ia7Qfc:hover .nsm7Bb-HzV7m-LgbsSe-MJoBVe,.nsm7Bb-HzV7m-LgbsSe.MFS4be-Ia7Qfc:focus .nsm7Bb-HzV7m-LgbsSe-MJoBVe{background:rgba(255,255,255,.24)}.nsm7Bb-HzV7m-LgbsSe.MFS4be-Ia7Qfc:active .nsm7Bb-HzV7m-LgbsSe-MJoBVe{background:rgba(255,255,255,.32)}.nsm7Bb-HzV7m-LgbsSe .n1UuX-DkfjY{border-radius:50%;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;height:20px;margin-left:-4px;margin-right:8px;min-width:20px;width:20px}.nsm7Bb-HzV7m-LgbsSe.jVeSEe .nsm7Bb-HzV7m-LgbsSe-BPrWId{font-family:"Roboto";font-size:12px;text-align:left}.nsm7Bb-HzV7m-LgbsSe.jVeSEe .nsm7Bb-HzV7m-LgbsSe-BPrWId .ssJRIf,.nsm7Bb-HzV7m-LgbsSe.jVeSEe .nsm7Bb-HzV7m-LgbsSe-BPrWId .K4efff .fmcmS{overflow:hidden;text-overflow:ellipsis}.nsm7Bb-HzV7m-LgbsSe.jVeSEe .nsm7Bb-HzV7m-LgbsSe-BPrWId .K4efff{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;align-items:center;color:#5f6368;fill:#5f6368;font-size:11px;font-weight:400}.nsm7Bb-HzV7m-LgbsSe.jVeSEe.MFS4be-Ia7Qfc .nsm7Bb-HzV7m-LgbsSe-BPrWId .K4efff{color:#e8eaed;fill:#e8eaed}.nsm7Bb-HzV7m-LgbsSe.jVeSEe .nsm7Bb-HzV7m-LgbsSe-BPrWId .K4efff .Bz112c{height:18px;margin:-3px -3px -3px 2px;min-width:18px;width:18px}.nsm7Bb-HzV7m-LgbsSe.jVeSEe .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px;margin-left:12px;margin-right:-10px}.nsm7Bb-HzV7m-LgbsSe.jVeSEe.JGcpL-RbRzK .nsm7Bb-HzV7m-LgbsSe-Bz112c-haAclf{border-radius:18px}.L5Fo6c-sM5MNb{border:0;display:block;left:0;position:relative;top:0}.L5Fo6c-bF1uUb{-moz-border-radius:4px;border-radius:4px;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0}.L5Fo6c-bF1uUb:focus{border:none;outline:none}sentinel{}</style></head><body data-bot="False" data-category="image" data-dev="False" data-discount_color_scheme="BestBlue" data-discount_icon_type="discount/icons/lightning.html" data-discount_modal="True" data-discount_modal_show="true" data-discount_subtitle="and new features!" data-discount_title="New Pricing" data-discount_type="223" data-domain="onlinetools.com" data-googleclient="715271769449-jpt4kiujcpparpebaba1h2e1evnioj1j.apps.googleusercontent.com" data-icons="yes" data-is_login="False" data-is_premium="False" data-old_pricing="True" data-site="onlinetools" data-site_short="ot" data-txt_domain="www.OnlineTools.com" data-txt_ms="image" data-txt_site_name="Online Tools" data-txt_ss="Image" id="siteinfo" class="modal-open" style="overflow: hidden; padding-right: 10px;"><div data-colorscheme="BestBlue" data-type="l1_title_cta_white" data-show="off" data-click="off" data-title="New Pricing" data-subtitle="and new features!" data-icontype="discount/icons/lightning.html" class="animate__faster discount-BestBlue cursor-pointer d-none animate__animated animate__slideInDown" id="discount-header">
  <a href="/pricing" class="text-decoration-none" onclick="Site.statsDiscountHeader('header', 'click');">
    <div class="popup-content py-1 d-flex align-items-center justify-content-center l1_title_cta_white">
      <div class="pe-3">
        <div class="popup-content-subtitle">New Pricing</div>
      </div>
      <div>
        <div class="border detail border-white px-2 py-1">
          View Details
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"></path>
          </svg>
        </div>
      </div>
    </div>
  </a>
</div><div class="svg-sprites"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol id="icon-chevron-right" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6l-6-6z"></path></symbol></svg></div><div aria-labelledby="staticBackdropLabel" class="discount modal fade discount-BestBlue show" data-click="count_prstr_click" data-close="count_prstr_close" data-show="count_prstr_show" id="discountNotification" tabindex="-1" aria-modal="true" role="dialog" style="display: block;"><div class="modal-dialog modal-sm modal-dialog-centered cursor-pointer"><div class="modal-content" id="view-detail"><div class="row pb-4"><div class="col pt-5"><div aria-label="Close" class="discount-close p-3" data-bs-dismiss="modal"><span class="border rounded p-2">
              <svg class="bi bi-x-lg" fill="currentColor" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"></path>
              </svg>
            </span></div></div></div><div class="modal-body pt-0 text-center"><div><div class="row"><div class="col"><svg class="bi bi-lightning" fill="currentColor" height="64" viewBox="0 0 16 16" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M5.52.359A.5.5 0 0 1 6 0h4a.5.5 0 0 1 .474.658L8.694 6H12.5a.5.5 0 0 1 .395.807l-7 9a.5.5 0 0 1-.873-.454L6.823 9.5H3.5a.5.5 0 0 1-.48-.641l2.5-8.5zM6.374 1 4.168 8.5H7.5a.5.5 0 0 1 .478.647L6.78 13.04 11.478 7H8a.5.5 0 0 1-.474-.658L9.306 1H6.374z"></path></svg><div class="discount-strategy pt-2">New Pricing</div></div></div><div class="row pb-1"><div class="col"><div class="discount-subtitle">and new features!</div></div></div><div class="row pt-4"><div class="col"><button id="btn-view">View Details <span class="pl-2">
                  <svg class="bi bi-arrow-right" fill="currentColor" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" fill-rule="evenodd"></path>
                  </svg>
                </span></button></div></div></div></div></div></div></div><span id="google-auth-gsi" style="opacity: 0; position: absolute"></span><div class="container navbar"><div class="nav-item d-flex me-auto flex-row navbar-brand"><div class="p-2"><a class="text-reset text-decoration-none" href="/"><img alt="Online Tools" class="rounded" src="/images/logo.png" width="36px"></a></div><div class="d-flex flex-column"><div class="fw-bold text-primary" style="margin-top: 3px;"><a class="text-reset text-decoration-none fw-medium" href="/">ONLINE<span class="text-secondary">TOOLS</span></a></div><small class="text-muted fs-6 text-nowrap" style="margin-top: -6px">Created by <a class="text-decoration-none text-primary" href="https://www.browserling.com/?from=ot" rel="nofollow">Browserling</a></small></div><div class="d-none d-xs-none d-sm-none d-md-none d-lg-block"><button aria-controls="offcanvasMenu" class="btn btn-outline-primary border border-primary dropdown-toggle-sm ms-4 fs-6" data-bs-target="#offcanvasMenu" data-bs-toggle="offcanvas" style="margin-top: 6px; height: 39px;" type="button">All Tools</button></div><div class="d-none d-xs-none d-sm-none d-md-none d-lg-none d-xl-block"><div class="input-group input-group-sm mb-2" style="margin-top: 6px; height: 39px; padding-left: 20px;"><span class="input-group-text" id="basic-search">
          <svg class="bi bi-search" fill="currentColor" height="12" viewBox="0 0 16 16" width="12" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"></path>
          </svg>
        </span><input aria-describedby="basic-search" aria-label="Search tools..." class="form-control" id="header-search" placeholder="Search tools..." type="text"></div></div><div class="d-block d-xs-block d-sm-block d-md-block d-lg-block d-xl-none" style="margin-top: 6px; padding-left: 20px;"><button class="btn btn-sm btn-outline-primary" id="header-search-mini" type="button"><svg class="bi bi-search" fill="currentColor" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"></path></svg></button></div></div><div class="nav-item d-flex"><div class="mx-3 d-flex align-self-center justify-content-end d-none d-xs-none d-sm-none d-md-none d-lg-block"><a class="text-dark text-nowrap text-decoration-none fw-medium font-ss3" href="/pricing#features">Features</a></div><div class="mx-3 d-flex align-self-center justify-content-end d-none d-xs-none d-sm-none d-md-block d-lg-block"><a class="nav-link text-dark text-nowrap text-decoration-none fw-medium font-ss3" href="/pricing">Pricing</a></div><div class="ms-3 me-5 d-flex align-self-center justify-content-end d-none d-xs-none d-sm-none d-md-block d-lg-block"><a class="nav-link text-dark text-nowrap text-decoration-none fw-medium font-ss3" href="/about">About Us</a></div><div class="ms-1 d-flex align-self-center justify-content-end d-none d-xs-none d-sm-none d-md-block d-lg-block"><a class="nav-link text-primary text-nowrap text-decoration-none fw-medium font-ss3" href="/signin">Sign In</a></div><div class="mx-3 d-flex align-self-center justify-content-end d-none d-xs-none d-sm-none d-md-block d-lg-block"><a class="nav-link text-nowrap text-decoration-none btn btn-sm btn-primary text-white fw-bold font-ss3" href="/signup">Sign Up</a></div></div><div class="nav-item d-block d-xs-block d-sm-block d-md-none d-lg-none dropdown dropdown-mega position-static"><button class="me-3 text-nowrap bg-transparent text-decoration-none border border-0" data-bs-auto-close="outside" data-bs-toggle="dropdown" data-type="mega-menu-categories"><svg class="bi bi-list" fill="currentColor" height="32" viewBox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5" fill-rule="evenodd"></path></svg></button><div class="dropdown-menu shadow"><div class="mega-content"><div class="container-fluid"><div class="row"><div class="col-6"><div class="d-flex flex-column"><a class="my-2 text-dark text-nowrap text-decoration-none fw-medium font-ss3" href="/pricing#features"><svg class="bi bi-rocket-takeoff" fill="currentColor" height="16" style="margin-top: -4px; margin-right: 7px" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M9.752 6.193c.599.6 1.73.437 2.528-.362s.96-1.932.362-2.531c-.599-.6-1.73-.438-2.528.361-.798.8-.96 1.933-.362 2.532"></path><path d="M15.811 3.312c-.363 1.534-1.334 3.626-3.64 6.218l-.24 2.408a2.56 2.56 0 0 1-.732 1.526L8.817 15.85a.51.51 0 0 1-.867-.434l.27-1.899c.04-.28-.013-.593-.131-.956a9 9 0 0 0-.249-.657l-.082-.202c-.815-.197-1.578-.662-2.191-1.277-.614-.615-1.079-1.379-1.275-2.195l-.203-.083a10 10 0 0 0-.655-.248c-.363-.119-.675-.172-.955-.132l-1.896.27A.51.51 0 0 1 .15 7.17l2.382-2.386c.41-.41.947-.67 1.524-.734h.006l2.4-.238C9.005 1.55 11.087.582 12.623.208c.89-.217 1.59-.232 2.08-.188.244.023.435.06.57.093q.1.026.16.045c.184.06.279.13.351.295l.029.073a3.5 3.5 0 0 1 .157.721c.055.485.051 1.178-.159 2.065m-4.828 7.475.04-.04-.107 1.081a1.54 1.54 0 0 1-.44.913l-1.298 1.3.054-.38c.072-.506-.034-.993-.172-1.418a9 9 0 0 0-.164-.45c.738-.065 1.462-.38 2.087-1.006M5.205 5c-.625.626-.94 1.351-1.004 2.09a9 9 0 0 0-.45-.164c-.424-.138-.91-.244-1.416-.172l-.38.054 1.3-1.3c.245-.246.566-.401.91-.44l1.08-.107zm9.406-3.961c-.38-.034-.967-.027-1.746.163-1.558.38-3.917 1.496-6.937 4.521-.62.62-.799 1.34-.687 2.051.107.676.483 1.362 1.048 1.928.564.565 1.25.941 1.924 1.049.71.112 1.429-.067 2.048-.688 3.079-3.083 4.192-5.444 4.556-6.987.183-.771.18-1.345.138-1.713a3 3 0 0 0-.045-.283 3 3 0 0 0-.3-.041Z"></path><path d="M7.009 12.139a7.6 7.6 0 0 1-1.804-1.352A7.6 7.6 0 0 1 3.794 8.86c-1.102.992-1.965 5.054-1.839 5.18.125.126 3.936-.896 5.054-1.902Z"></path></svg>Features</a> <a class="my-2 text-dark text-nowrap text-decoration-none fw-medium font-ss3" href="/pricing"><svg class="bi bi-tag" fill="currentColor" height="16" style="margin-top: -4px; margin-right: 7px" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707zM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1zM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707zM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0z"></path></svg>Pricing</a> <a class="my-2 text-dark text-nowrap text-decoration-none fw-medium font-ss3" href="/about"><svg class="bi bi-buildings" fill="currentColor" height="16" style="margin-top: -4px; margin-right: 7px" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M14.763.075A.5.5 0 0 1 15 .5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V14h-1v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .342-.474L6 7.64V4.5a.5.5 0 0 1 .276-.447l8-4a.5.5 0 0 1 .487.022M6 8.694 1 10.36V15h5zM7 15h2v-1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V15h2V1.309l-7 3.5z"></path><path d="M2 11h1v1H2zm2 0h1v1H4zm-2 2h1v1H2zm2 0h1v1H4zm4-4h1v1H8zm2 0h1v1h-1zm-2 2h1v1H8zm2 0h1v1h-1zm2-2h1v1h-1zm0 2h1v1h-1zM8 7h1v1H8zm2 0h1v1h-1zm2 0h1v1h-1zM8 5h1v1H8zm2 0h1v1h-1zm2 0h1v1h-1zm0-2h1v1h-1z"></path></svg>About Us</a></div></div><div class="col-6"><div class="d-flex flex-column"><a class="btn btn-sm btn-outline-primary text-nowrap text-decoration-none fw-medium my-2" href="/signin">Sign In</a> <a class="text-nowrap text-decoration-none btn btn-sm btn-primary text-white" href="/signup">Sign Up</a></div></div></div><hr><div class="fs-6 fw-medium pb-2">ALL TOOLS</div><div class="row overflow-scroll" id="mega-menu-categories" style="height: 200px"><div class="col-6"><span class="placeholder w-100 pb-2"></span> <span class="placeholder w-100 pb-2"></span> <span class="placeholder w-100 pb-2"></span></div><div class="col-6"><span class="placeholder w-100 pb-2"></span> <span class="placeholder w-100 pb-2"></span> <span class="placeholder w-100 pb-2"></span></div></div><hr><div class="row"><div class="col"><small class="text-muted">Made with love by <a href="https://www.browserling.com/?from=tools-menu" rel="nofollow">Browserling</a> and powered by alien technology.</small></div></div></div></div></div></div></div><div aria-labelledby="offcanvasMenuLabel" class="offcanvas offcanvas-top" data-type="header" id="offcanvasMenu" tabindex="-1"><div class="offcanvas-body"><div class="container-fluid"><div class="row"><div class="col"><button aria-label="Close" class="btn-close text-reset float-end mt-2" data-bs-dismiss="offcanvas" type="button"></button></div></div><div class="placeholder-glow" id="tools-header"><div class="container"><h3 class="text-primary">Our Network</h3><div class="row"><div class="col pb-2"><span class="placeholder w-100"></span></div></div><div class="row"><div class="col pb-2"><span class="placeholder w-100"></span></div></div><hr class="divider-primary my-3"><h3 class="text-primary">Coming Soon</h3><div class="row"><div class="col pb-2"><span class="placeholder w-100"></span></div></div><div class="row"><div class="col pb-2"><span class="placeholder w-100"></span></div></div><hr class="divider-primary my-3"><h3 class="text-primary">Coming Later</h3><div class="row"><div class="col pb-2"><span class="placeholder w-100"></span></div></div><div class="row"><div class="col pb-2"><span class="placeholder w-100"></span></div></div></div></div></div></div></div><div aria-labelledby="offcanvasSearchLabel" class="offcanvas offcanvas-top" id="offcanvasSearch" tabindex="-1"><div class="offcanvas-header"><h5 id="offcanvasSearchLabel"></h5><button aria-label="Close" class="btn-close text-reset p-3" data-bs-dismiss="offcanvas" type="button"></button></div><div class="offcanvas-body"><div class="container"><div class="row"><div class="col"><div class="row"><div class="col-md-2 col-lg-2"></div><div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 pt-3"><div class="d-flex flex-column"><div><div class="input-group mb-3 dropdown"><span class="input-group-text" id="basic-addon-search">
                        <svg class="bi bi-search" fill="currentColor" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
                          <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"></path>
                        </svg>
                    </span><input aria-describedby="button-addon" class="form-control dropdown-toggle" data-category="image" data-type="header" id="search-tools" placeholder="Search all tools" type="text" data-bs-toggle="dropdown"><div class="dropdown-menu autocomplete w-100 overflow-auto"></div></div><div class="modal fade" data-type="search-not-found" id="search-not-found-modal" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">Empty search results</h5><button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"></button></div><div class="modal-body"><p>You were searching for <mark><span id="search-not-found-text"></span></mark> but nothing was found... Tell us more, and we'll build a tool you were looking for!</p><form class="section search-not-found subscription needs-validation" id="onlinetools-search-not-found-box" novalidate=""><div class="row"><div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mb-3"><label class="form-label" for="search-not-found-input-email">Your email:</label><input class="form-control" id="search-not-found-input-email" placeholder="" required="" type="email" value=""><div class="invalid-feedback">Please provide a email.</div></div></div><div class="row"><div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mb-3"><label class="form-label" for="search-not-found-input-message">Tell us more:</label><textarea class="form-control" id="search-not-found-input-message" required="" rows="5"></textarea><div class="invalid-feedback">Please provide a message.</div></div></div><input class="form-control" id="search-not-found-input-notify" placeholder="" type="hidden"><div class="row"><div class="col text-center"><button class="btn btn-primary text-white" id="search-not-found-submit" type="submit">Submit</button></div></div></form></div></div></div></div></div><div class="row row-cols-1 row-cols-md-2 row-cols-lg-3"><div class="col pb-2"><div class="d-grid gap"><a class="btn btn-shadow btn-sm tracking" data-hint_type="header" data-query="create a polaroid" data-type="search-hint" href="/image/convert-image-to-polaroid">create a polaroid</a></div></div><div class="col pb-2"><div class="d-grid gap"><a class="btn btn-shadow btn-sm tracking" data-hint_type="header" data-query="pixelate an image" data-type="search-hint" href="/image/pixelate-image">pixelate an image</a></div></div><div class="col pb-2"><div class="d-grid gap"><a class="btn btn-shadow btn-sm tracking" data-hint_type="header" data-query="blur an image" data-type="search-hint" href="/image/blur-image">blur an image</a></div></div><div class="col pb-2"><div class="d-grid gap"><a class="btn btn-shadow btn-sm tracking" data-hint_type="header" data-query="remove color from image" data-type="search-hint" href="/image/remove-specific-color-from-image">remove color from image</a></div></div><div class="col pb-2"><div class="d-grid gap"><a class="btn btn-shadow btn-sm tracking" data-hint_type="header" data-query="duplicate an image" data-type="search-hint" href="/image/duplicate-image">duplicate an image</a></div></div><div class="col pb-2"><div class="d-grid gap"><a class="btn btn-shadow btn-sm tracking" data-hint_type="header" data-query="simplify image colors" data-type="search-hint" href="/image/simplify-image-colors">simplify image colors</a></div></div></div></div></div><div class="col-md-2 col-lg-2"></div></div></div></div></div></div></div><div class="container"><div class="row"><div class="col"><nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="/">Online Tools</a></li><li class="breadcrumb-item"><a href="/image">Image Tools</a></li><li aria-current="page" class="breadcrumb-item active">Image Color Replacer</li></ol></nav></div></div></div><div class="container"><div class="row"><div class="col-xs-12 col-sm-12 col-md-2 col-lg-2"></div><div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"><div class="alert border border-secondary rounded">
    
    <span class="badge bg-secondary text-white position-absolute" style="right: 10px; top: -13px;">ANNOUNCEMENT</span>
    
    <div class="d-flex flex-row">
        <div class="d-flex flex-column justify-content-center align-items-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#e26454" class="bi bi-rocket-takeoff" viewBox="0 0 16 16">
                <path d="M9.752 6.193c.599.6 1.73.437 2.528-.362.798-.799.96-1.932.362-2.531-.599-.6-1.73-.438-2.528.361-.798.8-.96 1.933-.362 2.532Z"></path>
                <path d="M15.811 3.312c-.363 1.534-1.334 3.626-3.64 6.218l-.24 2.408a2.56 2.56 0 0 1-.732 1.526L8.817 15.85a.51.51 0 0 1-.867-.434l.27-1.899c.04-.28-.013-.593-.131-.956a9.42 9.42 0 0 0-.249-.657l-.082-.202c-.815-.197-1.578-.662-2.191-1.277-.614-.615-1.079-1.379-1.275-2.195l-.203-.083a9.556 9.556 0 0 0-.655-.248c-.363-.119-.675-.172-.955-.132l-1.896.27A.51.51 0 0 1 .15 7.17l2.382-2.386c.41-.41.947-.67 1.524-.734h.006l2.4-.238C9.005 1.55 11.087.582 12.623.208c.89-.217 1.59-.232 2.08-.188.244.023.435.06.57.093.067.017.12.033.16.045.184.06.279.13.351.295l.029.073a3.475 3.475 0 0 1 .157.721c.055.485.051 1.178-.159 2.065Zm-4.828 7.475.04-.04-.107 1.081a1.536 1.536 0 0 1-.44.913l-1.298 1.3.054-.38c.072-.506-.034-.993-.172-1.418a8.548 8.548 0 0 0-.164-.45c.738-.065 1.462-.38 2.087-1.006ZM5.205 5c-.625.626-.94 1.351-1.004 2.09a8.497 8.497 0 0 0-.45-.164c-.424-.138-.91-.244-1.416-.172l-.38.054 1.3-1.3c.245-.246.566-.401.91-.44l1.08-.107-.04.039Zm9.406-3.961c-.38-.034-.967-.027-1.746.163-1.558.38-3.917 1.496-6.937 4.521-.62.62-.799 1.34-.687 2.051.107.676.483 1.362 1.048 1.928.564.565 1.25.941 1.924 1.049.71.112 1.429-.067 2.048-.688 3.079-3.083 4.192-5.444 4.556-6.987.183-.771.18-1.345.138-1.713a2.835 2.835 0 0 0-.045-.283 3.078 3.078 0 0 0-.3-.041Z"></path>
                <path d="M7.009 12.139a7.632 7.632 0 0 1-1.804-1.352A7.568 7.568 0 0 1 3.794 8.86c-1.102.992-1.965 5.054-1.839 5.18.125.126 3.936-.896 5.054-1.902Z"></path>
            </svg>
        </div>
        <div class="ps-3">
            
            <div>
                We just launched a new site ā€“ <a href="https://onlinetools.com/list">Online List Tools</a> ā€“ utilities for working with lists. Check it out!
            </div>
        </div>
    </div>
</div>
</div><div class="col-xs-12 col-sm-12 col-md-2 col-lg-2"></div></div><div class="d-none d-md-block"><div class="row justify-content-center align-items-center pb-2"><div class="col-xs-12 col-sm-12 col-md-2 col-lg-2"></div><div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"><h1 class="text-primary fs-2 text-center">Image Color Replacer</h1><h2 class="text-muted fs-3 text-center">World's Simplest Image Tool</h2><p class="fs-5 pt-2 text-center">Free online image color replacer. Just drag and drop your image here and it will automatically replace one color with another. You can adjust the old and new colors in the options, as well as control other color shades and smooth out the edge of the color replacement. Created by engineers from <a href="https://www.browserling.com/?from=tools-image-ld-2021-04-25" rel="nofollow">team Browserling</a>.</p><div class="row"><div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 pb-2"><div class="d-grid gap-2"><a class="btn btn-outline-primary btn-sm" href="#examples" onclick="Site.POST('/api/v1/stats/ui/image/count_ls_se', { type: 'count_ls_se' }, function(){});" type="button">See Examples</a></div></div><div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 pb-2"><div class="d-grid gap-2"><button class="btn btn-outline-primary btn-sm" id="tour" type="button">Learn How to Use</button></div></div><div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 pb-2"><div class="d-grid gap-2"><a class="btn btn-primary btn-sm" href="/pricing" id="spp">See Pricing and Plans</a></div></div></div></div><div class="col-xs-12 col-sm-12 col-md-2 col-lg-2"></div></div></div><div class="d-md-none"><div class="row justify-content-center align-items-center pb-2"><div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"><h1 class="text-primary fs-2 pe-2">Image Color Replacer</h1><h2 class="text-muted fs-3">World's Simplest Image Tool</h2><p class="fs-4 pt-2">Free online image color replacer. Just drag and drop your image here and it will automatically replace one color with another. You can adjust the old and new colors in the options, as well as control other color shades and smooth out the edge of the color replacement. Created by engineers from <a href="https://www.browserling.com/?from=tools-image-ld-2021-04-25" rel="nofollow">team Browserling</a>.</p><div class="row"><div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 pb-2"><div class="d-grid gap-2"><a class="btn btn-outline-primary btn-sm" href="#tool" id="use-this-tool" type="button">Use This Tool</a></div></div><div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 pb-2"><div class="d-grid gap-2"><a class="btn btn-outline-primary btn-sm" href="#examples" onclick="Site.POST('/api/v1/stats/ui/image/count_ls_se', { type: 'count_ls_se' }, function(){});" type="button">See Examples</a></div></div><div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 pb-2"><div class="d-grid gap-2"><button class="btn btn-outline-primary btn-sm" id="tour-mobile" type="button">Learn How to Use</button></div></div><div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 pb-2"><div class="d-grid gap-2"><a class="btn btn-primary btn-sm" href="/pricing" id="spp">See Pricing and Plans</a></div></div></div></div><div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"><img class="img-fluid pb-2" src="/images/image/illustrations/replace-image-color.png"></div></div></div></div><div class="container pb-4" id="tool"><div class="all-tools-container"><div class="section row sides tool tool-primary" data-accepts="image" data-override-options="" data-returns="image" data-tool-bridge="change-image-color" data-tool-url="replace-image-color" style="margin-left: 0px !important; margin-right: 0px !important; overflow-x: hidden; overflow-y: hidden;"><div class="body col"><div class="sides-wrapper row clearfix"><div class="mb-3 mb-md-0 side col-xs-12 col-sm-12 col-md-6 col-lg-6 input pe-0 pe-md-1" data-theme="" id="tool-input"><label><span class="data-type">Input Image (click on a color!)</span> <span class="px-1">
                            <div class="d-inline cursor-pointer tool-tour" data-bs-container="body" data-bs-content="Click here to learn how to use this tool." data-bs-placement="bottom" data-bs-toggle="popover" data-bs-trigger="hover" data-step="scr_input" id="tool-tour">
                                <svg fill="#55586c" height="16" style="margin-top: -3px;" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"></path>
                                    <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286m1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94"></path>
                                </svg>
                            </div>
                        </span> <span class="status active" animation-id="0.5163705397634177">loading from url...</span></label><div class="side-box empty" id="tour-input"><div class="side-wrapper border border-primary immersive"><div class="badge-old"><div class="badge-old-icon"></div><div class="badge-old-body"><div class="badge-old-title"></div><div class="badge-old-message"></div></div></div><div class="input-canvas-help"><span>
                                        
                                            <div class="help-normal text-center font-roboto" style="margin-top: 11px;">
                                                <div class="btn btn-primary text-white font-roboto animate__animated animate__pulse animate__infinite">
                                                    <svg class="bi bi-plus-circle me-2" fill="#fff" height="16" style="margin-top: -3px;" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"></path>
                                                        <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"></path>
                                                    </svg>
                                                    Click to load an image
                                                </div>
                                                <div class="pt-4 text-black">Or drop an image here</div>
                                                <div class="text-black">Or paste it here (ctrl+v)</div>
                                                <div class="text-black">Or load from examples (below)</div>
                                            </div>
                                        
                                        <div class="help-mouse">
                                            Release your mouse to import this file.
                                        </div>
                                        <div class="help-wait">
                                            Your file is being imported...
                                        </div>
                                    </span></div><canvas class="preview" width="339" height="306"></canvas><canvas class="data"></canvas></div><div class="side-widgets"><div class="side-widgets-wrapper"><div class="widget widget-load">Import from file<input type="file"></div><div class="widget" data-toggle="toggle-save-as">Save as...</div><div class="widget widget-copy">Copy to clipboard</div></div><div class="side-widgets-toggle"><div class="toggle-wrapper"><div class="widget-toggle toggle-save-as"><div class="widget widget-save-as" data-hides-toggle="">Download</div><div class="widget widget-pastebin is-disabled" title="Coming soon!">Export to Pastebin</div></div><div class="toggle-hide"><svg class="svg-icon" id="icon-close" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41z"></path></svg></div></div></div></div></div></div><div class="side ps-0 ps-md-1 col-xs-12 col-sm-12 col-md-6 col-lg-6 output" data-theme="" id="tool-output"><label><span class="data-type">Output Image (with a new color)</span> <span class="status"></span></label><div class="side-box empty" id="tour-output"><div class="side-wrapper border border-primary immersive"><div class="tool-combinator"><div class="combinator-list"><div class="combinator-tools"></div></div></div><div class="badge-old"><div class="badge-old-icon"></div><div class="badge-old-body"><div class="badge-old-title">Can't convert.</div><div class="badge-old-message">An error has occured.</div></div></div><div class="image-output-placeholder font-roboto position-absolute w-100 d-none d-xs-none d-sm-none d-md-block d-lg-block d-xl-block" style="margin-top: 140px; z-index:9; left: 15px;"><span class="p-2 rounded bg-white text-primary border border-1 border-primary">
                                        <svg class="bi bi-arrow-left" fill="currentColor" height="16" style="margin-top: -2px" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8" fill-rule="evenodd"></path>
                                        </svg>
                                        <span style="margin-left: 4px; margin-right: 3px;">Start by loading input</span>
                                    </span></div><div class="image-output-placeholder font-roboto position-absolute text-center w-100 d-block d-xs-block d-sm-block d-md-none d-lg-none d-xl-none" style="margin-top: 20px; z-index:9;"><span class="p-2 rounded bg-white text-primary border border-1 border-primary">
                                        <svg class="bi bi-arrow-up" fill="currentColor" height="16" style="margin-top: -2px" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5" fill-rule="evenodd"></path>
                                        </svg>
                                        <span style="margin-left: 4px; margin-right: 3px;">Start by loading input</span>
                                    </span></div><canvas class="preview" width="339" height="306"></canvas><canvas class="data"></canvas></div><div class="side-widgets"><div class="side-widgets-wrapper"><div class="widget widget-chain" data-toggle="toggle-chain">Chain with...</div><div class="widget widget-remove-chain" data-toggle="toggle-remove-chain">Remove chain</div><div class="widget" data-toggle="toggle-save-as" id="tour-save-as">Save as...</div><div class="widget" data-bs-target="#clipbModalb69b12a89ad84eb4a1d29fbe1098dab8" data-bs-toggle="modal" id="tour-copy-clipboard">Copy to clipboard</div></div><div class="side-widgets-toggle"><div class="toggle-wrapper"><div class="widget-toggle toggle-save-as"><div class="widget" data-bs-target="#downloadModalb69b12a89ad84eb4a1d29fbe1098dab8" data-bs-toggle="modal">Download</div><div class="widget widget-pastebin is-disabled" title="Coming soon!">Export to Pastebin</div></div><div class="widget-toggle toggle-remove-chain"><div class="widget widget-remove-chain-wrap"><span class="remove-chain-text">
                                                Remove <span class="remove-how-many">no tools</span>?
                                            </span><div class="remove-chain-yes"><svg class="svg-icon" id="icon-check" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19L21 7l-1.41-1.41z"></path></svg></div></div></div><div class="widget-toggle toggle-unchainable"><div class="widget">This tool cannot be chained.</div></div><div class="widget-toggle toggle-chain"><div class="widget widget-chain-search"><svg class="svg-icon icon_wait" id="icon-wait" viewBox="0 0 24 24"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8s8 3.58 8 8s-3.58 8-8 8zm.5-13H11v6l5.25 3.15l.75-1.23l-4.5-2.67z"></path></svg><svg class="svg-icon icon_search" id="icon-search" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5A6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5S14 7.01 14 9.5S11.99 14 9.5 14z"></path></svg><svg class="svg-icon icon_error" id="icon-error" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></svg><div class="chain-search-wrapper"><input class="chain-search" disabled="" placeholder="Chaining unavailable"></div></div></div><div class="toggle-hide"><svg class="svg-icon" id="icon-close" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41z"></path></svg></div></div></div><div aria-hidden="true" aria-labelledby="clipbModalLabel-b69b12a89ad84eb4a1d29fbe1098dab8" class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" data-clipb="741c73f" data-copy="c96383e" data-downloads="e5dc73f" data-free-limit-enabled="True" data-free_limit_clipboard="5" data-free_limit_copy="7" data-free_limit_downloads="5" data-freeplan_text="You're using the free plan" data-hash="b69b12a89ad84eb4a1d29fbe1098dab8" data-limit_text="Free plan limit reached!" data-prefix="cfcp_" data-type="clipb" id="clipbModalb69b12a89ad84eb4a1d29fbe1098dab8" style="font-size: 16px; font-family: system-ui; user-select: text;" tabindex="-1"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="dialog-clipb-b69b12a89ad84eb4a1d29fbe1098dab8-title">You're using the free plan</h5><button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"></button></div><div class="modal-body"><p class="d-none" id="dialog-clipb-b69b12a89ad84eb4a1d29fbe1098dab8-text">The free plan lets you use image tools for <b>personal use only</b>. Upgrade to the premium plan to use image tools for commercial purposes. Additionally, these features will be unlocked when you upgrade:</p><p class="d-none" id="dialog-clipb-b69b12a89ad84eb4a1d29fbe1098dab8-text-limit">You've reached the daily free plan limit. The free plan lets you try our service a couple of times a day. Upgrade to the premium plan to remove all limits and unlock these additional features:</p><div class="row"><div class="col-md-6 pt-2"><div class="d-flex flex-row"><div class="p-1"><svg class="bi bi-currency-dollar mb-1 text-primary" fill="currentColor" height="24" viewBox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M4 10.781c.148 1.667 1.513 2.85 3.591 3.003V15h1.043v-1.216c2.27-.179 3.678-1.438 3.678-3.3 0-1.59-.947-2.51-2.956-3.028l-.722-.187V3.467c1.122.11 1.879.714 2.07 1.616h1.47c-.166-1.6-1.54-2.748-3.54-2.875V1H7.591v1.233c-1.939.23-3.27 1.472-3.27 3.156 0 1.454.966 2.483 2.661 2.917l.61.162v4.031c-1.149-.17-1.94-.8-2.131-1.718H4zm3.391-3.836c-1.043-.263-1.6-.825-1.6-1.616 0-.944.704-1.641 1.8-1.828v3.495l-.2-.05zm1.591 1.872c1.287.323 1.852.859 1.852 1.769 0 1.097-.826 1.828-2.2 1.939V8.73l.348.086z"></path></svg></div><div class="px-3"><div class="text-primary fw-bold">Commercial Use</div><small>Use our image tools for commercial use.</small></div></div></div><div class="col-md-6 pt-2"><div class="d-flex flex-row"><div class="p-1"><svg class="bi bi-clock mb-1 text-primary" fill="currentColor" height="24" viewBox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"></path><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"></path></svg></div><div class="px-3"><div class="text-primary fw-bold">No Wait Time</div><small>Skip the download wait timer and download the image instantly.</small></div></div></div></div><div class="row"><div class="col-md-6 pt-2"><div class="d-flex flex-row"><div class="p-1"><svg class="bi bi-calendar-check mb-1 text-primary" fill="currentColor" height="24" viewBox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"></path><path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"></path></svg></div><div class="px-3"><div class="text-primary fw-bold">Unlimited Usage</div><small>Use all image tools as many times per day as you want to.</small></div></div></div><div class="col-md-6 pt-2"><div class="d-flex flex-row"><div class="p-1"><svg class="bi bi-download mb-1 text-primary" fill="currentColor" height="24" viewBox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"></path><path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"></path></svg></div><div class="px-3"><div class="text-primary fw-bold">Instant Download</div><small>Skip this dialog and download the image with a single click.</small></div></div></div></div><div class="row"><div class="col-md-6 pt-2"><div class="d-flex flex-row"><div class="p-1"><svg class="bi bi-card-text mb-1 text-primary" fill="currentColor" height="24" viewBox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"></path><path d="M3 5.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 8a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 8zm0 2.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"></path></svg></div><div class="px-3"><div class="text-primary fw-bold">No Ads</div><small>You'll not see a single advertisement.</small></div></div></div><div class="col-md-6 pt-2"><div class="d-flex flex-row"><div class="p-1"><svg class="bi bi-clipboard-check mb-1 text-primary" fill="currentColor" height="24" viewBox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z" fill-rule="evenodd"></path><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"></path><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"></path></svg></div><div class="px-3"><div class="text-primary fw-bold">Instant Copy-to-clipboard</div><small>Copy the image to clipboard with a single click.</small></div></div></div></div></div><div class="modal-footer"><span class="text-muted d-none pe-2" id="dialog-clipb-b69b12a89ad84eb4a1d29fbe1098dab8-help">Free plan limit reached</span><button class="btn btn-primary bg-transparent text-primary widget-copy btn-sm fw-normal d-none" data-hides-toggle="" id="dialog-clipb-b69b12a89ad84eb4a1d29fbe1098dab8-btn" type="button">Copy to clipboard</button><a class="btn btn-primary btn-sm btn-upgrade fw-normal" data-modal="clipb" href="/pricing" id="upgrade-premium">Upgrade to Premium</a></div></div></div></div><div aria-hidden="true" aria-labelledby="downloadModalLabel-b69b12a89ad84eb4a1d29fbe1098dab8" class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" data-clipb="741c73f" data-copy="c96383e" data-downloads="e5dc73f" data-free-limit-enabled="True" data-free_limit_clipboard="5" data-free_limit_copy="7" data-free_limit_downloads="5" data-freeplan_text="You're using the free plan" data-hash="b69b12a89ad84eb4a1d29fbe1098dab8" data-limit_text="Free plan limit reached!" data-prefix="cfcp_" data-type="download" id="downloadModalb69b12a89ad84eb4a1d29fbe1098dab8" style="font-size: 16px; font-family: system-ui; user-select: text;" tabindex="-1"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="dialog-download-b69b12a89ad84eb4a1d29fbe1098dab8-title">You're using the free plan</h5><button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"></button></div><div class="modal-body"><p class="d-none" id="dialog-download-b69b12a89ad84eb4a1d29fbe1098dab8-text">The free plan lets you use image tools for <b>personal use only</b>. Upgrade to the premium plan to use image tools for commercial purposes. Additionally, these features will be unlocked when you upgrade:</p><p class="d-none" id="dialog-download-b69b12a89ad84eb4a1d29fbe1098dab8-text-limit">You've reached the daily free plan limit. The free plan lets you try our service a couple of times a day. Upgrade to the premium plan to remove all limits and unlock these additional features:</p><div class="row"><div class="col-md-6 pt-2"><div class="d-flex flex-row"><div class="p-1"><svg class="bi bi-currency-dollar mb-1 text-primary" fill="currentColor" height="24" viewBox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M4 10.781c.148 1.667 1.513 2.85 3.591 3.003V15h1.043v-1.216c2.27-.179 3.678-1.438 3.678-3.3 0-1.59-.947-2.51-2.956-3.028l-.722-.187V3.467c1.122.11 1.879.714 2.07 1.616h1.47c-.166-1.6-1.54-2.748-3.54-2.875V1H7.591v1.233c-1.939.23-3.27 1.472-3.27 3.156 0 1.454.966 2.483 2.661 2.917l.61.162v4.031c-1.149-.17-1.94-.8-2.131-1.718H4zm3.391-3.836c-1.043-.263-1.6-.825-1.6-1.616 0-.944.704-1.641 1.8-1.828v3.495l-.2-.05zm1.591 1.872c1.287.323 1.852.859 1.852 1.769 0 1.097-.826 1.828-2.2 1.939V8.73l.348.086z"></path></svg></div><div class="px-3"><div class="text-primary fw-bold">Commercial Use</div><small>Use our image tools for commercial use.</small></div></div></div><div class="col-md-6 pt-2"><div class="d-flex flex-row"><div class="p-1"><svg class="bi bi-clock mb-1 text-primary" fill="currentColor" height="24" viewBox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"></path><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"></path></svg></div><div class="px-3"><div class="text-primary fw-bold">No Wait Time</div><small>Skip the download wait timer and download the image instantly.</small></div></div></div></div><div class="row"><div class="col-md-6 pt-2"><div class="d-flex flex-row"><div class="p-1"><svg class="bi bi-calendar-check mb-1 text-primary" fill="currentColor" height="24" viewBox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"></path><path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"></path></svg></div><div class="px-3"><div class="text-primary fw-bold">Unlimited Usage</div><small>Use all image tools as many times per day as you want to.</small></div></div></div><div class="col-md-6 pt-2"><div class="d-flex flex-row"><div class="p-1"><svg class="bi bi-download mb-1 text-primary" fill="currentColor" height="24" viewBox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"></path><path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"></path></svg></div><div class="px-3"><div class="text-primary fw-bold">Instant Download</div><small>Skip this dialog and download the image with a single click.</small></div></div></div></div><div class="row"><div class="col-md-6 pt-2"><div class="d-flex flex-row"><div class="p-1"><svg class="bi bi-card-text mb-1 text-primary" fill="currentColor" height="24" viewBox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"></path><path d="M3 5.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 8a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 8zm0 2.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"></path></svg></div><div class="px-3"><div class="text-primary fw-bold">No Ads</div><small>You'll not see a single advertisement.</small></div></div></div><div class="col-md-6 pt-2"><div class="d-flex flex-row"><div class="p-1"><svg class="bi bi-clipboard-check mb-1 text-primary" fill="currentColor" height="24" viewBox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z" fill-rule="evenodd"></path><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"></path><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"></path></svg></div><div class="px-3"><div class="text-primary fw-bold">Instant Copy-to-clipboard</div><small>Copy the image to clipboard with a single click.</small></div></div></div></div></div><div class="modal-footer"><span class="text-muted d-none pe-2" id="dialog-download-b69b12a89ad84eb4a1d29fbe1098dab8-help">Free plan limit reached</span><button class="btn btn-primary bg-transparent text-primary widget-save-as btn-sm fw-normal d-none" data-hides-toggle="" id="dialog-download-b69b12a89ad84eb4a1d29fbe1098dab8-btn" type="button">Download</button><a class="btn btn-primary btn-sm btn-upgrade fw-normal" data-modal="download" href="/pricing" id="upgrade-premium">Upgrade to Premium</a></div></div></div></div><div aria-hidden="true" aria-labelledby="copyModalLabel-b69b12a89ad84eb4a1d29fbe1098dab8" class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" data-clipb="741c73f" data-copy="c96383e" data-downloads="e5dc73f" data-free-limit-enabled="True" data-free_limit_clipboard="5" data-free_limit_copy="7" data-free_limit_downloads="5" data-freeplan_text="You're using the free plan" data-hash="b69b12a89ad84eb4a1d29fbe1098dab8" data-limit_text="Free plan limit reached!" data-prefix="cfcp_" data-type="copy" id="copyModalb69b12a89ad84eb4a1d29fbe1098dab8" style="font-size: 16px; font-family: system-ui; user-select: text;" tabindex="-1"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="dialog-copy-b69b12a89ad84eb4a1d29fbe1098dab8-title">Text has been copied to clipboard</h5><button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"></button></div><div class="modal-body"><p id="dialog-copy-b69b12a89ad84eb4a1d29fbe1098dab8-text">Yay! The text has been copied to your clipboard. If you like our tools, you can upgrade to a premium subscription to get rid of this dialog as well as enable the following features:</p><p class="d-none" id="dialog-copy-b69b12a89ad84eb4a1d29fbe1098dab8-text-limit">You've reached the daily free plan limit. The free plan lets you try our service a couple of times a day. Upgrade to the premium plan to remove all limits and unlock these additional features:</p><div class="row"><div class="col-md-6 pt-2"><div class="d-flex flex-row"><div class="p-1"><svg class="bi bi-currency-dollar mb-1 text-primary" fill="currentColor" height="24" viewBox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M4 10.781c.148 1.667 1.513 2.85 3.591 3.003V15h1.043v-1.216c2.27-.179 3.678-1.438 3.678-3.3 0-1.59-.947-2.51-2.956-3.028l-.722-.187V3.467c1.122.11 1.879.714 2.07 1.616h1.47c-.166-1.6-1.54-2.748-3.54-2.875V1H7.591v1.233c-1.939.23-3.27 1.472-3.27 3.156 0 1.454.966 2.483 2.661 2.917l.61.162v4.031c-1.149-.17-1.94-.8-2.131-1.718H4zm3.391-3.836c-1.043-.263-1.6-.825-1.6-1.616 0-.944.704-1.641 1.8-1.828v3.495l-.2-.05zm1.591 1.872c1.287.323 1.852.859 1.852 1.769 0 1.097-.826 1.828-2.2 1.939V8.73l.348.086z"></path></svg></div><div class="px-3"><div class="text-primary fw-bold">Commercial Use</div><small>Use our image tools for commercial use.</small></div></div></div><div class="col-md-6 pt-2"><div class="d-flex flex-row"><div class="p-1"><svg class="bi bi-clock mb-1 text-primary" fill="currentColor" height="24" viewBox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"></path><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"></path></svg></div><div class="px-3"><div class="text-primary fw-bold">No Wait Time</div><small>Skip the download wait timer and download the image instantly.</small></div></div></div></div><div class="row"><div class="col-md-6 pt-2"><div class="d-flex flex-row"><div class="p-1"><svg class="bi bi-calendar-check mb-1 text-primary" fill="currentColor" height="24" viewBox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"></path><path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"></path></svg></div><div class="px-3"><div class="text-primary fw-bold">Unlimited Usage</div><small>Use all image tools as many times per day as you want to.</small></div></div></div><div class="col-md-6 pt-2"><div class="d-flex flex-row"><div class="p-1"><svg class="bi bi-download mb-1 text-primary" fill="currentColor" height="24" viewBox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"></path><path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"></path></svg></div><div class="px-3"><div class="text-primary fw-bold">Instant Download</div><small>Skip this dialog and download the image with a single click.</small></div></div></div></div><div class="row"><div class="col-md-6 pt-2"><div class="d-flex flex-row"><div class="p-1"><svg class="bi bi-card-text mb-1 text-primary" fill="currentColor" height="24" viewBox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"></path><path d="M3 5.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 8a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 8zm0 2.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"></path></svg></div><div class="px-3"><div class="text-primary fw-bold">No Ads</div><small>You'll not see a single advertisement.</small></div></div></div><div class="col-md-6 pt-2"><div class="d-flex flex-row"><div class="p-1"><svg class="bi bi-clipboard-check mb-1 text-primary" fill="currentColor" height="24" viewBox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z" fill-rule="evenodd"></path><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"></path><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"></path></svg></div><div class="px-3"><div class="text-primary fw-bold">Instant Copy-to-clipboard</div><small>Copy the image to clipboard with a single click.</small></div></div></div></div></div><div class="modal-footer"><span class="text-muted d-none pe-2" id="dialog-copy-b69b12a89ad84eb4a1d29fbe1098dab8-help">Free plan limit reached</span><button class="btn btn-outline-primary btn-sm" data-bs-dismiss="modal" id="dialog-copy-b69b12a89ad84eb4a1d29fbe1098dab8-btn" type="button">Close</button><a class="btn btn-primary btn-sm btn-upgrade fw-normal" data-modal="copy" href="/pricing" id="upgrade-premium">Upgrade to Premium</a></div></div></div></div></div></div></div></div><div class="pt-3 row"><div class="converter-options" data-autosave=""><fieldset class="rounded border" id="tool-options"><legend id="tool-options-mobile"><svg class="bi bi-magic" fill="currentColor" height="20" style="margin-top: -5px" viewBox="0 0 16 16" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707zM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1zM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707zM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0z"></path></svg><span class="ps-2 text__heading">Tool Options</span></legend><div class="pt-2"><div class="option-group"><h4 class="option-group-legend pb-2">Image Color and Shades</h4><div class="option-row" title="Option code: old-color"><div class="text-field"><input class="text-field__color input-option color active" data-action="input" data-clicked="0" data-format="none" data-id="option-picker-old-color-fe568cb9" data-index="old-color" data-option="color" data-type="options" id="option-old-color-fe568cb9" name="option-group-fe568cb9-0" placeholder=" " required="" type="text" value="white"><label class="text-field__color__placeholder" for="option-old-color-fe568cb9"><div class="text-field__color__placeholder__label">Color</div></label><span class="text-field__color__picker__background"></span><span class="text-field__color__picker icon_colorpicker colorpicker" data-action="colorp" data-clicked="0" data-type="options" id="option-picker-old-color-fe568cb9" style="background: white"></span></div><div class="text__supporting option-details"><span data-escape="no">Original color. (Color to replace.)</span></div></div><div class="option-row" title="Option code: new-color"><div class="text-field"><input class="text-field__color input-option color active" data-action="input" data-clicked="0" data-format="none" data-id="option-picker-new-color-fe568cb9" data-index="new-color" data-option="color" data-type="options" id="option-new-color-fe568cb9" name="option-group-fe568cb9-0" placeholder=" " required="" type="text" value="black"><label class="text-field__color__placeholder" for="option-new-color-fe568cb9"><div class="text-field__color__placeholder__label">Color</div></label><span class="text-field__color__picker__background"></span><span class="text-field__color__picker icon_colorpicker colorpicker" data-action="colorp" data-clicked="0" data-type="options" id="option-picker-new-color-fe568cb9" style="background: black"></span></div><div class="text__supporting option-details"><span data-escape="no">New color. (Replacement color.)</span></div></div><div class="option-row" title="Option code: threshold"><div class="text-field"><input class="text-field__input input-option" data-action="input" data-clicked="0" data-index="threshold" data-type="options" id="option-threshold-fe568cb9" name="option-group-fe568cb9-0" placeholder=" " required="" type="text" value="10%"><label class="text-field__input__placeholder" for="option-threshold-<built-in function hash>"><div class="text-field__input__placeholder__label">Threshold</div></label></div><div class="text__supporting"><span data-escape="no">Percentage of similar tones to
replace.</span></div></div><div class="option-row" title="Option code: change-color-tones"><div class="checkbox"><input class="checkbox__input input-option" data-action="checkbox" data-clicked="0" data-index="change-color-tones" data-type="options" id="option-change-color-tones-fe568cb9" name="option-group-fe568cb9-0" required="" type="checkbox"><label class="checkbox__label" for="option-change-color-tones-fe568cb9">Keep Dark and Light Shades</label><div class="text__supporting option-details"><span data-escape="no">When replacing a color region,
preserve dark and light tones for it.</span></div></div></div></div><div class="option-group"><h4 class="option-group-legend pb-2">Image Color Edges</h4><div class="option-row" title="Option code: smooth-edges"><div class="checkbox"><input class="checkbox__input input-option" data-action="checkbox" data-clicked="0" data-index="smooth-edges" data-type="options" id="option-smooth-edges-1ef295db" name="option-group-1ef295db-1" required="" type="checkbox"><label class="checkbox__label" for="option-smooth-edges-1ef295db">Smooth Pixels at the Edge</label><div class="text__supporting option-details"><span data-escape="no">Smooth pixels at the edge where
the area of new color touches the
regular areas of the image.</span></div></div></div><div class="option-row" title="Option code: radius"><div class="text-field"><input class="text-field__input input-option" data-action="input" data-clicked="0" data-index="radius" data-type="options" id="option-radius-1ef295db" name="option-group-1ef295db-1" placeholder=" " required="" type="text" value="1"><label class="text-field__input__placeholder" for="option-radius-<built-in function hash>"><div class="text-field__input__placeholder__label">Radius</div></label></div><div class="text__supporting"><span data-escape="no">Radius of edge smoothing.</span></div></div></div><div class="option-group"><h4 class="option-group-legend pb-2">Image Preview and Save</h4><div class="option-row" title="Option code: mask"><div class="checkbox"><input class="checkbox__input input-option" data-action="checkbox" data-clicked="0" data-index="mask" data-type="options" id="option-mask-72d8b923" name="option-group-72d8b923-2" required="" type="checkbox"><label class="checkbox__label" for="option-mask-72d8b923">Contrast Preview Mask</label><div class="text__supporting option-details"><span data-escape="no">View the color replacement
areas in the black and white
contrast mask.</span></div></div></div><div class="option-row" title="Option code: extension"><div class="select"><select class="select__select input-option" data-action="select" data-clicked="0" data-index="extension" data-type="options" id="option-extension-72d8b923" name="option-group-72d8b923-2" required=""><optgroup label="Image Format"><option label="PNG Image" selected="" value="png">PNG Image</option><option label="JPEG Image" value="jpg">JPEG Image</option><option label="WebP Image" value="webp">WebP Image</option></optgroup></select></div><div class="text__supporting option-details"><span data-escape="no">Select an image
format to save.</span></div></div></div></div></fieldset></div></div></div><svg class="chain-link" fill="none" height="67" viewBox="0 0 28 67" width="28" xmlns="http://www.w3.org/2000/svg"><rect fill="#676A7C" height="9.13427" rx="1" transform="rotate(90 18.6396 0.414185)" width="9.13427" x="18.6396" y="0.414185"></rect><rect fill="#676A7C" height="9.13427" rx="1" transform="rotate(90 18.6396 12.5932)" width="9.13427" x="18.6396" y="12.5932"></rect><rect fill="#676A7C" height="9.13427" rx="1" transform="rotate(90 18.6396 24.7722)" width="9.13427" x="18.6396" y="24.7722"></rect><path clip-rule="evenodd" d="M27.0811 53.8823C27.711 53.2523 27.2649 52.1752 26.374 52.1752L1.00207 52.1752C0.078708 52.1752 -0.351332 53.3197 0.34357 53.9277L13.8752 65.768C14.2715 66.1146 14.8686 66.0948 15.2409 65.7225L27.0811 53.8823ZM18.6396 37.9512C18.6396 37.3989 18.1919 36.9512 17.6396 36.9512L10.5053 36.9512C9.95301 36.9512 9.5053 37.3989 9.5053 37.9512L9.5053 52.175L18.6396 52.175L18.6396 37.9512Z" fill="#31344B" fill-rule="evenodd"></path></svg></div></div></div><div class="container" id="tour-about-tool"><div class="d-none d-md-block"><div class="row justify-content-center align-items-center"><div class="col-12"><h2>What Is an Image Color Replacer?</h2><img class="img-fluid float-end p-2 lazyload" data-src="/images/image/illustrations/replace-image-color.png" width="400px"><noscript><img src="/images/image/illustrations/replace-image-color.png"/></noscript><p>This tool swap two colors and their tones in an image. By uploading an image of any format into the input preview, you can simply click on the color you want to replace, and you will get that color replaced with a new one in the output image. Alternatively, you can specify the replacement color using its name in the options. The new color of the image is also indicated in the options using its name or can be selected from a color palette. In addition to the specified color, you can also change similar shades by increasing the percentage of similar colors to be replaced in the threshold option. By default, all corresponding shades will be changed to the new solid color. However, if you want to preserve the volume of the color area, you can activate the "Keep Dark and Light Shades" option, which remembers the darkness and lightness levels of each original pixel and applies them to the new color. To avoid remnants of the previous color at the edges of the replaced areas, you can use the edge smoothing option, increasing the smoothing radius to achieve the desired result. To ensure that all the desired areas of the image have received the new color, you can use the "Contrast Preview Mask" option, which displays areas of the new color as black and areas of the old color as white in the preview. This option does not affect the downloaded image, which can be saved in PNG, JPEG, or WebP formats. Image-abulous!</p></div></div></div><div class="d-md-none"><div class="row"><div class="col"><h2 id="tour-about-tool-mobile">What Is an Image Color Replacer?</h2><p>This tool swap two colors and their tones in an image. By uploading an image of any format into the input preview, you can simply click on the color you want to replace, and you will get that color replaced with a new one in the output image. Alternatively, you can specify the replacement color using its name in the options. The new color of the image is also indicated in the options using its name or can be selected from a color palette. In addition to the specified color, you can also change similar shades by increasing the percentage of similar colors to be replaced in the threshold option. By default, all corresponding shades will be changed to the new solid color. However, if you want to preserve the volume of the color area, you can activate the "Keep Dark and Light Shades" option, which remembers the darkness and lightness levels of each original pixel and applies them to the new color. To avoid remnants of the previous color at the edges of the replaced areas, you can use the edge smoothing option, increasing the smoothing radius to achieve the desired result. To ensure that all the desired areas of the image have received the new color, you can use the "Contrast Preview Mask" option, which displays areas of the new color as black and areas of the old color as white in the preview. This option does not affect the downloaded image, which can be saved in PNG, JPEG, or WebP formats. Image-abulous!</p></div></div></div></div><div class="bg-1"><hr class="divider-primary" id="examples"><div class="container my-5"><div class="row pb-4"><div class="col" id="tour-examples"><h2 class="text-primary fs-3 pe-2 d-inline">Image Color Replacer Examples</h2><div class="text-muted fs-3 d-md-inline-block" style="margin-top: -4px;">Click to try!<svg class="d-inline ms-2" data-bs-container="body" data-bs-content="You can click on an example to load it in the tool. Each example demonstrates various options and you can read the example's description to learn how it works." data-bs-placement="bottom" data-bs-toggle="popover" data-bs-trigger="hover" fill="#55586c" height="16" style="margin-top: -1px;" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"></path><path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286m1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94"></path></svg></div></div></div><div class="row examples cards examples-primary row-cols-1 row-cols-sm-1 row-cols-xs-2 row-cols-md-2 row-cols-lg-3"><div class="col mb-5" id="tool-examples" onclick="Site.statsExample()"><div class="card card-shadow bg-d1d9e6 text-dark cursor-pointer all-tools-container h-100 d-flex p-3 mb-5"><span class="badge bg-primary text-white position-absolute" style="right: 10px; top: -13px;">
                                click me
                            </span><h3 class="fs-4 pb-2">Recolor Image Background</h3><p>In this example, we change the pink background of the image to a blue color. To do this, we enter the background color using the hex code #FDB4C6, increase the percentage of similar colors to be replaced to 6%, and enter the new desired background color as "lightskyblue". (Source: Pexels.)</p><div><div class="wrapper ifrm"><div class="sample big"><div class="image-sample input-sample" data-src="/images/examples-onlineimagetools/heart-shape-on-pink-background.jpg"><div class="w-100 shadow-soft rounded text-center"><img class="img-fluid lazyload rounded" data-src="/images/examples-onlineimagetools/heart-shape-on-pink-background.jpg"></div><noscript><img alt='In this example, we change the pink background of the image to a blue color. To do this, we enter the background color using the hex code #FDB4C6, increase the percentage of similar colors to be replaced to 6%, and enter the new desired background color as "lightskyblue". (Source: Pexels.)' src="/images/examples-onlineimagetools/heart-shape-on-pink-background.jpg"/></noscript></div><div class="text-center py-2"><svg class="bi bi-arrow-down" fill="currentColor" height="32" viewBox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z" fill-rule="evenodd"></path></svg></div><div class="image-sample py-2 output-sample"><div class="shadow-soft rounded w-100 text-center"><img class="img-fluid lazyload rounded" data-src="/images/examples-onlineimagetools/heart-shape-on-blue-background.jpg"></div><noscript><img alt='In this example, we change the pink background of the image to a blue color. To do this, we enter the background color using the hex code #FDB4C6, increase the percentage of similar colors to be replaced to 6%, and enter the new desired background color as "lightskyblue". (Source: Pexels.)' src="/images/examples-onlineimagetools/heart-shape-on-blue-background.jpg"/></noscript></div></div></div><div class="option-group"><b>Required options</b><div class="example-required-options-text">These options will be used automatically if you select this example.</div><div><div class="option-group"><div></div><div class="option-row" title="Option code: old-color"><div class="text-field"><input class="text-field__color input-option color active" data-action="input" data-clicked="0" data-format="none" data-id="option-picker-old-color-c6c49b82" data-index="old-color" data-option="color" data-type="options" disabled="disabled" id="option-old-color-c6c49b82" name="option-group-c6c49b82-0" placeholder=" " required="" type="text" value="#FDB4C6"><label class="text-field__color__placeholder" for="option-old-color-c6c49b82"><div class="text-field__color__placeholder__label">Color</div></label><span class="text-field__color__picker__background"></span><span class="text-field__color__picker icon_colorpicker colorpicker" data-action="colorp" data-clicked="0" data-type="options" id="option-picker-old-color-c6c49b82" style="background: #FDB4C6"></span></div><div class="text__supporting option-details"><span data-escape="no">Original color. (Color to replace.)</span></div></div><div class="option-row" title="Option code: new-color"><div class="text-field"><input class="text-field__color input-option color active" data-action="input" data-clicked="0" data-format="none" data-id="option-picker-new-color-c6c49b82" data-index="new-color" data-option="color" data-type="options" disabled="disabled" id="option-new-color-c6c49b82" name="option-group-c6c49b82-0" placeholder=" " required="" type="text" value="lightskyblue"><label class="text-field__color__placeholder" for="option-new-color-c6c49b82"><div class="text-field__color__placeholder__label">Color</div></label><span class="text-field__color__picker__background"></span><span class="text-field__color__picker icon_colorpicker colorpicker" data-action="colorp" data-clicked="0" data-type="options" id="option-picker-new-color-c6c49b82" style="background: lightskyblue"></span></div><div class="text__supporting option-details"><span data-escape="no">New color. (Replacement color.)</span></div></div><div class="option-row" title="Option code: threshold"><div class="text-field"><input class="text-field__input input-option" data-index="threshold" disabled="disabled" id="option-threshold-c6c49b82" name="option-group-c6c49b82-0" placeholder=" " required="" type="text" value="6%"><label class="text-field__input__placeholder" for="option-threshold-<built-in function hash>"><div class="text-field__input__placeholder__label">Threshold</div></label></div><div class="text__supporting"><span data-escape="no">Percentage of similar tones to
replace.</span></div></div><div class="option-row" title="Option code: change-color-tones"><div class="checkbox"><input class="checkbox__input input-option" data-index="change-color-tones" disabled="disabled" id="option-change-color-tones-c6c49b82" name="option-group-c6c49b82-0" required="" type="checkbox"><label class="checkbox__label" for="option-change-color-tones-c6c49b82">Keep Dark and Light Shades</label><div class="text__supporting option-details"><span data-escape="no">When replacing a color region,
preserve dark and light tones for it.</span></div></div></div></div><div class="option-group"><div></div><div class="option-row" title="Option code: smooth-edges"><div class="checkbox"><input class="checkbox__input input-option" data-index="smooth-edges" disabled="disabled" id="option-smooth-edges-a64b36cf" name="option-group-a64b36cf-1" required="" type="checkbox"><label class="checkbox__label" for="option-smooth-edges-a64b36cf">Smooth Pixels at the Edge</label><div class="text__supporting option-details"><span data-escape="no">Smooth pixels at the edge where
the area of new color touches the
regular areas of the image.</span></div></div></div><div class="option-row" title="Option code: radius"><div class="text-field"><input class="text-field__input input-option" data-index="radius" disabled="disabled" id="option-radius-a64b36cf" name="option-group-a64b36cf-1" placeholder=" " required="" type="text" value="1"><label class="text-field__input__placeholder" for="option-radius-<built-in function hash>"><div class="text-field__input__placeholder__label">Radius</div></label></div><div class="text__supporting"><span data-escape="no">Radius of edge smoothing.</span></div></div></div><div class="option-group"><div></div><div class="option-row" title="Option code: mask"><div class="checkbox"><input class="checkbox__input input-option" data-index="mask" disabled="disabled" id="option-mask-3567fcd6" name="option-group-3567fcd6-2" required="" type="checkbox"><label class="checkbox__label" for="option-mask-3567fcd6">Contrast Preview Mask</label><div class="text__supporting option-details"><span data-escape="no">View the color replacement
areas in the black and white
contrast mask.</span></div></div></div><div></div></div></div></div></div></div></div><div class="col mb-5" onclick="Site.statsExample()"><div class="card card-shadow bg-d1d9e6 text-dark cursor-pointer all-tools-container h-100 d-flex p-3 mb-5"><span class="badge bg-primary text-white position-absolute" style="right: 10px; top: -13px;">
                                click me
                            </span><h3 class="fs-4 pb-2">Change a Road Sign Color</h3><p>In this example, we use the color replacement tool to repaint a directional road sign from yellow to green. We obtain the desired shade of yellow by clicking on the input preview and include 15% similar colors in the replacement. Additionally, we smooth the pixels along the edges of the road sign with a radius of 1 pixel to completely eliminate any remnants of the yellow shade. (Source: Pexels.)</p><div><div class="wrapper ifrm"><div class="sample big"><div class="image-sample input-sample" data-src="/images/examples-onlineimagetools/road-sign-yellow.jpg"><div class="w-100 shadow-soft rounded text-center"><img class="img-fluid lazyload rounded" data-src="/images/examples-onlineimagetools/road-sign-yellow.jpg"></div><noscript><img alt="In this example, we use the color replacement tool to repaint a directional road sign from yellow to green. We obtain the desired shade of yellow by clicking on the input preview and include 15% similar colors in the replacement. Additionally, we smooth the pixels along the edges of the road sign with a radius of 1 pixel to completely eliminate any remnants of the yellow shade. (Source: Pexels.)" src="/images/examples-onlineimagetools/road-sign-yellow.jpg"/></noscript></div><div class="text-center py-2"><svg class="bi bi-arrow-down" fill="currentColor" height="32" viewBox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z" fill-rule="evenodd"></path></svg></div><div class="image-sample py-2 output-sample"><div class="shadow-soft rounded w-100 text-center"><img class="img-fluid lazyload rounded" data-src="/images/examples-onlineimagetools/road-sign-green.jpg"></div><noscript><img alt="In this example, we use the color replacement tool to repaint a directional road sign from yellow to green. We obtain the desired shade of yellow by clicking on the input preview and include 15% similar colors in the replacement. Additionally, we smooth the pixels along the edges of the road sign with a radius of 1 pixel to completely eliminate any remnants of the yellow shade. (Source: Pexels.)" src="/images/examples-onlineimagetools/road-sign-green.jpg"/></noscript></div></div></div><div class="option-group"><b>Required options</b><div class="example-required-options-text">These options will be used automatically if you select this example.</div><div><div class="option-group"><div></div><div class="option-row" title="Option code: old-color"><div class="text-field"><input class="text-field__color input-option color active" data-action="input" data-clicked="0" data-format="none" data-id="option-picker-old-color-15dced58" data-index="old-color" data-option="color" data-type="options" disabled="disabled" id="option-old-color-15dced58" name="option-group-15dced58-0" placeholder=" " required="" type="text" value="rgb(254, 189, 0)"><label class="text-field__color__placeholder" for="option-old-color-15dced58"><div class="text-field__color__placeholder__label">Color</div></label><span class="text-field__color__picker__background"></span><span class="text-field__color__picker icon_colorpicker colorpicker" data-action="colorp" data-clicked="0" data-type="options" id="option-picker-old-color-15dced58" style="background: rgb(254, 189, 0)"></span></div><div class="text__supporting option-details"><span data-escape="no">Original color. (Color to replace.)</span></div></div><div class="option-row" title="Option code: new-color"><div class="text-field"><input class="text-field__color input-option color active" data-action="input" data-clicked="0" data-format="none" data-id="option-picker-new-color-15dced58" data-index="new-color" data-option="color" data-type="options" disabled="disabled" id="option-new-color-15dced58" name="option-group-15dced58-0" placeholder=" " required="" type="text" value="rgb(96, 178, 73)"><label class="text-field__color__placeholder" for="option-new-color-15dced58"><div class="text-field__color__placeholder__label">Color</div></label><span class="text-field__color__picker__background"></span><span class="text-field__color__picker icon_colorpicker colorpicker" data-action="colorp" data-clicked="0" data-type="options" id="option-picker-new-color-15dced58" style="background: rgb(96, 178, 73)"></span></div><div class="text__supporting option-details"><span data-escape="no">New color. (Replacement color.)</span></div></div><div class="option-row" title="Option code: threshold"><div class="text-field"><input class="text-field__input input-option" data-index="threshold" disabled="disabled" id="option-threshold-15dced58" name="option-group-15dced58-0" placeholder=" " required="" type="text" value="14%"><label class="text-field__input__placeholder" for="option-threshold-<built-in function hash>"><div class="text-field__input__placeholder__label">Threshold</div></label></div><div class="text__supporting"><span data-escape="no">Percentage of similar tones to
replace.</span></div></div><div class="option-row" title="Option code: change-color-tones"><div class="checkbox"><input class="checkbox__input input-option" data-index="change-color-tones" disabled="disabled" id="option-change-color-tones-15dced58" name="option-group-15dced58-0" required="" type="checkbox"><label class="checkbox__label" for="option-change-color-tones-15dced58">Keep Dark and Light Shades</label><div class="text__supporting option-details"><span data-escape="no">When replacing a color region,
preserve dark and light tones for it.</span></div></div></div></div><div class="option-group"><div></div><div class="option-row" title="Option code: smooth-edges"><div class="checkbox"><input checked="" class="checkbox__input input-option" data-index="smooth-edges" disabled="disabled" id="option-smooth-edges-a14cf7b5" name="option-group-a14cf7b5-1" required="" type="checkbox"><label class="checkbox__label" for="option-smooth-edges-a14cf7b5">Smooth Pixels at the Edge</label><div class="text__supporting option-details"><span data-escape="no">Smooth pixels at the edge where
the area of new color touches the
regular areas of the image.</span></div></div></div><div class="option-row" title="Option code: radius"><div class="text-field"><input class="text-field__input input-option" data-index="radius" disabled="disabled" id="option-radius-a14cf7b5" name="option-group-a14cf7b5-1" placeholder=" " required="" type="text" value="1"><label class="text-field__input__placeholder" for="option-radius-<built-in function hash>"><div class="text-field__input__placeholder__label">Radius</div></label></div><div class="text__supporting"><span data-escape="no">Radius of edge smoothing.</span></div></div></div><div class="option-group"><div></div><div class="option-row" title="Option code: mask"><div class="checkbox"><input class="checkbox__input input-option" data-index="mask" disabled="disabled" id="option-mask-004fb336" name="option-group-004fb336-2" required="" type="checkbox"><label class="checkbox__label" for="option-mask-004fb336">Contrast Preview Mask</label><div class="text__supporting option-details"><span data-escape="no">View the color replacement
areas in the black and white
contrast mask.</span></div></div></div><div></div></div></div></div></div></div></div><div class="col mb-5" onclick="Site.statsExample()"><div class="card card-shadow bg-d1d9e6 text-dark cursor-pointer all-tools-container h-100 d-flex p-3 mb-5"><span class="badge bg-primary text-white position-absolute" style="right: 10px; top: -13px;">
                                click me
                            </span><h3 class="fs-4 pb-2">Swap a Color of a Nemo Fish</h3><p>In this example, we change the coloring of a clownfish (also known as Nemo fish) by replacing the orange color with purple. To preserve the volume, shape, shadows, and highlights of the fish during the color replacement, we use the "Keep Dark and Light Shades" option. (Source: Pexels.)</p><div><div class="wrapper ifrm"><div class="sample big"><div class="image-sample input-sample" data-src="/images/examples-onlineimagetools/nemo-fish.jpg"><div class="w-100 shadow-soft rounded text-center"><img class="img-fluid lazyload rounded" data-src="/images/examples-onlineimagetools/nemo-fish.jpg"></div><noscript><img alt='In this example, we change the coloring of a clownfish (also known as Nemo fish) by replacing the orange color with purple. To preserve the volume, shape, shadows, and highlights of the fish during the color replacement, we use the "Keep Dark and Light Shades" option. (Source: Pexels.)' src="/images/examples-onlineimagetools/nemo-fish.jpg"/></noscript></div><div class="text-center py-2"><svg class="bi bi-arrow-down" fill="currentColor" height="32" viewBox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z" fill-rule="evenodd"></path></svg></div><div class="image-sample py-2 output-sample"><div class="shadow-soft rounded w-100 text-center"><img class="img-fluid lazyload rounded" data-src="/images/examples-onlineimagetools/nemo-fish-purple.jpg"></div><noscript><img alt='In this example, we change the coloring of a clownfish (also known as Nemo fish) by replacing the orange color with purple. To preserve the volume, shape, shadows, and highlights of the fish during the color replacement, we use the "Keep Dark and Light Shades" option. (Source: Pexels.)' src="/images/examples-onlineimagetools/nemo-fish-purple.jpg"/></noscript></div></div></div><div class="option-group"><b>Required options</b><div class="example-required-options-text">These options will be used automatically if you select this example.</div><div><div class="option-group"><div></div><div class="option-row" title="Option code: old-color"><div class="text-field"><input class="text-field__color input-option color active" data-action="input" data-clicked="0" data-format="none" data-id="option-picker-old-color-5f68987c" data-index="old-color" data-option="color" data-type="options" disabled="disabled" id="option-old-color-5f68987c" name="option-group-5f68987c-0" placeholder=" " required="" type="text" value="rgba(253, 109, 12, 255)"><label class="text-field__color__placeholder" for="option-old-color-5f68987c"><div class="text-field__color__placeholder__label">Color</div></label><span class="text-field__color__picker__background"></span><span class="text-field__color__picker icon_colorpicker colorpicker" data-action="colorp" data-clicked="0" data-type="options" id="option-picker-old-color-5f68987c" style="background: rgba(253, 109, 12, 255)"></span></div><div class="text__supporting option-details"><span data-escape="no">Original color. (Color to replace.)</span></div></div><div class="option-row" title="Option code: new-color"><div class="text-field"><input class="text-field__color input-option color active" data-action="input" data-clicked="0" data-format="none" data-id="option-picker-new-color-5f68987c" data-index="new-color" data-option="color" data-type="options" disabled="disabled" id="option-new-color-5f68987c" name="option-group-5f68987c-0" placeholder=" " required="" type="text" value="rgb(206, 96, 201)"><label class="text-field__color__placeholder" for="option-new-color-5f68987c"><div class="text-field__color__placeholder__label">Color</div></label><span class="text-field__color__picker__background"></span><span class="text-field__color__picker icon_colorpicker colorpicker" data-action="colorp" data-clicked="0" data-type="options" id="option-picker-new-color-5f68987c" style="background: rgb(206, 96, 201)"></span></div><div class="text__supporting option-details"><span data-escape="no">New color. (Replacement color.)</span></div></div><div class="option-row" title="Option code: threshold"><div class="text-field"><input class="text-field__input input-option" data-index="threshold" disabled="disabled" id="option-threshold-5f68987c" name="option-group-5f68987c-0" placeholder=" " required="" type="text" value="36%"><label class="text-field__input__placeholder" for="option-threshold-<built-in function hash>"><div class="text-field__input__placeholder__label">Threshold</div></label></div><div class="text__supporting"><span data-escape="no">Percentage of similar tones to
replace.</span></div></div><div class="option-row" title="Option code: change-color-tones"><div class="checkbox"><input checked="" class="checkbox__input input-option" data-index="change-color-tones" disabled="disabled" id="option-change-color-tones-5f68987c" name="option-group-5f68987c-0" required="" type="checkbox"><label class="checkbox__label" for="option-change-color-tones-5f68987c">Keep Dark and Light Shades</label><div class="text__supporting option-details"><span data-escape="no">When replacing a color region,
preserve dark and light tones for it.</span></div></div></div></div><div class="option-group"><div></div><div class="option-row" title="Option code: smooth-edges"><div class="checkbox"><input class="checkbox__input input-option" data-index="smooth-edges" disabled="disabled" id="option-smooth-edges-c480fa19" name="option-group-c480fa19-1" required="" type="checkbox"><label class="checkbox__label" for="option-smooth-edges-c480fa19">Smooth Pixels at the Edge</label><div class="text__supporting option-details"><span data-escape="no">Smooth pixels at the edge where
the area of new color touches the
regular areas of the image.</span></div></div></div><div class="option-row" title="Option code: radius"><div class="text-field"><input class="text-field__input input-option" data-index="radius" disabled="disabled" id="option-radius-c480fa19" name="option-group-c480fa19-1" placeholder=" " required="" type="text" value="1"><label class="text-field__input__placeholder" for="option-radius-<built-in function hash>"><div class="text-field__input__placeholder__label">Radius</div></label></div><div class="text__supporting"><span data-escape="no">Radius of edge smoothing.</span></div></div></div><div class="option-group"><div></div><div class="option-row" title="Option code: mask"><div class="checkbox"><input class="checkbox__input input-option" data-index="mask" disabled="disabled" id="option-mask-3f46b594" name="option-group-3f46b594-2" required="" type="checkbox"><label class="checkbox__label" for="option-mask-3f46b594">Contrast Preview Mask</label><div class="text__supporting option-details"><span data-escape="no">View the color replacement
areas in the black and white
contrast mask.</span></div></div></div><div></div></div></div></div></div></div></div></div></div></div><hr class="divider-primary" id="tools"><div class="bg-2 all-tools"><div class="container py-5"><div class="row"><div class="col"><div class="d-flex justify-content-center align-items-center justify-content-between"><div><h3 class="text-primary mb-0">All Image Tools</h3></div><div><div class="input-group dropdown"><span class="input-group-text" id="basic-addon">
                <svg class="bi bi-search" fill="currentColor" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"></path>
                </svg>
              </span><input aria-describedby="button-addon" class="form-control search dropdown-toggle" data-category="image" id="all-tools" placeholder="Search" type="text" data-bs-toggle="dropdown"><div class="dropdown-menu autocomplete w-100 overflow-auto"></div></div></div></div></div></div><div class="row pb-3"><div class="col text-center"><div class="d-none pt-3" id="tool-none-matches">Didn't find the tool you were looking for? <a data-bs-target="#tool-search-modal" data-bs-toggle="modal" href="#tools">Let us know</a> what tool we are missing and we'll build it!</div></div></div><div class="row tools row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-3" id="block-all-tools"><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/pixelate-image" data-title="Pixelate an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/pixelate-image.png"><noscript><img src="/images/image/icons/pixelate-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/pixelate-image" href="/image/pixelate-image">Pixelate an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly pixelate an area of an image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/blur-image" data-title="Blur an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/blur-image.png"><noscript><img src="/images/image/icons/blur-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/blur-image" href="/image/blur-image">Blur an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly blur an area of an image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/sharpen-image" data-title="Sharpen an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/sharpen-image.png"><noscript><img src="/images/image/icons/sharpen-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/sharpen-image" href="/image/sharpen-image">Sharpen an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly sharpen an area of an image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/adjust-image-brightness" data-title="Adjust Image Brightness" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/adjust-image-brightness.png"><noscript><img src="/images/image/icons/adjust-image-brightness.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/adjust-image-brightness" href="/image/adjust-image-brightness">Adjust Image Brightness</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly increase or decrease the brightness of an image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/adjust-image-contrast" data-title="Adjust Image Contrast" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/adjust-image-contrast.png"><noscript><img src="/images/image/icons/adjust-image-contrast.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/adjust-image-contrast" href="/image/adjust-image-contrast">Adjust Image Contrast</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly increase or decrease the contrast of an image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/adjust-image-lightness" data-title="Adjust Image Lightness" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/adjust-image-lightness.png"><noscript><img src="/images/image/icons/adjust-image-lightness.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/adjust-image-lightness" href="/image/adjust-image-lightness">Adjust Image Lightness</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly increase or decrease the lightness of an image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/adjust-image-hue" data-title="Adjust Image Hue" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/adjust-image-hue.png"><noscript><img src="/images/image/icons/adjust-image-hue.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/adjust-image-hue" href="/image/adjust-image-hue">Adjust Image Hue</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly increase or decrease the hue of an image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/adjust-image-saturation" data-title="Adjust Image Saturation" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/adjust-image-saturation.png"><noscript><img src="/images/image/icons/adjust-image-saturation.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/adjust-image-saturation" href="/image/adjust-image-saturation">Adjust Image Saturation</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly increase or decrease the saturation of an image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/add-sepia-filter-to-image" data-title="Add Sepia Filter to Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/add-sepia-filter-to-image.png"><noscript><img src="/images/image/icons/add-sepia-filter-to-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/add-sepia-filter-to-image" href="/image/add-sepia-filter-to-image">Add Sepia Filter to Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly add a sepia effect to an image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/add-rainbow-filter-to-image" data-title="Add Rainbow Filter to Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/add-rainbow-filter-to-image.png"><noscript><img src="/images/image/icons/add-rainbow-filter-to-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/add-rainbow-filter-to-image" href="/image/add-rainbow-filter-to-image">Add Rainbow Filter to Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly add a rainbow effect to an image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/add-image-effect" data-title="Add Image Effect" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/add-image-effect.png"><noscript><img src="/images/image/icons/add-image-effect.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/add-image-effect" href="/image/add-image-effect">Add Image Effect</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly apply a popular filter to an image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/rotate-image" data-title="Rotate an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/rotate-image.png"><noscript><img src="/images/image/icons/rotate-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/rotate-image" href="/image/rotate-image">Rotate an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly rotate any image by an arbitrary angle.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/resize-image" data-title="Resize an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/resize-image.png"><noscript><img src="/images/image/icons/resize-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/resize-image" href="/image/resize-image">Resize an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly resize any image to any size.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/upscale-image" data-title="Upscale an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/upscale-image.png"><noscript><img src="/images/image/icons/upscale-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/upscale-image" href="/image/upscale-image">Upscale an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly create a larger image from a smaller image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/downscale-image" data-title="Downscale an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/downscale-image.png"><noscript><img src="/images/image/icons/downscale-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/downscale-image" href="/image/downscale-image">Downscale an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly create a smaller image from a larger image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/upsize-image" data-title="Upsize an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/upsize-image.png"><noscript><img src="/images/image/icons/upsize-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/upsize-image" href="/image/upsize-image">Upsize an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly upsize an image's dimensions proportionally.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/downsize-image" data-title="Downsize an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/downsize-image.png"><noscript><img src="/images/image/icons/downsize-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/downsize-image" href="/image/downsize-image">Downsize an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly downsize an image's dimensions proportionally.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/crop-image" data-title="Crop an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/crop-image.png"><noscript><img src="/images/image/icons/crop-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/crop-image" href="/image/crop-image">Crop an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly crop an area of any image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/slice-image" data-title="Slice an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/slice-image.png"><noscript><img src="/images/image/icons/slice-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/slice-image" href="/image/slice-image">Slice an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly slice a part of an image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/cut-image" data-title="Cut an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/cut-image.png"><noscript><img src="/images/image/icons/cut-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/cut-image" href="/image/cut-image">Cut an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly cut out the desired fragment of an image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/grayscale-image" data-title="Convert an Image to Grayscale" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/grayscale-image.png"><noscript><img src="/images/image/icons/grayscale-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/grayscale-image" href="/image/grayscale-image">Grayscale an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert a color image to a grayscale image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/reverse-black-and-white-colors" data-title="Reverse Black and White Colors" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/reverse-black-and-white-colors.png"><noscript><img src="/images/image/icons/reverse-black-and-white-colors.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/reverse-black-and-white-colors" href="/image/reverse-black-and-white-colors">Reverse Black and White Colors</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly swap black and white colors in a grayscale image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/duplicate-image" data-title="Duplicate an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/duplicate-image.png"><noscript><img src="/images/image/icons/duplicate-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/duplicate-image" href="/image/duplicate-image">Duplicate an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly make multiple copies of an image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/flip-image-horizontally" data-title="Flip an Image Horizontally" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/flip-image-horizontally.png"><noscript><img src="/images/image/icons/flip-image-horizontally.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/flip-image-horizontally" href="/image/flip-image-horizontally">Flip an Image Horizontally</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly flip an image horizontally.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/flip-image-vertically" data-title="Flip an Image Vertically" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/flip-image-vertically.png"><noscript><img src="/images/image/icons/flip-image-vertically.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/flip-image-vertically" href="/image/flip-image-vertically">Flip an Image Vertically</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly flip an image vertically.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/change-image-orientation" data-title="Change Image Orientation" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/change-image-orientation.png"><noscript><img src="/images/image/icons/change-image-orientation.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/change-image-orientation" href="/image/change-image-orientation">Change Image Orientation</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly change the orientation of an image to horizontal or vertical.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/change-horizontal-image-to-vertical-image" data-title="Change Horizontal Image to Vertical Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/change-horizontal-image-to-vertical-image.png"><noscript><img src="/images/image/icons/change-horizontal-image-to-vertical-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/change-horizontal-image-to-vertical-image" href="/image/change-horizontal-image-to-vertical-image">Change Horizontal Image to Vertical Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly change image orientation from horizontal to vertical.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/change-vertical-image-to-horizontal-image" data-title="Change Vertical Image to Horizontal Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/change-vertical-image-to-horizontal-image.png"><noscript><img src="/images/image/icons/change-vertical-image-to-horizontal-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/change-vertical-image-to-horizontal-image" href="/image/change-vertical-image-to-horizontal-image">Change Vertical Image to Horizontal Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly change image orientation from vertical to horizontal.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/add-text-to-image" data-title="Add Text to an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/add-text-to-image.png"><noscript><img src="/images/image/icons/add-text-to-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/add-text-to-image" href="/image/add-text-to-image">Add Text to an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly add text to any image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/annotate-image" data-title="Annotate an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/annotate-image.png"><noscript><img src="/images/image/icons/annotate-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/annotate-image" href="/image/annotate-image">Annotate an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly add annotations (text, labels, arrows, boxes) to images.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/add-watermark-to-image" data-title="Add a Watermark to an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/add-watermark-to-image.png"><noscript><img src="/images/image/icons/add-watermark-to-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/add-watermark-to-image" href="/image/add-watermark-to-image">Add a Watermark to an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly add copyright protection to an image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/censor-image" data-title="Censor an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/censor-image.png"><noscript><img src="/images/image/icons/censor-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/censor-image" href="/image/censor-image">Censor an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly hide information in an image by blurring it or blacking it out.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/blur-face-in-image" data-title="Blur a Face in an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/blur-face-in-image.png"><noscript><img src="/images/image/icons/blur-face-in-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/blur-face-in-image" href="/image/blur-face-in-image">Blur a Face in an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly hide any face in an image behind a blur layer.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/pixelate-face-in-image" data-title="Pixelate a Face in an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/pixelate-face-in-image.png"><noscript><img src="/images/image/icons/pixelate-face-in-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/pixelate-face-in-image" href="/image/pixelate-face-in-image">Pixelate a Face in an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly hide any face in an image behind a pixel layer.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/hide-face-in-image" data-title="Hide a Face in an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/hide-face-in-image.png"><noscript><img src="/images/image/icons/hide-face-in-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/hide-face-in-image" href="/image/hide-face-in-image">Hide a Face in an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly hide any face in an image and safeguard personal data.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/blur-license-plate-in-image" data-title="Blur a License Plate in an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/blur-license-plate-in-image.png"><noscript><img src="/images/image/icons/blur-license-plate-in-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/blur-license-plate-in-image" href="/image/blur-license-plate-in-image">Blur a License Plate in an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly apply a blur mask to car license plates in the image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/pixelate-license-plate-in-image" data-title="Pixelate a License Plate in an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/pixelate-license-plate-in-image.png"><noscript><img src="/images/image/icons/pixelate-license-plate-in-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/pixelate-license-plate-in-image" href="/image/pixelate-license-plate-in-image">Pixelate a License Plate in an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly apply a pixel mask to car license plates in the image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/hide-license-plate-in-image" data-title="Hide a License Plate in an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/hide-license-plate-in-image.png"><noscript><img src="/images/image/icons/hide-license-plate-in-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/hide-license-plate-in-image" href="/image/hide-license-plate-in-image">Hide a License Plate in an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly hide any license plate in an image from unwanted views.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/add-noise-to-image" data-title="Add Noise to an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/add-noise-to-image.png"><noscript><img src="/images/image/icons/add-noise-to-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/add-noise-to-image" href="/image/add-noise-to-image">Add Noise to an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly add noise (pixel grain) effect to an image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/create-transparent-image" data-title="Make an Image Transparent" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/create-transparent-image.png"><noscript><img src="/images/image/icons/create-transparent-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/create-transparent-image" href="/image/create-transparent-image">Make an Image Transparent</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert any color in an image to transparent.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/make-image-semitransparent" data-title="Make an Image Semitransparent" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/make-image-semitransparent.png"><noscript><img src="/images/image/icons/make-image-semitransparent.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/make-image-semitransparent" href="/image/make-image-semitransparent">Make an Image Semitransparent</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly add translucency to the given image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/remove-image-background" data-title="Remove Image Background" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/remove-image-background.png"><noscript><img src="/images/image/icons/remove-image-background.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/remove-image-background" href="/image/remove-image-background">Remove Image Background</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly make the background of an image transparent.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/add-image-background" data-title="Add Image Background" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/add-image-background.png"><noscript><img src="/images/image/icons/add-image-background.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/add-image-background" href="/image/add-image-background">Add Image Background</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly add a background to a transparent image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/replace-image-color" data-title="Replace a Color in Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/replace-image-color.png"><noscript><img src="/images/image/icons/replace-image-color.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/replace-image-color" href="/image/replace-image-color">Replace a Color in Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly change one color to another in any image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/change-image-quality" data-title="Change Image Quality" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/change-image-quality.png"><noscript><img src="/images/image/icons/change-image-quality.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/change-image-quality" href="/image/change-image-quality">Change Image Quality</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly change the visual quality of any image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/png-to-jpg-converter" data-title="PNG to JPG Converter" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/png-to-jpg-converter.png"><noscript><img src="/images/image/icons/png-to-jpg-converter.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/png-to-jpg-converter" href="/image/png-to-jpg-converter">PNG to JPG Converter</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert a PNG image to a JPG image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/jpg-to-png-converter" data-title="JPG to PNG Converter" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/jpg-to-png-converter.png"><noscript><img src="/images/image/icons/jpg-to-png-converter.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/jpg-to-png-converter" href="/image/jpg-to-png-converter">JPG to PNG Converter</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert a JPG image to a PNG image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/png-to-gif-converter" data-title="PNG to GIF Converter" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/png-to-gif-converter.png"><noscript><img src="/images/image/icons/png-to-gif-converter.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/png-to-gif-converter" href="/image/png-to-gif-converter">PNG to GIF Converter</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert a PNG image to a GIF image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/gif-to-png-converter" data-title="GIF to PNG Converter" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/gif-to-png-converter.png"><noscript><img src="/images/image/icons/gif-to-png-converter.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/gif-to-png-converter" href="/image/gif-to-png-converter">GIF to PNG Converter</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert a GIF image to a PNG image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/png-to-bitmap-converter" data-title="PNG to Bitmap Converter" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/png-to-bitmap-converter.png"><noscript><img src="/images/image/icons/png-to-bitmap-converter.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/png-to-bitmap-converter" href="/image/png-to-bitmap-converter">PNG to Bitmap Converter</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert a PNG image to a BMP image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/bitmap-to-png-converter" data-title="Bitmap to PNG Converter" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/bitmap-to-png-converter.png"><noscript><img src="/images/image/icons/bitmap-to-png-converter.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/bitmap-to-png-converter" href="/image/bitmap-to-png-converter">Bitmap to PNG Converter</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert a BMP image to a PNG image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/webp-to-jpg-converter" data-title="WebP to JPG Converter" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/webp-to-jpg-converter.png"><noscript><img src="/images/image/icons/webp-to-jpg-converter.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/webp-to-jpg-converter" href="/image/webp-to-jpg-converter">WebP to JPG Converter</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert a WebP image to a JPG image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/jpg-to-webp-converter" data-title="JPG to WebP Converter" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/jpg-to-webp-converter.png"><noscript><img src="/images/image/icons/jpg-to-webp-converter.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/jpg-to-webp-converter" href="/image/jpg-to-webp-converter">JPG to WebP Converter</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert a JPG image to a WebP image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/webp-to-png-converter" data-title="WebP to PNG Converter" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/webp-to-png-converter.png"><noscript><img src="/images/image/icons/webp-to-png-converter.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/webp-to-png-converter" href="/image/webp-to-png-converter">WebP to PNG Converter</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert a WebP image to a PNG image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/png-to-webp-converter" data-title="PNG to WebP Converter" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/png-to-webp-converter.png"><noscript><img src="/images/image/icons/png-to-webp-converter.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/png-to-webp-converter" href="/image/png-to-webp-converter">PNG to WebP Converter</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert a PNG image to a WebP image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/webp-to-gif-converter" data-title="WebP to GIF Converter" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/webp-to-gif-converter.png"><noscript><img src="/images/image/icons/webp-to-gif-converter.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/webp-to-gif-converter" href="/image/webp-to-gif-converter">WebP to GIF Converter</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert a WebP image to a GIF image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/gif-to-webp-converter" data-title="GIF to WebP Converter" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/gif-to-webp-converter.png"><noscript><img src="/images/image/icons/gif-to-webp-converter.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/gif-to-webp-converter" href="/image/gif-to-webp-converter">GIF to WebP Converter</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert a GIF image to a WebP image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/webp-to-bmp-converter" data-title="WebP to Bitmap Converter" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/webp-to-bmp-converter.png"><noscript><img src="/images/image/icons/webp-to-bmp-converter.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/webp-to-bmp-converter" href="/image/webp-to-bmp-converter">WebP to Bitmap Converter</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert a WebP image to a BMP image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/bmp-to-webp-converter" data-title="Bitmap to WebP Converter" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/bmp-to-webp-converter.png"><noscript><img src="/images/image/icons/bmp-to-webp-converter.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/bmp-to-webp-converter" href="/image/bmp-to-webp-converter">Bitmap to WebP Converter</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert a BMP image to a WebP image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/base64-encode-png" data-title="Base64-encode PNG" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/base64-encode-png.png"><noscript><img src="/images/image/icons/base64-encode-png.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/base64-encode-png" href="/image/base64-encode-png">Base64-encode PNG</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly base64-encode a PNG image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/base64-decode-png" data-title="Base64-decode PNG" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/base64-decode-png.png"><noscript><img src="/images/image/icons/base64-decode-png.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/base64-decode-png" href="/image/base64-decode-png">Base64-decode PNG</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly decode a base64-encoded PNG image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/convert-bmp-to-gif" data-title="Convert BMP to GIF" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/convert-bmp-to-gif.png"><noscript><img src="/images/image/icons/convert-bmp-to-gif.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/convert-bmp-to-gif" href="/image/convert-bmp-to-gif">Convert BMP to GIF</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert a BMP image to a GIF image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/convert-gif-to-bmp" data-title="Convert GIF to BMP" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/convert-gif-to-bmp.png"><noscript><img src="/images/image/icons/convert-gif-to-bmp.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/convert-gif-to-bmp" href="/image/convert-gif-to-bmp">Convert GIF to BMP</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert a GIF image to a BMP image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/jpeg-to-bitmap-converter" data-title="JPEG to Bitmap Converter" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/jpeg-to-bitmap-converter.png"><noscript><img src="/images/image/icons/jpeg-to-bitmap-converter.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/jpeg-to-bitmap-converter" href="/image/jpeg-to-bitmap-converter">JPEG to Bitmap Converter</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert a JPEG image to a bitmap image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/bitmap-to-jpeg-converter" data-title="Bitmap to JPEG Converter" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/bitmap-to-jpeg-converter.png"><noscript><img src="/images/image/icons/bitmap-to-jpeg-converter.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/bitmap-to-jpeg-converter" href="/image/bitmap-to-jpeg-converter">Bitmap to JPEG Converter</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert a bitmap image to a JPEG image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/convert-bmp-to-base64" data-title="Convert BMP to Base64" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/convert-bmp-to-base64.png"><noscript><img src="/images/image/icons/convert-bmp-to-base64.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/convert-bmp-to-base64" href="/image/convert-bmp-to-base64">Convert BMP to Base64</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly base64-encode a BMP image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/convert-base64-to-bmp" data-title="Convert Base64 to BMP" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/convert-base64-to-bmp.png"><noscript><img src="/images/image/icons/convert-base64-to-bmp.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/convert-base64-to-bmp" href="/image/convert-base64-to-bmp">Convert Base64 to BMP</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly base64-decode a bitmap image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/convert-webp-to-base64" data-title="Convert WebP to Base64" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/convert-webp-to-base64.png"><noscript><img src="/images/image/icons/convert-webp-to-base64.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/convert-webp-to-base64" href="/image/convert-webp-to-base64">Convert WebP to Base64</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly base64-encode a WebP image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/convert-base64-to-webp" data-title="Convert Base64 to WebP" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/convert-base64-to-webp.png"><noscript><img src="/images/image/icons/convert-base64-to-webp.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/convert-base64-to-webp" href="/image/convert-base64-to-webp">Convert Base64 to WebP</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly base64-decode a bitmap image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/jpeg-to-gif-converter" data-title="JPEG to GIF Converter" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/jpeg-to-gif-converter.png"><noscript><img src="/images/image/icons/jpeg-to-gif-converter.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/jpeg-to-gif-converter" href="/image/jpeg-to-gif-converter">JPEG to GIF Converter</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert a JPEG image to a single-frame GIF image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/gif-to-jpeg-converter" data-title="GIF to JPEG Converter" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/gif-to-jpeg-converter.png"><noscript><img src="/images/image/icons/gif-to-jpeg-converter.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/gif-to-jpeg-converter" href="/image/gif-to-jpeg-converter">GIF to JPEG Converter</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert an animated GIF to a JPEG image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/convert-gif-to-base64" data-title="Convert GIF to Base64" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/convert-gif-to-base64.png"><noscript><img src="/images/image/icons/convert-gif-to-base64.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/convert-gif-to-base64" href="/image/convert-gif-to-base64">Convert GIF to Base64</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert a GIF to base64 encoding.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/convert-base64-to-gif" data-title="Convert Base64 to GIF" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/convert-base64-to-gif.png"><noscript><img src="/images/image/icons/convert-base64-to-gif.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/convert-base64-to-gif" href="/image/convert-base64-to-gif">Convert Base64 to GIF</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert a base64 encoding to a GIF.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/capture-gif-frames" data-title="Capture GIF Frames" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/capture-gif-frames.png"><noscript><img src="/images/image/icons/capture-gif-frames.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/capture-gif-frames" href="/image/capture-gif-frames">Capture GIF Frames</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly view and extract frames from GIF animations.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/gif-player" data-title="GIF Player" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/gif-player.png"><noscript><img src="/images/image/icons/gif-player.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/gif-player" href="/image/gif-player">GIF Player</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly play a GIF animation frame by frame.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/base64-encode-jpg" data-title="Base64-encode JPG" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/base64-encode-jpg.png"><noscript><img src="/images/image/icons/base64-encode-jpg.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/base64-encode-jpg" href="/image/base64-encode-jpg">Base64-encode JPG</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly base64-encode a JPEG image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/base64-decode-jpg" data-title="Base64-decode JPG" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/base64-decode-jpg.png"><noscript><img src="/images/image/icons/base64-decode-jpg.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/base64-decode-jpg" href="/image/base64-decode-jpg">Base64-decode JPG</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly decode a base64-encoded JPEG image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/recompress-jpg" data-title="Recompress JPG" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/recompress-jpg.png"><noscript><img src="/images/image/icons/recompress-jpg.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/recompress-jpg" href="/image/recompress-jpg">Recompress JPG</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly change the compression level of a JPG image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/compress-image" data-title="Compress an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/compress-image.png"><noscript><img src="/images/image/icons/compress-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/compress-image" href="/image/compress-image">Compress an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly make the file size of an image smaller.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/convert-image-to-base64" data-title="Convert Image to Base64" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/convert-image-to-base64.png"><noscript><img src="/images/image/icons/convert-image-to-base64.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/convert-image-to-base64" href="/image/convert-image-to-base64">Convert Image to Base64</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert an image to base64 encoding.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/convert-base64-to-image" data-title="Convert Base64 to Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/convert-base64-to-image.png"><noscript><img src="/images/image/icons/convert-base64-to-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/convert-base64-to-image" href="/image/convert-base64-to-image">Convert Base64 to Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert base64 encoding to an image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/convert-image-to-data-uri" data-title="Convert Image to Data URI" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/convert-image-to-data-uri.png"><noscript><img src="/images/image/icons/convert-image-to-data-uri.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/convert-image-to-data-uri" href="/image/convert-image-to-data-uri">Convert Image to Data URI</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert an image to a Data URL.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/convert-data-uri-to-image" data-title="Convert Data URI to Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/convert-data-uri-to-image.png"><noscript><img src="/images/image/icons/convert-data-uri-to-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/convert-data-uri-to-image" href="/image/convert-data-uri-to-image">Convert Data URI to Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert a Data URL to an image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/add-image-border" data-title="Add a Border to an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/add-image-border.png"><noscript><img src="/images/image/icons/add-image-border.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/add-image-border" href="/image/add-image-border">Add a Border to an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly add a border around an image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/remove-image-border" data-title="Remove a Border from an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/remove-image-border.png"><noscript><img src="/images/image/icons/remove-image-border.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/remove-image-border" href="/image/remove-image-border">Remove a Border from an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly remove the border that surrounds the image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/add-stroke-to-image" data-title="Add Stroke to an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/add-stroke-to-image.png"><noscript><img src="/images/image/icons/add-stroke-to-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/add-stroke-to-image" href="/image/add-stroke-to-image">Add Stroke to an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly create a colored outline around objects in the image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/pad-image" data-title="Pad an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/pad-image.png"><noscript><img src="/images/image/icons/pad-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/pad-image" href="/image/pad-image">Pad an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly pad an image from all sides.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/increase-space-around-image" data-title="Increase Space Around an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/increase-space-around-image.png"><noscript><img src="/images/image/icons/increase-space-around-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/increase-space-around-image" href="/image/increase-space-around-image">Increase Space Around an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly expand an image by adding space around it.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/round-image-corners" data-title="Round Image Corners" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/round-image-corners.png"><noscript><img src="/images/image/icons/round-image-corners.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/round-image-corners" href="/image/round-image-corners">Make Image Corners Round</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly make corners of any image rounded.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/generate-random-image" data-title="Generate a Random Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/generate-random-image.png"><noscript><img src="/images/image/icons/generate-random-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/generate-random-image" href="/image/generate-random-image">Generate a Random Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly generate a random image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/generate-image-from-text" data-title="Generate Image from Text" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/generate-image-from-text.png"><noscript><img src="/images/image/icons/generate-image-from-text.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/generate-image-from-text" href="/image/generate-image-from-text">Generate Image from Text</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly generate an image from text typed on your keyboard.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/explode-image-into-pieces" data-title="Explode an Image into Pieces" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/explode-image-into-pieces.png"><noscript><img src="/images/image/icons/explode-image-into-pieces.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/explode-image-into-pieces" href="/image/explode-image-into-pieces">Explode an Image into Pieces</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly explode an image into a bunch of tiny pieces.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/split-image" data-title="Split an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/split-image.png"><noscript><img src="/images/image/icons/split-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/split-image" href="/image/split-image">Split an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly split an image into smaller parts.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/cut-image-into-strips" data-title="Cut an Image into Strips" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/cut-image-into-strips.png"><noscript><img src="/images/image/icons/cut-image-into-strips.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/cut-image-into-strips" href="/image/cut-image-into-strips">Cut an Image into Strips</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly cut an image into horizontal or vertical strips.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/skew-image" data-title="Skew an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/skew-image.png"><noscript><img src="/images/image/icons/skew-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/skew-image" href="/image/skew-image">Skew an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly skew an image by the given angle.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/shift-image" data-title="Shift an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/shift-image.png"><noscript><img src="/images/image/icons/shift-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/shift-image" href="/image/shift-image">Shift an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly an image to the left or to the right.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/create-black-and-white-image" data-title="Create a Black and White Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/create-black-and-white-image.png"><noscript><img src="/images/image/icons/create-black-and-white-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/create-black-and-white-image" href="/image/create-black-and-white-image">Create a Black and White Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert all colors in an image to just black and white.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/create-two-color-image" data-title="Create a Two-color Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/create-two-color-image.png"><noscript><img src="/images/image/icons/create-two-color-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/create-two-color-image" href="/image/create-two-color-image">Create a Two-color Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert a multicolor image to a duotone image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/convert-image-to-binary-art" data-title="Convert Image to Binary Art" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/convert-image-to-binary-art.png"><noscript><img src="/images/image/icons/convert-image-to-binary-art.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/convert-image-to-binary-art" href="/image/convert-image-to-binary-art">Convert Image to Binary Art</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert an image to the binary art.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/apply-dithering-to-image" data-title="Apply Dithering to an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/apply-dithering-to-image.png"><noscript><img src="/images/image/icons/apply-dithering-to-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/apply-dithering-to-image" href="/image/apply-dithering-to-image">Apply Dithering to an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly run a dithering algorithm on an image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/reduce-number-of-image-colors" data-title="Reduce Number of Image Colors" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/reduce-number-of-image-colors.png"><noscript><img src="/images/image/icons/reduce-number-of-image-colors.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/reduce-number-of-image-colors" href="/image/reduce-number-of-image-colors">Reduce Number of Image Colors</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly decrease the number of colors in an image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/simplify-image-colors" data-title="Simplify Image Colors" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/simplify-image-colors.png"><noscript><img src="/images/image/icons/simplify-image-colors.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/simplify-image-colors" href="/image/simplify-image-colors">Simplify Image Colors</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly simplify the color scheme of the image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/generate-custom-image" data-title="Generate a Custom Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/generate-custom-image.png"><noscript><img src="/images/image/icons/generate-custom-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/generate-custom-image" href="/image/generate-custom-image">Generate a Custom Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly create a custom image of any color and width/height.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/generate-gradient-image" data-title="Generate a Gradient Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/generate-gradient-image.png"><noscript><img src="/images/image/icons/generate-gradient-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/generate-gradient-image" href="/image/generate-gradient-image">Generate a Gradient Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly create an image with a linear or radial gradient.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/generate-empty-image" data-title="Generate an Empty Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/generate-empty-image.png"><noscript><img src="/images/image/icons/generate-empty-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/generate-empty-image" href="/image/generate-empty-image">Generate an Empty Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly create a blank image of arbitrary size.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/create-image-with-one-color" data-title="Create an Image with One Color" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/create-image-with-one-color.png"><noscript><img src="/images/image/icons/create-image-with-one-color.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/create-image-with-one-color" href="/image/create-image-with-one-color">Create an Image with One Color</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly create a one-color image of the desired shade.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/invert-colors-in-image" data-title="Invert Colors in Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/invert-colors-in-image.png"><noscript><img src="/images/image/icons/invert-colors-in-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/invert-colors-in-image" href="/image/invert-colors-in-image">Invert Colors in Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly invert all pixels in an image to the opposite color.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/select-color-in-image" data-title="Select a Color in an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/select-color-in-image.png"><noscript><img src="/images/image/icons/select-color-in-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/select-color-in-image" href="/image/select-color-in-image">Select a Color in an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly use a color picker to select a color in an image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/find-top-image-colors" data-title="Find Top Colors in an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/find-top-image-colors.png"><noscript><img src="/images/image/icons/find-top-image-colors.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/find-top-image-colors" href="/image/find-top-image-colors">Find Top Colors in an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly find dominant colors in an image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/find-image-color-palette" data-title="Find Image Color Palette" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/find-image-color-palette.png"><noscript><img src="/images/image/icons/find-image-color-palette.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/find-image-color-palette" href="/image/find-image-color-palette">Find Image Color Palette</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly find the tones that form the color palette of the image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/analyze-image" data-title="Analyze an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/analyze-image.png"><noscript><img src="/images/image/icons/analyze-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/analyze-image" href="/image/analyze-image">Analyze an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly generate image size, format, pixel, and color palette information.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/check-if-image-is-png" data-title="Check If an Image Is a PNG" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/check-if-image-is-png.png"><noscript><img src="/images/image/icons/check-if-image-is-png.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/check-if-image-is-png" href="/image/check-if-image-is-png">Check If an Image Is a PNG</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly confirm or refute the PNG image format.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/check-if-image-is-jpg" data-title="Check If an Image Is a JPG" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/check-if-image-is-jpg.png"><noscript><img src="/images/image/icons/check-if-image-is-jpg.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/check-if-image-is-jpg" href="/image/check-if-image-is-jpg">Check If an Image Is a JPG</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly confirm or refute the JPG image format.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/check-if-image-is-webp" data-title="Check If an Image Is a WebP" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/check-if-image-is-webp.png"><noscript><img src="/images/image/icons/check-if-image-is-webp.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/check-if-image-is-webp" href="/image/check-if-image-is-webp">Check If an Image Is a WebP</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly confirm or refute the WebP image format.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/check-if-image-is-gif" data-title="Check If an Image Is a GIF" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/check-if-image-is-gif.png"><noscript><img src="/images/image/icons/check-if-image-is-gif.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/check-if-image-is-gif" href="/image/check-if-image-is-gif">Check If an Image Is a GIF</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly confirm or refute the GIF image format.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/check-if-image-is-bmp" data-title="Check If an Image Is a BMP" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/check-if-image-is-bmp.png"><noscript><img src="/images/image/icons/check-if-image-is-bmp.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/check-if-image-is-bmp" href="/image/check-if-image-is-bmp">Check If an Image Is a BMP</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly confirm or refute the BMP image format.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/find-image-file-size" data-title="Find Image File Size" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/find-image-file-size.png"><noscript><img src="/images/image/icons/find-image-file-size.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/find-image-file-size" href="/image/find-image-file-size">Find Image File Size</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly determine the image file size in bytes and kilobytes.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/find-image-dimensions" data-title="Find Image Dimensions" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/find-image-dimensions.png"><noscript><img src="/images/image/icons/find-image-dimensions.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/find-image-dimensions" href="/image/find-image-dimensions">Find Image Dimensions</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly find the width, height, orientation, and aspect ratio of an image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/image-viewer" data-title="Image Viewer" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/image-viewer.png"><noscript><img src="/images/image/icons/image-viewer.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/image-viewer" href="/image/image-viewer">Image Viewer</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly open and view images in your browser.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/convert-image-to-web-safe-colors" data-title="Convert Image to Web-safe Colors" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/convert-image-to-web-safe-colors.png"><noscript><img src="/images/image/icons/convert-image-to-web-safe-colors.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/convert-image-to-web-safe-colors" href="/image/convert-image-to-web-safe-colors">Convert Image to Web-safe Colors</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly redraw an image using only web-safe colors.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/separate-image-color-channels" data-title="Separate Image Color Channels" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/separate-image-color-channels.png"><noscript><img src="/images/image/icons/separate-image-color-channels.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/separate-image-color-channels" href="/image/separate-image-color-channels">Separate Image Color Channels</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly separate RGBA, CMYK, and HSL channels from an image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/show-rgb-image-colors" data-title="Show RGB Colors of Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/show-rgb-image-colors.png"><noscript><img src="/images/image/icons/show-rgb-image-colors.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/show-rgb-image-colors" href="/image/show-rgb-image-colors">Show RGB Colors of Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly show the red, green, blue, and alpha channel of the RGBA color scheme.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/show-hsl-image-colors" data-title="Show HSL Colors of Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/show-hsl-image-colors.png"><noscript><img src="/images/image/icons/show-hsl-image-colors.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/show-hsl-image-colors" href="/image/show-hsl-image-colors">Show HSL Colors of Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly show the hue, saturation, and light channels of the HSL color scheme.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/show-hsv-image-colors" data-title="Show HSV Colors of Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/show-hsv-image-colors.png"><noscript><img src="/images/image/icons/show-hsv-image-colors.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/show-hsv-image-colors" href="/image/show-hsv-image-colors">Show HSV Colors of Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly show the hue, saturation, and value channels of the HSV color scheme.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/show-hsi-image-colors" data-title="Show HSI Colors of Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/show-hsi-image-colors.png"><noscript><img src="/images/image/icons/show-hsi-image-colors.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/show-hsi-image-colors" href="/image/show-hsi-image-colors">Show HSI Colors of Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly show the hue, saturation, and intensity channels of the HSI color scheme.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/show-cmyk-image-colors" data-title="Show CMYK Colors of Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/show-cmyk-image-colors.png"><noscript><img src="/images/image/icons/show-cmyk-image-colors.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/show-cmyk-image-colors" href="/image/show-cmyk-image-colors">Show CMYK Colors of Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly show the cyan, magenta, yellow, and key channels of the CMYK color scheme.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/show-lab-image-colors" data-title="Show LAB Colors of Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/show-lab-image-colors.png"><noscript><img src="/images/image/icons/show-lab-image-colors.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/show-lab-image-colors" href="/image/show-lab-image-colors">Show LAB Colors of Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly show the lightness, A, and B channels of the LAB color scheme.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/show-yiq-image-colors" data-title="Show YIQ Colors of Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/show-yiq-image-colors.png"><noscript><img src="/images/image/icons/show-yiq-image-colors.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/show-yiq-image-colors" href="/image/show-yiq-image-colors">Show YIQ Colors of Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly show the luma (Y) and chrominance (I and Q) channels of the YIQ color scheme.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/show-hcl-image-colors" data-title="Show HCL Colors of Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/show-hcl-image-colors.png"><noscript><img src="/images/image/icons/show-hcl-image-colors.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/show-hcl-image-colors" href="/image/show-hcl-image-colors">Show HCL Colors of Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly show the hue, chroma, and luminance channels of the HCL color scheme.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/show-lch-image-colors" data-title="Show LCH Colors of Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/show-lch-image-colors.png"><noscript><img src="/images/image/icons/show-lch-image-colors.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/show-lch-image-colors" href="/image/show-lch-image-colors">Show LCH Colors of Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly show the luminance, chroma, and hue channels of the LCH color scheme.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/show-ycbcr-image-colors" data-title="Show YCbCr (YPbPr) Colors of Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/show-ycbcr-image-colors.png"><noscript><img src="/images/image/icons/show-ycbcr-image-colors.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/show-ycbcr-image-colors" href="/image/show-ycbcr-image-colors">Show YCbCr (YPbPr) Colors of Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly show the Y (luma), Cb (blue-difference), and Cr (red-difference) channels of the YCbCr color scheme.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/change-image-base-color" data-title="Change Image Base Color" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/change-image-base-color.png"><noscript><img src="/images/image/icons/change-image-base-color.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/change-image-base-color" href="/image/change-image-base-color">Change Image Base Color</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly change the base color scheme in the image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/refine-image-edges" data-title="Refine Edges of an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/refine-image-edges.png"><noscript><img src="/images/image/icons/refine-image-edges.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/refine-image-edges" href="/image/refine-image-edges">Refine Edges of an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly refine the image object's edges by removing noisy pixels.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/extract-object-by-color-from-image" data-title="Extract Object by Color from Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/extract-object-by-color-from-image.png"><noscript><img src="/images/image/icons/extract-object-by-color-from-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/extract-object-by-color-from-image" href="/image/extract-object-by-color-from-image">Extract Object by Color from Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly select any object in the image and extract it by its color.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/remove-specific-color-from-image" data-title="Remove Specific Color from Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/remove-specific-color-from-image.png"><noscript><img src="/images/image/icons/remove-specific-color-from-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/remove-specific-color-from-image" href="/image/remove-specific-color-from-image">Remove Specific Color from Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly remove a specific color region from any image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/remove-green-screen-from-image" data-title="Remove Green Screen from Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/remove-green-screen-from-image.png"><noscript><img src="/images/image/icons/remove-green-screen-from-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/remove-green-screen-from-image" href="/image/remove-green-screen-from-image">Remove Green Screen from Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly remove a green screen from any image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/remove-chroma-key-from-image" data-title="Remove Chroma Key from Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/remove-chroma-key-from-image.png"><noscript><img src="/images/image/icons/remove-chroma-key-from-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/remove-chroma-key-from-image" href="/image/remove-chroma-key-from-image">Remove Chroma Key from Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly remove a chroma key from any image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/check-image-transparency" data-title="Check Image Transparency" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/check-image-transparency.png"><noscript><img src="/images/image/icons/check-image-transparency.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/check-image-transparency" href="/image/check-image-transparency">Check Image Transparency</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly check if an image has transparent pixels.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/view-transparent-image-regions" data-title="View Transparent Image Regions" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/view-transparent-image-regions.png"><noscript><img src="/images/image/icons/view-transparent-image-regions.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/view-transparent-image-regions" href="/image/view-transparent-image-regions">View Transparent Image Regions</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly view transparent, semi-transparent, and opaque areas in an image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/create-silhouette-from-image" data-title="Create Silhouette from Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/create-silhouette-from-image.png"><noscript><img src="/images/image/icons/create-silhouette-from-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/create-silhouette-from-image" href="/image/create-silhouette-from-image">Create Silhouette from Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly generate a black silhouette of objects in an image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/create-stencil-from-image" data-title="Create Stencil from Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/create-stencil-from-image.png"><noscript><img src="/images/image/icons/create-stencil-from-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/create-stencil-from-image" href="/image/create-stencil-from-image">Create Stencil from Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly create a stencil from opaque objects in an image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/twist-image-pixels" data-title="Twist Image Pixels" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/twist-image-pixels.png"><noscript><img src="/images/image/icons/twist-image-pixels.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/twist-image-pixels" href="/image/twist-image-pixels">Twist Image Pixels</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly rotate pixels around a central point in an image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/convert-image-to-polaroid" data-title="Convert Image to Polaroid" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/convert-image-to-polaroid.png"><noscript><img src="/images/image/icons/convert-image-to-polaroid.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/convert-image-to-polaroid" href="/image/convert-image-to-polaroid">Convert Image to Polaroid</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert an image to a polaroid snapshot.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/add-symmetry-to-image" data-title="Add Symmetry to an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/add-symmetry-to-image.png"><noscript><img src="/images/image/icons/add-symmetry-to-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/add-symmetry-to-image" href="/image/add-symmetry-to-image">Add Symmetry to an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly add a symmetrical part to your image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/optimize-image" data-title="Optimize an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/optimize-image.png"><noscript><img src="/images/image/icons/optimize-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/optimize-image" href="/image/optimize-image">Optimize an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly optimize the quality of an image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/add-compression-effect-to-image" data-title="Add Compression Effect to an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/add-compression-effect-to-image.png"><noscript><img src="/images/image/icons/add-compression-effect-to-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/add-compression-effect-to-image" href="/image/add-compression-effect-to-image">Add Compression Effect to an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly add a block or glitch compression effect to the image.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/convert-image-to-rgb-values" data-title="Convert an Image to RGB Values" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/convert-image-to-rgb-values.png"><noscript><img src="/images/image/icons/convert-image-to-rgb-values.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/convert-image-to-rgb-values" href="/image/convert-image-to-rgb-values">Convert an Image to RGB Values</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert an image to R, G, B values.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/convert-rgb-values-to-image" data-title="Convert RGB Values to an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/convert-rgb-values-to-image.png"><noscript><img src="/images/image/icons/convert-rgb-values-to-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/convert-rgb-values-to-image" href="/image/convert-rgb-values-to-image">Convert RGB Values to an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly create an image from an R, G, B array.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/convert-image-to-hex-codes" data-title="Convert an Image to Hex Codes" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/convert-image-to-hex-codes.png"><noscript><img src="/images/image/icons/convert-image-to-hex-codes.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/convert-image-to-hex-codes" href="/image/convert-image-to-hex-codes">Convert an Image to Hex Codes</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert an image to hex codes.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/convert-hex-codes-to-image" data-title="Convert Hex Codes to an Image" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/convert-hex-codes-to-image.png"><noscript><img src="/images/image/icons/convert-hex-codes-to-image.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/convert-hex-codes-to-image" href="/image/convert-hex-codes-to-image">Convert Hex Codes to an Image</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly create an image from a list of hex codes.</div></div></div></div></div><div class="col mb-4"><div class="card cursor-pointer card-tool h-100" data-slug="/image/convert-text-to-pixel-art" data-title="Convert Text to Pixel Art" data-type="tools" onclick="Site.searchToolStats(this); return false;"><div class="card-body d-flex flex-row"><div class="pt-2 pe-2"><img class="rounded card-preview lazyload" data-src="/images/image/icons/convert-text-to-pixel-art.png"><noscript><img src="/images/image/icons/convert-text-to-pixel-art.png"/></noscript></div><div class="pt-1"><div class="card-header font-weight-bold pb-1"><a class="text-decoration-none" data-slug="/image/convert-text-to-pixel-art" href="/image/convert-text-to-pixel-art">Convert Text to Pixel Art</a> <span class="arrow">
        <svg class="svg-icon">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
        </span></div><div class="card-text">Quickly convert a set of symbols into an image using color assignment rules.</div></div></div></div></div></div></div></div><div class="modal fade" data-type="all-tools" id="tool-search-modal" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="allToolsModalLabel">Empty search results</h5><button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"></button></div><div class="modal-body"><p>You were searching for <mark><span id="all-tools-text"></span></mark> but nothing was found... Tell us more, and we'll build a tool you were looking for!</p><form class="section tool-search subscription needs-validation" id="onlinetools-tool-search-box" novalidate=""><div class="row"><div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mb-3"><label class="form-label" for="tool-search-input-email">Your email:</label><input class="form-control" id="tool-search-input-email" placeholder="" required="" type="email" value=""><div class="invalid-feedback">Please provide a email.</div></div></div><div class="row"><div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mb-3"><label class="form-label" for="tool-search-input-message">Tell us more:</label><textarea class="form-control" id="tool-search-input-message" required="" rows="5"></textarea><div class="invalid-feedback">Please provide a message.</div></div></div><input class="form-control" id="tool-search-input-notify" placeholder="" type="hidden"><div class="row"><div class="col text-center"><button class="btn btn-primary text-white" id="tool-search-submit" type="submit">Submit</button></div></div></form></div></div></div></div><hr class="divider-primary" id="coming-soon"><div class="bg-2"><div class="container py-5"><div class="row pb-3"><div class="col"><div class="d-flex justify-content-between"><div><div class="d-flex"><h3 class="text-primary fs-3 pe-2">Coming Soon</h3><div class="text-muted fs-3" style="margin-top: -2px;">These image tools are on the way!</div></div></div></div></div></div><div class="row row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-3"><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Image Editor" onclick="Site.logToolsComingSoon('Image Editor');document.getElementById('coming-soon-input-notify').value = 'Image Editor';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Image Editor <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Edit images in your browser.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Create a Fibonacci Spiral" onclick="Site.logToolsComingSoon('Create a Fibonacci Spiral');document.getElementById('coming-soon-input-notify').value = 'Create a Fibonacci Spiral';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Create a Fibonacci Spiral <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Place images on a grid so that they make a Fibonacci spiral.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Convert PNG to ICO" onclick="Site.logToolsComingSoon('Convert PNG to ICO');document.getElementById('coming-soon-input-notify').value = 'Convert PNG to ICO';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Convert PNG to ICO <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Convert a PNG image to an ICO icon.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Convert ICO to PNG" onclick="Site.logToolsComingSoon('Convert ICO to PNG');document.getElementById('coming-soon-input-notify').value = 'Convert ICO to PNG';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Convert ICO to PNG <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Convert an ICO icon to a PNG image.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Convert PNG to TIFF" onclick="Site.logToolsComingSoon('Convert PNG to TIFF');document.getElementById('coming-soon-input-notify').value = 'Convert PNG to TIFF';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Convert PNG to TIFF <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Convert a PNG image to a TIFF image.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Convert TIFF to PNG" onclick="Site.logToolsComingSoon('Convert TIFF to PNG');document.getElementById('coming-soon-input-notify').value = 'Convert TIFF to PNG';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Convert TIFF to PNG <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Convert a TIFF image to a PNG image.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Convert JPG to ICO" onclick="Site.logToolsComingSoon('Convert JPG to ICO');document.getElementById('coming-soon-input-notify').value = 'Convert JPG to ICO';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Convert JPG to ICO <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Convert a JPEG image to an ICO icon.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Convert ICO to JPG" onclick="Site.logToolsComingSoon('Convert ICO to JPG');document.getElementById('coming-soon-input-notify').value = 'Convert ICO to JPG';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Convert ICO to JPG <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Convert an ICO icon to a JPEG image.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Convert JPG to TIFF" onclick="Site.logToolsComingSoon('Convert JPG to TIFF');document.getElementById('coming-soon-input-notify').value = 'Convert JPG to TIFF';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Convert JPG to TIFF <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Convert a JPEG image to a TIFF image.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Convert TIFF to JPG" onclick="Site.logToolsComingSoon('Convert TIFF to JPG');document.getElementById('coming-soon-input-notify').value = 'Convert TIFF to JPG';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Convert TIFF to JPG <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Convert a TIFF image to a JPEG image.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Convert GIF to ICO" onclick="Site.logToolsComingSoon('Convert GIF to ICO');document.getElementById('coming-soon-input-notify').value = 'Convert GIF to ICO';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Convert GIF to ICO <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Convert a GIF image to an ICO icon.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Convert ICO to GIF" onclick="Site.logToolsComingSoon('Convert ICO to GIF');document.getElementById('coming-soon-input-notify').value = 'Convert ICO to GIF';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Convert ICO to GIF <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Convert an ICO icon to a GIF image.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Convert GIF to TIFF" onclick="Site.logToolsComingSoon('Convert GIF to TIFF');document.getElementById('coming-soon-input-notify').value = 'Convert GIF to TIFF';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Convert GIF to TIFF <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Convert a GIF image to a TIFF image.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Convert TIFF to GIF" onclick="Site.logToolsComingSoon('Convert TIFF to GIF');document.getElementById('coming-soon-input-notify').value = 'Convert TIFF to GIF';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Convert TIFF to GIF <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Convert a TIFF image to a GIF image.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Convert GIF to Animated PNG" onclick="Site.logToolsComingSoon('Convert GIF to Animated PNG');document.getElementById('coming-soon-input-notify').value = 'Convert GIF to Animated PNG';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Convert GIF to Animated PNG <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Convert a GIF image to an APNG icon.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Convert Animated PNG to GIF" onclick="Site.logToolsComingSoon('Convert Animated PNG to GIF');document.getElementById('coming-soon-input-notify').value = 'Convert Animated PNG to GIF';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Convert Animated PNG to GIF <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Convert an APNG image to a PNG image.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Convert BMP to ICO" onclick="Site.logToolsComingSoon('Convert BMP to ICO');document.getElementById('coming-soon-input-notify').value = 'Convert BMP to ICO';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Convert BMP to ICO <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Convert a bitmap image to an ICO icon.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Convert ICO to BMP" onclick="Site.logToolsComingSoon('Convert ICO to BMP');document.getElementById('coming-soon-input-notify').value = 'Convert ICO to BMP';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Convert ICO to BMP <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Convert an ICO icon to a bitmap image.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Convert BMP to TIFF" onclick="Site.logToolsComingSoon('Convert BMP to TIFF');document.getElementById('coming-soon-input-notify').value = 'Convert BMP to TIFF';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Convert BMP to TIFF <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Convert a bitmap image to a TIFF image.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Convert TIFF to BMP" onclick="Site.logToolsComingSoon('Convert TIFF to BMP');document.getElementById('coming-soon-input-notify').value = 'Convert TIFF to BMP';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Convert TIFF to BMP <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Convert a TIFF image to a bitmap image.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Convert Webp to ICO" onclick="Site.logToolsComingSoon('Convert Webp to ICO');document.getElementById('coming-soon-input-notify').value = 'Convert Webp to ICO';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Convert Webp to ICO <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Convert a Webp image to an ICO icon.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Convert ICO to Webp" onclick="Site.logToolsComingSoon('Convert ICO to Webp');document.getElementById('coming-soon-input-notify').value = 'Convert ICO to Webp';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Convert ICO to Webp <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Convert an ICO icon to a Webp image.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Convert Webp to TIFF" onclick="Site.logToolsComingSoon('Convert Webp to TIFF');document.getElementById('coming-soon-input-notify').value = 'Convert Webp to TIFF';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Convert Webp to TIFF <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Convert a Webp image to a TIFF image.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Convert TIFF to Webp" onclick="Site.logToolsComingSoon('Convert TIFF to Webp');document.getElementById('coming-soon-input-notify').value = 'Convert TIFF to Webp';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Convert TIFF to Webp <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Convert a TIFF image to a Webp image.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Create an Animated GIF" onclick="Site.logToolsComingSoon('Create an Animated GIF');document.getElementById('coming-soon-input-notify').value = 'Create an Animated GIF';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Create an Animated GIF <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Create an animated GIF image from static frames.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Create Image from BGR Array" onclick="Site.logToolsComingSoon('Create Image from BGR Array');document.getElementById('coming-soon-input-notify').value = 'Create Image from BGR Array';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Create Image from BGR Array <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Create an image from an B, G, R array.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Create Image from RGBA Array" onclick="Site.logToolsComingSoon('Create Image from RGBA Array');document.getElementById('coming-soon-input-notify').value = 'Create Image from RGBA Array';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Create Image from RGBA Array <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Create an image from an R, G, B, A array.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Create Image from BGRA Array" onclick="Site.logToolsComingSoon('Create Image from BGRA Array');document.getElementById('coming-soon-input-notify').value = 'Create Image from BGRA Array';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Create Image from BGRA Array <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Create an image from an B, G, R, A array.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Enhance Image Quality" onclick="Site.logToolsComingSoon('Enhance Image Quality');document.getElementById('coming-soon-input-notify').value = 'Enhance Image Quality';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Enhance Image Quality <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Increase the quality of an image.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Reduce Image Quality" onclick="Site.logToolsComingSoon('Reduce Image Quality');document.getElementById('coming-soon-input-notify').value = 'Reduce Image Quality';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Reduce Image Quality <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Decrease the quality of an image.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Unpixelate Image" onclick="Site.logToolsComingSoon('Unpixelate Image');document.getElementById('coming-soon-input-notify').value = 'Unpixelate Image';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Unpixelate Image <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Remove the pixelation effect from an image.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Unblur Image" onclick="Site.logToolsComingSoon('Unblur Image');document.getElementById('coming-soon-input-notify').value = 'Unblur Image';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Unblur Image <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Remove the blur effect from an image.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Extract Text from Image" onclick="Site.logToolsComingSoon('Extract Text from Image');document.getElementById('coming-soon-input-notify').value = 'Extract Text from Image';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Extract Text from Image <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Apply OCR on an image and extract all text from it.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Remove Text from Image" onclick="Site.logToolsComingSoon('Remove Text from Image');document.getElementById('coming-soon-input-notify').value = 'Remove Text from Image';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Remove Text from Image <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Erase text or label from an image.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Remove Object from Image" onclick="Site.logToolsComingSoon('Remove Object from Image');document.getElementById('coming-soon-input-notify').value = 'Remove Object from Image';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Remove Object from Image <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Erase any object from an image.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Create a Thumbnail" onclick="Site.logToolsComingSoon('Create a Thumbnail');document.getElementById('coming-soon-input-notify').value = 'Create a Thumbnail';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Create a Thumbnail <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Convert an image to a thumbnail</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Create a Glitch Image" onclick="Site.logToolsComingSoon('Create a Glitch Image');document.getElementById('coming-soon-input-notify').value = 'Create a Glitch Image';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Create a Glitch Image <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Convert a PNG, GIF, JPG or BMP to glitch art.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Run Zalgo on an Image" onclick="Site.logToolsComingSoon('Run Zalgo on an Image');document.getElementById('coming-soon-input-notify').value = 'Run Zalgo on an Image';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Run Zalgo on an Image <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Let Zalgo destroy an image.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Convert Image Color Space" onclick="Site.logToolsComingSoon('Convert Image Color Space');document.getElementById('coming-soon-input-notify').value = 'Convert Image Color Space';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Convert Image Color Space <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Change an image color space to HSL, HSV, CMYK, or RGB.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Convert Image Bits Per Pixel" onclick="Site.logToolsComingSoon('Convert Image Bits Per Pixel');document.getElementById('coming-soon-input-notify').value = 'Convert Image Bits Per Pixel';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Convert Image Bits Per Pixel <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Change an image bit depth to 32, 24, 16, 8, 4, 2 bits or just 1 bit.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Create an Image Mosaic" onclick="Site.logToolsComingSoon('Create an Image Mosaic');document.getElementById('coming-soon-input-notify').value = 'Create an Image Mosaic';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Create an Image Mosaic <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Create a mosaic wall from multiple images.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Generate ASCII Art from an Image" onclick="Site.logToolsComingSoon('Generate ASCII Art from an Image');document.getElementById('coming-soon-input-notify').value = 'Generate ASCII Art from an Image';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Generate ASCII Art from an Image <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Create an ASCII art image from a regular image.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Generate ANSI Art from an Image" onclick="Site.logToolsComingSoon('Generate ANSI Art from an Image');document.getElementById('coming-soon-input-notify').value = 'Generate ANSI Art from an Image';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Generate ANSI Art from an Image <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Create an ANSI art image from a regular image.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Generate Unicode Art from an Image" onclick="Site.logToolsComingSoon('Generate Unicode Art from an Image');document.getElementById('coming-soon-input-notify').value = 'Generate Unicode Art from an Image';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Generate Unicode Art from an Image <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Create a Unicode art image from a regular image.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Generate Braille Art from an Image" onclick="Site.logToolsComingSoon('Generate Braille Art from an Image');document.getElementById('coming-soon-input-notify').value = 'Generate Braille Art from an Image';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Generate Braille Art from an Image <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Create a Braille art image from a regular image.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Add a Label to an Image" onclick="Site.logToolsComingSoon('Add a Label to an Image');document.getElementById('coming-soon-input-notify').value = 'Add a Label to an Image';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Add a Label to an Image <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Add a short one-line label to an image.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Delete a Watermark from an Image" onclick="Site.logToolsComingSoon('Delete a Watermark from an Image');document.getElementById('coming-soon-input-notify').value = 'Delete a Watermark from an Image';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Delete a Watermark from an Image <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Remove a watermark from an image.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Add Halftone Effect to an Image" onclick="Site.logToolsComingSoon('Add Halftone Effect to an Image');document.getElementById('coming-soon-input-notify').value = 'Add Halftone Effect to an Image';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Add Halftone Effect to an Image <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Create an image made out of dots of varying size and spacing.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Blockify an Image" onclick="Site.logToolsComingSoon('Blockify an Image');document.getElementById('coming-soon-input-notify').value = 'Blockify an Image';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Blockify an Image <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Convert an image to a bunch of blocks.</p></div></div></div><div class="col mb-4"><div class="card card-gray-tool h-100 d-flex cursor-pointer" data-bs-target="#coming-soon-modal" data-bs-toggle="modal" data-name="Add Progressive Effect to an Image" onclick="Site.logToolsComingSoon('Add Progressive Effect to an Image');document.getElementById('coming-soon-input-notify').value = 'Add Progressive Effect to an Image';"><div class="card-body"><div class="card-header pt-1 font-weight-bold pb-1">Add Progressive Effect to an Image <span class="arrow">
                                        <svg class="svg-icon">
                                          <use xlink:href="#icon-chevron-right"></use>
                                        </svg>
                                      </span></div><div class="card-line"></div><p class="card-text text-white">Create a GIF from the original image with interlacing effect.</p></div></div></div></div></div></div><div aria-hidden="true" class="modal fade" data-type="coming-soon" id="coming-soon-modal" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">We're working on this tool!</h5><button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"></button></div><div class="modal-body"><p>You clicked on a coming soon tool. This tool is in the works and we'll be releasing it soon. You can subscribe to updates and we'll let you know when we add it!</p><form class="section coming-soon subscription needs-validation" id="onlinetools-coming-soon-box" novalidate=""><div class="row"><div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mb-3"><label class="form-label" for="coming-soon-input-email">Your email:</label><input class="form-control" id="coming-soon-input-email" placeholder="" required="" type="email" value=""><div class="invalid-feedback">Please provide a email.</div></div></div><input class="form-control" id="coming-soon-input-notify" placeholder="" type="hidden"><div class="row"><div class="col text-center"><button class="btn btn-primary text-white" id="coming-soon-submit" type="type">Submit</button></div></div></form></div></div></div></div><hr class="divider-primary"><div class="bg-2"><div class="container-fluid py-5"><div class="container"><div class="row"><div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 pb-3"><h4 class="fs-2 text-secondary">Subscribe!</h4><p>Subscribe to our updates. We'll let you know when we release new tools, features, and organize online workshops.</p></div><div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 pb-3"><p class="font-weight-bold">Enter your email here<svg class="bi bi-arrow-down-short" fill="currentColor" height="24" viewBox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z" fill-rule="evenodd"></path></svg></p><form class="section subscribe subscription needs-validation" id="onlinetools-subscribe-box" novalidate=""><div class="input-group mb-3"><input aria-describedby="subscribe-submit" aria-label="" class="form-control subscribe-input-email" id="subscribe-input-email" placeholder="Your email" required="" type="email"><button class="btn btn-secondary text-white" id="subscribe-submit" type="submit">Subscribe</button></div></form></div></div></div></div></div><hr class="divider-primary"><div class="container py-4" id="feedback"><div class="row"><div class="col-xs-12 col-sm-12 col-md-6 col-lg-2"></div><div class="col-xs-12 col-sm-12 col-md-12 col-lg-8"><h4 class="text-center pb-3 fs-2"><span class="text-primary">Feedback.</span> We'd love to hear from you! šŸ‘‹</h4><form class="feedback-box needs-validation" id="feedback-box" novalidate=""><div class="row"><div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 mb-3"><label class="form-label" for="feedback-input-email">Email</label><input class="form-control" id="feedback-input-email" placeholder="Your email" required="" type="email"><div class="invalid-feedback">Please provide a email.</div></div><div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 mb-3"><label class="form-label" for="feedback-input-subject">Subject</label><input class="form-control" id="feedback-input-subject" placeholder="Your subject" required="" type="text"><div class="invalid-feedback">Please provide a subject.</div></div></div><div class="row"><div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mb-3"><label class="form-label" for="feedback-input-message">Message</label><textarea class="form-control" id="feedback-input-message" required="" rows="5"></textarea><div class="invalid-feedback">Please provide a message.</div></div></div><div class="row"><div class="col text-center"><button class="btn btn-primary" id="feedback-submit" type="submit">Send Feedback</button></div></div></form></div><div class="col-xs-12 col-sm-12 col-md-6 col-lg-2"></div></div></div><div class="container py-5"><div class="row"><div class="col"><div class="row justify-content-center align-items-center"><div class="col-md-6 pb-2"><h3 class="fs-2 text-black">Created with love by</h3><img class="img-fluid lazyload" data-src="/images/logo-browserling.png"><div class="pt-3"><p class="text-muted">We're <a href="https://www.browserling.com/?from=tools-image-cr-2021-04-25" rel="nofollow">Browserling</a> ā€” a friendly and fun cross-browser testing company powered by alien technology. At Browserling we love to make people's lives easier, so we created this collection of image editing tools. Our tools have the simplest user interface that doesn't require advanced computer skills and they are used by millions of people every month. Our image tools are actually powered by our <a href="https://www.browserling.com/tools?from=tools-image-crt-2021-04-25" rel="nofollow">web developer tools</a> that we created over the last couple of years. Check them out!</p><div class="fffff-and-ttttt d-none d-sm-none d-md-none d-xl-block d-xxl-block" style="margin-left: -4px;"><div class="fffff mx-1">49K</div><div class="ttttt">@browserling</div></div></div></div><div class="col-md-6"><img class="img-fluid lazyload" data-src="/images/team.png"></div></div></div></div></div><div class="footer container"><div class="row"><div class="col-12 pb-3"><div class="rounded p-3 bg-fcfad9"><div class="d-flex flex-row pb-3"><div class="pe-3"><img class="img-fluid lazyload" data-src="/images/privacy-policy.png" width="64px"></div><div><div class="text-black fs-3 font-ss3">Privacy Policy</div><div class="text-black fs-4 font-ss3">We don't log data</div></div></div><div>All conversions and calculations are done in your browser using JavaScript. We don't send a single bit about your input data to our servers. There is no server-side processing at all. We use Google Analytics and StatCounter for site usage analytics. Your IP address is saved on our web server for additional analytics. The free plan doesn't use cookies and don't store session information in cookies. The premium and team plans use cookies to store session information so that you are always logged in. We use your browser's local storage to save tools' input. It stays on your computer.</div></div></div><div class="col-12 pb-3"><div class="rounded p-3 bg-d8f1f1"><div class="d-flex flex-row pb-3"><div class="pe-3"><img class="img-fluid lazyload" data-src="/images/terms-of-service.png" width="64px"></div><div><div class="text-black fs-3 font-ss3">Terms of Service</div><div class="text-black fs-4 font-ss3">The legal stuff</div></div></div><div>By using Online Tools you agree to our <a href="/terms-of-service">Terms of Service</a>. All tools are free for personal use but to use them for commercial purposes, you need to get a <a href="/pricing">premium plan</a>. You can't do illegal or shady things with our tools. We may block your access to tools, if we find out you're doing something bad. We're not liable for your actions and we offer no warranty. We may revise our terms at any time.</div></div></div><div class="col-12 pb-4"><div class="bg-e1ebf8 rounded position-relative"><div class="blur-text p-3 cursor-pointer w-100 h-100" id="secret" onclick="Site.secret();"><span class="btn btn-primary position-absolute" style="text-shadow: none; margin-left: auto; margin-right: auto; left: 0; right: 0; width: 200px; height: 47px; margin: auto; bottom: 0; top: 0;">Click to reveal a secret</span><div class="d-flex flex-row pb-3"><div class="pe-3"><img class="img-fluid lazyload" data-src="/images/secret.png" id="secret-icon" style="filter: blur(8px); -webkit-filter: blur(8px);" width="64px"></div><div><div class="fs-3 font-ss3" id="secret-title">Secret message</div><div class="fs-4 font-ss3">You've found a secret</div></div></div><div>If you love our tools, then we love you, too! Use coupon code <span id="secret-coupon-code">IMAGELING</span> to get a discount for our <span id="secret-coupon-link-plans">premium plans</span>.</div></div></div></div></div></div><hr class="divider-primary"><footer class="text-center text-lg-start text-muted pt-1"><section><div class="container text-center text-md-start mt-4 mb-4"><div class="row mt-3"><div class="col-md-0 col-lg-0 col-xl-3 mx-auto mb-4 text-center"><a href="/" style="text-decoration: none;"><img class="lazyload" data-src="/images/logo-onlinetools-transparent.png" height="25" style="margin-top: -5px;" width="150"></a></div><div class="col-md-3 col-lg-3 col-xl-2 mx-auto mb-4"><h6 class="text-uppercase mb-2 text-primary">Our Product</h6><div class="pb-2"><a class="text-reset text-decoration-none" href="/pricing#features">Features</a></div><div class="pb-2"><a class="text-reset text-decoration-none" href="/pricing">Pricing</a></div><div class="pb-2"><a class="text-reset text-decoration-none" href="/about">About Us</a></div></div><div class="col-md-4 col-lg-4 col-xl-2 mb-4"><h6 class="text-uppercase mb-2 text-primary">Tool Categories</h6><div><small><a class="text-reset text-decoration-none" href="https://onlinePNGtools.com" rel="nofollow">PNG Tools</a></small></div><div><small><a class="text-reset text-decoration-none" href="https://onlineJPGtools.com" rel="nofollow">JPG Tools</a></small></div><div><small><a class="text-reset text-decoration-none" href="https://onlineGIFtools.com" rel="nofollow">GIF Tools</a></small></div><div><small><a class="text-reset text-decoration-none" href="https://onlineTEXTtools.com" rel="nofollow">Text Tools</a></small></div><div><small><a class="text-reset text-decoration-none" href="https://onlineSTRINGtools.com" rel="nofollow">String Tools</a></small></div><div><small><a class="text-reset text-decoration-none" href="/random">Random Tools</a></small></div><div><small><a class="text-reset text-decoration-none" href="/number">Number Tools</a></small></div><div><small><a class="text-reset text-decoration-none" href="/unicode">Unicode Tools</a></small></div><div><small><a class="text-reset text-decoration-none" href="/utf8">UTF8 Tools</a></small></div><div><small><a class="text-reset text-decoration-none" href="/ascii">ASCII Tools</a></small></div><div><small><a class="text-reset text-decoration-none" href="/image">Image Tools</a></small></div><div><small><a class="text-reset text-decoration-none" href="/list">List Tools</a></small></div><div><small><a class="text-reset text-decoration-none" href="/time">Time Tools</a></small></div><div><small><a class="text-reset text-decoration-none" href="/math">Math Tools</a></small></div><div><small><a class="text-reset text-decoration-none" href="/hex">Hex Tools</a></small></div><div><small><a class="text-reset text-decoration-none" href="/binary">Binary Tools</a></small></div><div><small><a class="text-reset text-decoration-none" href="/integer">Integer Tools</a></small></div><div><small><a class="text-reset text-decoration-none" href="/csv">CSV Tools</a></small></div><div><small><a class="text-reset text-decoration-none" href="/json">JSON Tools</a></small></div><div><small><a class="text-reset text-decoration-none" href="/fractal">Fractal Tools</a></small></div><div><small><a class="text-reset text-decoration-none" href="/webp">WebP Tools</a></small></div></div><div class="col-md-3 col-lg-3 col-xl-3 mx-auto mb-4"><h6 class="text-uppercase mb-2 text-primary">Top Image Tools</h6><div><small><a class="text-reset text-decoration-none" href="/image/create-transparent-image">Create a Transparent Image</a></small></div><div><small><a class="text-reset text-decoration-none" href="/image/grayscale-image">Convert Image to Grayscale</a></small></div><div><small><a class="text-reset text-decoration-none" href="/image/pixelate-image">Pixelate an Image</a></small></div><div><small><a class="text-reset text-decoration-none" href="/image/blur-image">Blur an Image</a></small></div><div><small><a class="text-reset text-decoration-none" href="/image/sharpen-image">Sharpen an Image</a></small></div><div><small><a class="text-reset text-decoration-none" href="/image/rotate-image">Rotate an Image</a></small></div><div><small><a class="text-reset text-decoration-none" href="/image/resize-image">Resize an Image</a></small></div><div><small><a class="text-reset text-decoration-none" href="/image/crop-image">Crop an Image</a></small></div><div><small><a class="text-reset text-decoration-none" href="/image/add-image-border">Add a Border to an Image</a></small></div><div><small><a class="text-reset text-decoration-none" href="/image/round-image-corners">Make Image Corners Round</a></small></div><div><small><a class="text-reset text-decoration-none" href="/image/convert-image-to-base64">Convert Image to Base-64</a></small></div><div><small><a class="text-reset text-decoration-none" href="/image/convert-base64-to-image">Convert Base-64 to Image</a></small></div></div><div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-md-0 mb-4"><h6 class="text-uppercase mb-2 text-primary">Contact</h6><div class="pb-2"><a class="text-reset text-decoration-none" href="/contact">Contact Us</a></div><div class="pb-2 text-truncate"><a class="text-reset text-decoration-none" href="mailto:[email protected]">[email protected]</a></div></div></div></div></section><hr class="divider-primary"><div class="container"><div class="row"><div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 py-3"><div class="fs-6">Ā© 2024 Browserling Inc. All rights reserved. <a class="px-1" href="/terms-of-service">Terms of Service</a> <a href="/privacy-policy">Privacy Policy</a></div></div><div class="col-xs-12 col-sm-12 col-md-1 col-lg-1"></div><div class="col-xs-12 col-sm-12 col-md-5 col-lg-5 py-3"><div class="pb-2"><div class="fs-6">Part of the exclusive <a href="https://hf.cx"><img class="lazyload" data-src="/images/hf.png" height="16px" style="margin-top: -2px;" width="28px"></a> startup accelerator in Silicon Valley.</div></div><div><div class="fs-6">Part of the exclusive <a href="https://startups.microsoft.com"><img class="lazyload" data-src="/images/microsoft.png" height="16px" style="margin-top: -2px;" width="16px"></a> Microsoft BizSpark program for startups.</div></div></div></div></div></footer><script defer="" src="/CACHE/js/main.js?v=6b7ec175f782ec6221c3cfc7a1edf4abc2c2735b"></script><script defer="" src="/CACHE/js/tools.js?v=6b7ec175f782ec6221c3cfc7a1edf4abc2c2735b"></script><script defer="" src="/CACHE/js/image-replace-image-color.js?v=6b7ec175f782ec6221c3cfc7a1edf4abc2c2735b"></script><script defer="" src="/CACHE/js/discount.js?v=6b7ec175f782ec6221c3cfc7a1edf4abc2c2735b"></script><script type="text/javascript">
              var sc_project=12837848;
              var sc_invisible=1;
              var sc_security="f8f19c8e";
            </script><script src="https://secure.statcounter.com/counter/counter.js"></script><script type="text/javascript">
              var sc_project=11586107;
              var sc_invisible=1;
              var sc_security="1f1faaa3";
            </script><script src="https://secure.statcounter.com/counter/counter.js"></script><script defer="" src="https://www.googletagmanager.com/gtag/js?id=G-1XP1J49B73"></script><script>
          window.dataLayer = window.dataLayer || [];
          function gtag() { dataLayer.push(arguments) };
          gtag('js', new Date());
          gtag('config', 'G-1XP1J49B73');
        </script><script defer="" src="https://accounts.google.com/gsi/client"></script><script defer="" src="/js/gsi.js"></script><div class="position-fixed bottom-0 start-0 p-3" style="z-index: 999999"><div aria-atomic="true" aria-live="assertive" class="toast hide" id="toast-warning" role="alert"><div class="toast-body"><button aria-label="Close" class="btn-close position-absolute end-0 me-4" data-bs-dismiss="toast" type="button"></button><div class="d-flex flex-row"><div class="pe-3"><div class="text-center rounded-circle shadow-inset p-2"><svg class="bi bi-x-lg" fill="#EC9937" height="28" viewBox="0 0 16 16" width="28" xmlns="http://www.w3.org/2000/svg"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"></path><path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"></path></svg></div></div><div><div><h4 class="me-auto text-warning" id="toast-warning-title">Warning</h4></div><div id="toast-warning-body"></div></div></div></div></div></div><div class="position-fixed bottom-0 end-0 p-3" style="z-index: 999999;"><div aria-atomic="true" aria-live="assertive" class="toast hide" id="toast-success" role="alert"><div class="toast-body"><button aria-label="Close" class="btn-close position-absolute end-0 me-4" data-bs-dismiss="toast" type="button"></button><div class="d-flex flex-row"><div class="pe-3"><div class="text-center rounded-circle shadow-inset p-2"><svg class="bi bi-check-lg" fill="#198754" height="28" viewBox="0 0 16 16" width="28" xmlns="http://www.w3.org/2000/svg"><path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"></path></svg></div></div><div><div><h4 class="me-auto text-success" id="toast-success-header">Successfully</h4></div><div id="toast-success-body"></div></div></div></div></div></div><div class="position-fixed bottom-0 end-0 p-3" style="z-index: 999999"><div aria-atomic="true" aria-live="assertive" class="toast hide" id="toast-error" role="alert"><div class="toast-body"><button aria-label="Close" class="btn-close position-absolute end-0 me-4" data-bs-dismiss="toast" type="button"></button><div class="d-flex flex-row"><div class="pe-3"><div class="text-center rounded-circle shadow-inset p-2"><svg class="bi bi-x-lg" fill="#dc3545" height="28" viewBox="0 0 16 16" width="28" xmlns="http://www.w3.org/2000/svg"><path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"></path></svg></div></div><div><div><h4 class="me-auto text-danger">Error</h4></div><div id="toast-error-body"></div></div></div></div></div></div><div class="fab position-fixed bottom-0 end-0" id="fab"><input class="fab-main" id="fab-main" type="checkbox"><label class="p-3 shadow" for="fab-main" id="tour-fab-mobile" onclick="document.querySelector('.fab-main:checked') == null ? Site.statsFab('fab') : false;"><svg class="bi bi-gear" fill="#444867" height="32" viewBox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"></path><path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"></path></svg></label><div aria-controls="offcanvasMenu" class="seven p-2 shadow cursor-pointer" data-bs-target="#offcanvasMenu" data-bs-toggle="offcanvas" id="tour-fab-tools" onclick="Site.statsFab('tools');"><svg class="bi bi-card-list" data-bs-placement="left" data-bs-toggle="tooltip" fill="#444867" height="24" viewBox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg" aria-label="Show all tools" data-bs-original-title="Show all tools"><path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"></path><path d="M5 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 5 8zm0-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-1-5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zM4 8a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm0 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"></path></svg></div><div aria-controls="staticBackdrop" class="two p-2 shadow cursor-pointer" data-bs-target="#staticBackdrop" data-bs-toggle="offcanvas" id="tour-fab-search" onclick="Site.statsFab('search');"><span data-bs-placement="left" data-bs-toggle="tooltip" aria-label="Search tools" data-bs-original-title="Search tools">
        <svg fill="none" height="24px" viewBox="0 0 68 68" width="24px" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1185_6479)">
<path d="M55.379 68H12.621C5.66273 68 0 62.3373 0 55.379V12.621C0 5.66273 5.66273 0 12.621 0H55.379C62.3373 0 68 5.66273 68 12.621V55.379C68 62.3373 62.3373 68 55.379 68ZM12.621 2.57397C7.08271 2.57397 2.57397 7.08271 2.57397 12.621V55.379C2.57397 60.9173 7.08271 65.426 12.621 65.426H55.379C60.9173 65.426 65.426 60.9173 65.426 55.379V12.621C65.426 7.08271 60.9173 2.57397 55.379 2.57397H12.621Z" fill="#43476A"></path>
<path d="M53.3238 46.898L38.1031 31.6086C37.8028 31.3083 37.6956 30.8621 37.8328 30.4589C38.4806 28.5498 39.8706 22.6769 34.6325 17.7134C34.195 17.2759 29.4846 12.5655 22.0372 15.3582C22.0372 15.414 21.0334 16.1519 22.4834 17.2844C23.4787 18.2068 27.3611 22.0377 28.9441 23.5992C29.3216 23.9725 29.3302 24.5774 28.9655 24.9634L25.2161 28.9231C24.8386 29.322 24.208 29.3306 23.8219 28.9488L16.7477 21.9648C16.7477 21.9648 15.6495 21.2097 15.1776 22.6126C14.9374 23.5435 12.5221 30.8149 19.3474 36.3618C19.3689 36.379 19.3903 36.3919 19.4118 36.409C19.9824 36.808 24.2208 40.0083 30.7501 37.8419C31.1405 37.7132 31.5695 37.8161 31.8655 38.1036C34.6025 40.7419 46.9104 53.1184 46.9104 53.1184C46.9104 53.1184 47.7598 54.1609 49.1283 52.9554C50.1965 51.8314 53.4568 48.5453 53.4568 48.5453" fill="#43476A"></path>
</g>
<defs>
<clipPath id="clip0_1185_6479">
<rect fill="white" height="68" width="68"></rect>
</clipPath>
</defs>
</svg>

        </span></div><a class="one p-2 shadow" data-bs-placement="left" data-bs-toggle="tooltip" href="#examples" onclick="Site.statsFab('examples');" aria-label="See examples" data-bs-original-title="See examples"><svg class="bi bi-lightbulb" fill="#444867" height="24" viewBox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6m6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1"></path></svg></a><div class="three p-2 shadow tool-favorite cursor-pointer" id="tour-fab-favorite" onclick="document.querySelector('.tool-favorite').classList.contains('active')?Site.statsFab('unfav'):Site.statsFab('fav');"><svg class="bi bi-star-fill" data-bs-placement="top" data-bs-toggle="tooltip" fill="#444867" height="24" viewBox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg" aria-label="Add to favorites" data-bs-original-title="Add to favorites"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg></div><div class="four p-2 shadow tweet-link-button" data-tweet-url="https://twitter.com/intent/tweet?text=Replace%20a%20Color%20in%20Image%20%E2%80%93%20Online%20Image%20Tools%20https%3A//onlinetools.com/image/replace-image-color" onclick="Site.statsFab('tweet');"><svg class="bi bi-twitter" data-bs-placement="top" data-bs-toggle="tooltip" fill="#444867" height="24" viewBox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg" aria-label="Share on Twitter" data-bs-original-title="Share on Twitter"><path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path></svg></div><div class="five p-2 shadow tool-create-link" data-bs-toggle="modal" href="#shareModalLink" id="tour-fab-link" onclick="Site.statsFab('link');" role="button"><svg class="bi bi-link" data-bs-placement="top" data-bs-toggle="tooltip" fill="#444867" height="24" viewBox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg" aria-label="Copy a link to the tool" data-bs-original-title="Copy a link to the tool"><path d="M6.354 5.5H4a3 3 0 0 0 0 6h3a3 3 0 0 0 2.83-4H9c-.086 0-.17.01-.25.031A2 2 0 0 1 7 10.5H4a2 2 0 1 1 0-4h1.535c.218-.376.495-.714.82-1z"></path><path d="M9 5.5a3 3 0 0 0-2.83 4h1.098A2 2 0 0 1 9 6.5h3a2 2 0 1 1 0 4h-1.535a4.02 4.02 0 0 1-.82 1H12a3 3 0 1 0 0-6H9z"></path></svg></div><div class="six p-2 shadow tool-swap" data-swap-to=""><svg class="bi bi-arrow-left-right" data-bs-placement="top" data-bs-toggle="tooltip" fill="#444867" height="24" viewBox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg" aria-label="Swap input and output" data-bs-original-title="Swap input and output"><path d="M1 11.5a.5.5 0 0 0 .5.5h11.793l-3.147 3.146a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 11H1.5a.5.5 0 0 0-.5.5zm14-7a.5.5 0 0 1-.5.5H2.707l3.147 3.146a.5.5 0 1 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H14.5a.5.5 0 0 1 .5.5z" fill-rule="evenodd"></path></svg></div></div><div aria-labelledby="staticBackdropLabel" class="offcanvas offcanvas-end all-tools-sidebar py-3" data-type="sidebar" id="staticBackdrop" tabindex="-1"><div class="pe-3 pb-3"><button aria-label="Close" class="btn-close text-reset float-end" data-bs-dismiss="offcanvas" type="button"></button></div><div class="offcanvas-body px-2"><div><div class="input-group dropdown"><span class="input-group-text" id="basic-addon-fab">
                    <svg class="bi bi-search" fill="currentColor" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
                        <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"></path>
                      </svg>
                </span><input aria-describedby="button-addon-fab" class="form-control search dropdown-toggle" data-category="image" id="fab-tools" placeholder="Search" type="text" data-bs-toggle="dropdown"><div class="dropdown-menu autocomplete w-100 overflow-auto"></div></div></div><div class="d-none pt-2 text-center" id="tool-fab-none-matches">Didn't find the tool you were looking for? <a data-bs-target="#tool-search-modal" data-bs-toggle="modal" href="#tools">Let us know</a> what tool we are missing and we'll build it!</div><hr><div class="tools-sidebar" id="tools-sidebar"><div aria-hidden="true" class="card card-loading mb-4"><div class="card-body"><div class="card-header"><h5 class="card-title placeholder-glow"><span class="placeholder col-9"></span></h5></div><p class="card-text placeholder-glow"><span class="placeholder col-12"></span> <span class="placeholder col-12"></span></p></div></div><div aria-hidden="true" class="card card-loading mb-4"><div class="card-body"><div class="card-header"><h5 class="card-title placeholder-glow"><span class="placeholder col-9"></span></h5></div><p class="card-text placeholder-glow"><span class="placeholder col-12"></span> <span class="placeholder col-12"></span></p></div></div><div aria-hidden="true" class="card card-loading mb-4"><div class="card-body"><div class="card-header"><h5 class="card-title placeholder-glow"><span class="placeholder col-9"></span></h5></div><p class="card-text placeholder-glow"><span class="placeholder col-12"></span> <span class="placeholder col-12"></span></p></div></div><div aria-hidden="true" class="card card-loading mb-4"><div class="card-body"><div class="card-header"><h5 class="card-title placeholder-glow"><span class="placeholder col-9"></span></h5></div><p class="card-text placeholder-glow"><span class="placeholder col-12"></span> <span class="placeholder col-12"></span></p></div></div><div aria-hidden="true" class="card card-loading mb-4"><div class="card-body"><div class="card-header"><h5 class="card-title placeholder-glow"><span class="placeholder col-9"></span></h5></div><p class="card-text placeholder-glow"><span class="placeholder col-12"></span> <span class="placeholder col-12"></span></p></div></div></div></div></div><div aria-hidden="true" aria-labelledby="shareModalLinkLabel" class="modal fade" id="shareModalLink" tabindex="-1"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="shareModalLinkLabel">Link to this tool</h5><button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"></button></div><div class="modal-body"><p>This is a link to this tool, including input, options and all chained tools.</p><div class="form-check pb-3"><input class="form-check-input" id="share-include-input" type="checkbox" value=""><label class="form-check-label" for="share-include-input">Include Input</label></div><div class="input-group mb-3"><input aria-describedby="basic-addon" aria-label="Link" class="form-control" id="fab-share-link" placeholder="Link" type="text"><button class="btn btn-primary" onclick="document.getElementById('fab-share-link').select(); document.execCommand('copy'); Site.statsFab('link_copy');" type="button">Copy</button></div></div></div></div></div><style>.site-logo { width: 32px; height: 32px; display: inline-block; vertical-align: middle; background-image: url("data:image/png;base64,iVBORw0KGgoAAAATSUhEUm9ubGluZXRvb2xzLmNvbS9pbWFnZS9yZXBsYWNlLWltYWdlLWNvbG9yCjEwNC4yOC4xNTguMjQ4"); position: relative; padding: 16px; }</style><div class="d-none" style="width: 1px; height: 1px;"><form action="/quick-feedback" id="quick_feedback" method="POST"><input name="name" type="text"><input name="feedback" type="text"></form></div><div class="sp-container sp-hidden sp-light sp-alpha-enabled sp-palette-buttons-disabled sp-palette-disabled sp-initial-disabled"><div class="sp-palette-container"><div class="sp-palette sp-thumb sp-cf"></div><div class="sp-palette-button-container sp-cf"><button type="button" class="sp-palette-toggle">less</button></div></div><div class="sp-picker-container"><div class="sp-top sp-cf"><div class="sp-fill"></div><div class="sp-top-inner"><div class="sp-color" style="background-color: rgb(255, 0, 0);"><div class="sp-sat"><div class="sp-val"><div class="sp-dragger" style="top: 0px; left: 0px;"></div></div></div></div><div class="sp-clear sp-clear-display" title="Clear Color Selection" style="display: none;"></div><div class="sp-hue"><div class="sp-slider" style="left: 0px;"></div></div></div><div class="sp-alpha"><div class="sp-alpha-inner" style="background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255));"><div class="sp-alpha-handle" style="left: 0px;"></div></div></div></div><div class="sp-input-container sp-cf"><input class="sp-input" type="text" spellcheck="false"></div><div class="sp-initial sp-thumb sp-cf"></div><div class="sp-button-container sp-cf"><a class="sp-cancel" href="#">cancel</a><button type="button" class="sp-choose">choose</button></div></div></div><div class="sp-container sp-hidden sp-light sp-alpha-enabled sp-palette-buttons-disabled sp-palette-disabled sp-initial-disabled"><div class="sp-palette-container"><div class="sp-palette sp-thumb sp-cf"></div><div class="sp-palette-button-container sp-cf"><button type="button" class="sp-palette-toggle">less</button></div></div><div class="sp-picker-container"><div class="sp-top sp-cf"><div class="sp-fill"></div><div class="sp-top-inner"><div class="sp-color" style="background-color: rgb(255, 0, 0);"><div class="sp-sat"><div class="sp-val"><div class="sp-dragger" style="top: 0px; left: 0px;"></div></div></div></div><div class="sp-clear sp-clear-display" title="Clear Color Selection" style="display: none;"></div><div class="sp-hue"><div class="sp-slider" style="left: 0px;"></div></div></div><div class="sp-alpha"><div class="sp-alpha-inner" style="background: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(0, 0, 0));"><div class="sp-alpha-handle" style="left: 0px;"></div></div></div></div><div class="sp-input-container sp-cf"><input class="sp-input" type="text" spellcheck="false"></div><div class="sp-initial sp-thumb sp-cf"></div><div class="sp-button-container sp-cf"><a class="sp-cancel" href="#">cancel</a><button type="button" class="sp-choose">choose</button></div></div></div><div data-colorscheme="BestBlue" data-icontype="discount/icons/lightning.html" data-type="l2_title_subtitle_mini" data-show="off" data-click="off" data-title="New Pricing" data-subtitle="and new features!" class="animate__faster discount-BestBlue position-sticky bottom-0 start-0 cursor-pointer d-none animate__animated animate__slideOutLeft" id="discount-scrollout">
  <a href="/pricing" class="text-decoration-none" onclick="Site.statsDiscountHeader('scrollout', 'click');">
    <div class="popup-content l2_title_subtitle_mini d-flex flex-column align-items-center justify-content-center">
      <div class="popup-content-title">New Pricing</div>
      <div class="popup-content-subtitle h8-min h7-max">and new features!</div>
    </div>
  </a>
  <div class="popup-close" onclick="Site.statsDiscountHeader('scrollout', 'close');this.parentNode.parentNode.removeChild(this.parentNode);return false;">
    <svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
    <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"></path>
    </svg>
  </div>
</div><div class="modal-backdrop fade show"></div></body></html>