coolors.co Open in urlscan Pro
2606:4700:10::6816:f72  Public Scan

URL: https://coolors.co/u/rohan_clarke1
Submission: On December 06 via manual from IN — Scanned from DE

Form analysis 24 forms found in the DOM

POST signin

<form id="modal-signin_form" method="post" action="signin">
  <!-- Email -->
  <div class="input-group">
    <!-- <div class="input_icon"> -->
    <input type="text" class="input input--m" name="email" id="modal-signin_email" tabindex="1" placeholder="Email / Username">
    <!-- <i class="icon icon-mail-24px"></i>
              </div> -->
  </div>
  <!-- Password -->
  <div class="input-group input-size-m">
    <div class="input_help-btn input-password-reveal">
      <!-- <div class="input_icon"> -->
      <input type="password" class="input input--m" name="password" id="modal-signin_password" tabindex="2" placeholder="Password">
      <!-- <i class="icon icon-lock-outline-24px"></i>
                </div> -->
      <a class="btn btn--xs btn--transparent btn--icon" tabindex="-1">
                  <i class="icon icon-eye-24px"></i>
                  <i class="icon icon-noeye-24px" style="display: none;"></i>
                </a>
    </div>
  </div>
  <!-- Remember me -->
  <!-- <div class="input-group">
              <input type="checkbox" class="checkbox" name="keep_logged" id="modal-signin_keep-logged" value="true">
              <label for="modal-signin_keep-logged">Remember me</label>
            </div> -->
  <!-- Submit Button -->
  <button type="submit" class="btn btn--m btn--primary" tabindex="3">Sign in</button>
</form>

POST signup

<form id="modal-signup_form" method="post" action="signup" autocomplete="off">
  <!-- Full Name -->
  <div class="input-group">
    <!-- <div class="input_icon"> -->
    <input type="text" class="input input--m" id="modal-signup_name" placeholder="Full Name" name="name" autocomplete="false">
    <!-- <i class="icon icon-circle-24px"></i>
              </div> -->
  </div>
  <!-- Email -->
  <div class="input-group">
    <!-- <div class="input_icon"> -->
    <input type="text" class="input input--m" placeholder="Email" name="email" id="modal-signup_email" autocomplete="false">
    <!-- <i class="icon icon-mail-24px"></i>
              </div> -->
  </div>
  <!-- Password -->
  <div class="input-group input-size-m">
    <div class="input_help-btn input-password-reveal">
      <!-- <div class="input_icon"> -->
      <input type="password" class="input input--m" placeholder="Password" name="password" id="modal-signup_password" autocomplete="false">
      <!-- <i class="icon icon-lock-outline-24px"></i>
                </div> -->
      <a class="btn btn--xs btn--transparent btn--icon" tabindex="-1">
                  <i class="icon icon-eye-24px"></i>
                  <i class="icon icon-noeye-24px" style="display: none;"></i>
                </a>
    </div>
  </div>
  <div class="cf-turnstile" data-sitekey="0x4AAAAAAAIVf3Y5hIm-FfxH">
    <div><input type="hidden" name="cf-turnstile-response" id="cf-chl-widget-a1unk_response" value=""></div>
  </div>
  <!-- Terms -->
  <!-- <div class="input-group _m-b-2">
              <input type="checkbox" class="checkbox" name="terms" id="modal-signup_terms" value="true">
              <label for="modal-signup_terms">I agree to your <a href='/terms-of-service' target='_blank' class='link link--primary link--hover-underlined'>Terms and Conditions</a> and <a href='/privacy-policy' target='_blank' class='link link--primary link--hover-underlined'>Privacy Policy</a></label>
            </div> -->
  <!-- Newsletter -->
  <!-- <div class="input-group">
              <input type="checkbox" class="checkbox" name="newsletter" id="modal-signup_newsletter" value="true">
              <label for="modal-signup_newsletter">I want to subscribe to the newsletter</label>
            </div> -->
  <!-- Submit Button -->
  <button type="submit" class="btn btn--m btn--primary">Create your free account</button>
</form>

POST reset-password

<form id="modal-reset-password_form" method="post" action="reset-password">
  <!-- Email -->
  <div class="input-group">
    <label for="modal-reset-password_email"> Email / Username <div class="input_errors input_errors--error">
        <div>This field is required</div>
        <div>This email is not registered</div>
      </div>
    </label>
    <!-- <div class="input_icon"> -->
    <input type="text" class="input input--m" placeholder="john@email.com" name="email" id="modal-reset-password_email">
    <!-- <i class="icon icon-mail-24px"></i>
              </div> -->
  </div>
  <!-- Password -->
  <div class="input-group input-size-m">
    <label for="modal-reset-password_password"> Choose a new password <div class="input_errors input_errors--error">
        <div>This field is required</div>
        <div>Min 8 characters</div>
      </div>
    </label>
    <div class="input_help-btn input-password-reveal">
      <!-- <div class="input_icon"> -->
      <input type="password" class="input input--m" name="password" id="modal-reset-password_password" placeholder="Min 8 characters">
      <!-- <i class="icon icon-lock-outline-24px"></i>
                </div> -->
      <a class="btn btn--xs btn--transparent btn--icon" tabindex="-1">
                  <i class="icon icon-eye-24px"></i>
                  <i class="icon icon-noeye-24px" style="display: none;"></i>
                </a>
    </div>
  </div>
  <!-- Submit Button -->
  <button type="submit" class="btn btn--m btn--primary">Send reset link</button>
</form>

POST passcode-process

<form id="passcode_form" method="post" action="passcode-process">
  <input type="hidden" name="id" id="passcode_id">
  <!-- Email -->
  <div class="input-group">
    <label for="passcode_code"> Color code <div class="input_errors input_errors--error">
        <div>This field is required</div>
        <div>The code is not valid.</div>
        <div>This code has been already used.</div>
        <div>This code has expired.</div>
        <div>Too many attempts. Try again in 1 minute.</div>
      </div>
    </label>
    <div class="input-color is-allow-empty is-light"><input type="text" class="input input--m" name="code" id="passcode_code" spellcheck="false" placeholder="Enter the code">
      <div class="input-color_preview" style="background: rgb(255, 255, 255);"></div>
      <i class="input-color_hash-icon">#</i>
      <span class="input-color_clear-btn" data-tooltip="Remove color" data-tooltip-container="child"><i class="icon icon-c-remove-16px"></i></span>
    </div>
  </div>
  <!-- Submit Button -->
  <button type="submit" class="btn btn--m btn--primary" id="passcode_submit-btn"></button>
</form>

<form id="palette-pdf-exporter_form">
  <div class="modal_body">
    <!-- General Tab -->
    <div data-tab="general">
      <!-- Title -->
      <div class="input-group">
        <label for="palette-pdf-exporter_title">Title</label>
        <input type="text" class="input input--m" name="title" id="palette-pdf-exporter_title" autofocus="">
      </div>
      <!-- Description -->
      <div class="input-group _m-b-0">
        <label for="palette-pdf-exporter_description">Description<div class="pro-star"></div></label>
        <textarea class="textarea textarea--m" name="description" id="palette-pdf-exporter_description"></textarea>
      </div>
    </div>
    <!-- Labels Tab -->
    <div data-tab="labels">
      <div class="input-group">
        <label>Colors Label<div class="pro-star"></div></label>
        <input type="text" class="input input--m" name="label" id="palette-pdf-exporter_label">
      </div>
      <div id="palette-pdf-exporter_labels_selector">
        <div class="palette-selector is-selectable">
          <div class="palette-selector_colors">
            <div data-index="0"><span></span><i></i><u></u></div>
            <div data-index="1"><span></span><i></i><u></u></div>
            <div data-index="2"><span></span><i></i><u></u></div>
            <div data-index="3"><span></span><i></i><u></u></div>
            <div data-index="4"><span></span><i></i><u></u></div>
            <div data-index="5"><span></span><i></i><u></u></div>
            <div data-index="6"><span></span><i></i><u></u></div>
            <div data-index="7"><span></span><i></i><u></u></div>
            <div data-index="8"><span></span><i></i><u></u></div>
            <div data-index="9"><span></span><i></i><u></u></div>
          </div>
          <div class="palette-selector_buttons"> <a><i class="icon icon-add-12px"></i></a> <a><i class="icon icon-delete-12px"></i></a> </div>
        </div>
      </div>
    </div>
    <!-- Spaces Tab -->
    <div data-tab="spaces">
      <div class="input-group _m-b-0">
        <label for="palette-pdf-exporter_spaces">Color Spaces</label>
        <div id="palette-pdf-exporter_spaces-container">
          <div class="list-selector is-min"> <input type="text" readonly=""> <select multiple="" tabindex="-1" name="select_40451">
              <option value="HEX" data-id="HEX" data-name="HEX">HEX</option>
              <option value="RGB" data-id="RGB" data-name="RGB">RGB</option>
              <option value="HSB" data-id="HSB" data-name="HSB">HSB</option>
              <option value="CMYK" data-id="CMYK" data-name="CMYK">CMYK</option>
              <option value="LAB" data-id="LAB" data-name="LAB">LAB</option>
              <option value="NAME" data-id="NAME" data-name="Name">Name</option>
              <option value="RAL" data-id="RAL" data-name="RAL">RAL</option>
              <option value="HKS" data-id="HKS" data-name="HKS">HKS</option>
              <option value="COPIC" data-id="COPIC" data-name="Copic">Copic</option>
              <option value="PRISMACOLOR" data-id="PRISMACOLOR" data-name="Prismacolor">Prismacolor</option>
            </select>
            <div class="list-selector_list"><a data-id="HEX" data-name="HEX">

        <div class="list-selector_name">HEX</div>
        
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="RGB" data-name="RGB">

        <div class="list-selector_name">RGB</div>
        
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="HSB" data-name="HSB">

        <div class="list-selector_name">HSB</div>
        
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="CMYK" data-name="CMYK">

        <div class="list-selector_name">CMYK</div>
        
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="LAB" data-name="LAB">

        <div class="list-selector_name">LAB</div>
        
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="NAME" data-name="Name">

        <div class="list-selector_name">Name</div>
        
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="RAL" data-name="RAL">

        <div class="list-selector_name">RAL</div>
        <div class="pro-star _m-l-1"></div>
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="HKS" data-name="HKS">

        <div class="list-selector_name">HKS</div>
        <div class="pro-star _m-l-1"></div>
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="COPIC" data-name="Copic">

        <div class="list-selector_name">Copic</div>
        <div class="pro-star _m-l-1"></div>
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="PRISMACOLOR" data-name="Prismacolor">

        <div class="list-selector_name">Prismacolor</div>
        <div class="pro-star _m-l-1"></div>
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a></div>
            <div class="list-selector_loader">Loading...</div>
            <div class="list-selector_empty">No items</div>
            <div class="list-selector_no-match" style="display: none;">No found</div>
          </div>
        </div>
      </div>
    </div>
    <div data-tab="maps">
      <!-- Maps -->
      <div class="input-group _m-b-0">
        <label for="palette-pdf-exporter_maps">Pages</label>
        <div id="palette-pdf-exporter_maps-container">
          <div class="list-selector is-min"> <input type="text" readonly=""> <select multiple="" tabindex="-1" name="select_60366">
              <option value="COVER" data-id="COVER" data-name="Cover">Cover</option>
              <option value="COLORS" data-id="COLORS" data-name="Colors">Colors</option>
              <option value="SHADES" data-id="SHADES" data-name="Shades">Shades</option>
              <option value="CONTRAST" data-id="CONTRAST" data-name="Contrast">Contrast</option>
              <option value="TEMPERATURE" data-id="TEMPERATURE" data-name="Temperature">Temperature</option>
              <option value="HUE" data-id="HUE" data-name="Hue">Hue</option>
              <option value="SATURATION" data-id="SATURATION" data-name="Saturation">Saturation</option>
              <option value="BLINDNESS" data-id="BLINDNESS" data-name="Color blindness">Color blindness</option>
              <option value="LUMINANCE" data-id="LUMINANCE" data-name="Luminance">Luminance</option>
              <option value="GRADIENT" data-id="GRADIENT" data-name="Gradient">Gradient</option>
            </select>
            <div class="list-selector_list"><a data-id="COVER" data-name="Cover">

        <div class="list-selector_name">Cover</div>
        
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="COLORS" data-name="Colors">

        <div class="list-selector_name">Colors</div>
        
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="SHADES" data-name="Shades">

        <div class="list-selector_name">Shades</div>
        <div class="pro-star _m-l-1"></div>
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="CONTRAST" data-name="Contrast">

        <div class="list-selector_name">Contrast</div>
        <div class="pro-star _m-l-1"></div>
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="TEMPERATURE" data-name="Temperature">

        <div class="list-selector_name">Temperature</div>
        <div class="pro-star _m-l-1"></div>
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="HUE" data-name="Hue">

        <div class="list-selector_name">Hue</div>
        <div class="pro-star _m-l-1"></div>
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="SATURATION" data-name="Saturation">

        <div class="list-selector_name">Saturation</div>
        <div class="pro-star _m-l-1"></div>
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="BLINDNESS" data-name="Color blindness">

        <div class="list-selector_name">Color blindness</div>
        <div class="pro-star _m-l-1"></div>
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="LUMINANCE" data-name="Luminance">

        <div class="list-selector_name">Luminance</div>
        <div class="pro-star _m-l-1"></div>
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="GRADIENT" data-name="Gradient">

        <div class="list-selector_name">Gradient</div>
        <div class="pro-star _m-l-1"></div>
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a></div>
            <div class="list-selector_loader">Loading...</div>
            <div class="list-selector_empty">No items</div>
            <div class="list-selector_no-match" style="display: none;">No found</div>
          </div>
        </div>
      </div>
    </div>
    <!-- Options Tab -->
    <div data-tab="options">
      <div class="input-group _m-b-0">
        <input type="checkbox" class="checkbox" id="palette-pdf-exporter_whitelabel-logo" value="true">
        <label for="palette-pdf-exporter_whitelabel-logo">Use my custom <a href="/account/settings" class="link link--primary link--hover-underlined" target="_blank">logo</a>
          <div class="pro-star _m-l-1"></div>
        </label>
      </div>
    </div>
  </div>
  <!-- Export Button -->
  <div class="modal_footer">
    <div class="modal_footer_btns">
      <button type="submit" class="btn btn--m btn--primary" id="palette-pdf-exporter_submit-btn">Export</button>
    </div>
  </div>
</form>

<form id="palettes-pdf-exporter_form">
  <div class="modal_body">
    <!-- Title -->
    <div class="input-group">
      <label for="palettes-pdf-exporter_title">Title</label>
      <input type="text" class="input input--m" name="title" id="palettes-pdf-exporter_title" autofocus="">
    </div>
    <!-- Description -->
    <div class="input-group _m-b-3">
      <label for="palettes-pdf-exporter_description">Description</label>
      <textarea class="textarea textarea--m" name="description" id="palettes-pdf-exporter_description" style="height:100px"></textarea>
    </div>
    <!-- Whitelabel -->
    <div class="input-group _m-b-0">
      <input type="checkbox" class="checkbox" id="palettes-pdf-exporter_whitelabel-logo" value="true">
      <label for="palettes-pdf-exporter_whitelabel-logo">Use my custom <a href="/account/settings" class="link link--primary link--hover-underlined" target="_blank">logo</a>
        <div class="pro-star _m-l-1"></div>
      </label>
    </div>
  </div>
  <!-- Export Button -->
  <div class="modal_footer">
    <div class="modal_footer_btns">
      <button type="submit" class="btn btn--m btn--primary" id="palettes-pdf-exporter_submit-btn">Export</button>
    </div>
  </div>
</form>

<form id="palette-image-exporter_form">
  <div class="modal_body">
    <!-- General Tab -->
    <div data-tab="general">
      <!-- Title -->
      <div class="input-group">
        <label for="palette-image-exporter_title">Title</label>
        <input type="text" class="input input--m" name="title" id="palette-image-exporter_title" autofocus="">
      </div>
      <!-- Space -->
      <div class="input-group _m-b-0">
        <label for="palette-image-exporter_space">Color Space</label>
        <div id="palette-image-exporter_space">
          <div class="select opens-down select--m" data-id="9875988561228819">
            <div class="select_text">HEX</div>
            <input type="text" class="input input--m select_livesearch" placeholder="Search item...">
            <div class="select_list">
              <div class="list-selector"> <input type="text" readonly=""> <select tabindex="-1" name="select_76654">
                  <option value="NONE" data-id="NONE" data-name="None">None</option>
                  <option value="HEX" data-id="HEX" data-name="HEX">HEX</option>
                  <option value="HSB" data-id="HSB" data-name="HSB">HSB</option>
                  <option value="HSL" data-id="HSL" data-name="HSL">HSL</option>
                  <option value="RGB" data-id="RGB" data-name="RGB">RGB</option>
                  <option value="CMYK" data-id="CMYK" data-name="CMYK">CMYK</option>
                  <option value="LAB" data-id="LAB" data-name="LAB">LAB</option>
                  <option value="NAME" data-id="NAME" data-name="Name">Name</option>
                  <option value="RAL" data-id="RAL" data-name="RAL">RAL</option>
                  <option value="HKS" data-id="HKS" data-name="HKS">HKS</option>
                  <option value="COPIC" data-id="COPIC" data-name="Copic">Copic</option>
                  <option value="PRISMACOLOR" data-id="PRISMACOLOR" data-name="Prismacolor">Prismacolor</option>
                </select>
                <div class="list-selector_list"><a data-id="NONE" data-name="None">

        <div class="list-selector_name">None</div>
        
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="HEX" data-name="HEX" class="is-selected">

        <div class="list-selector_name">HEX</div>
        
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="HSB" data-name="HSB">

        <div class="list-selector_name">HSB</div>
        
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="HSL" data-name="HSL">

        <div class="list-selector_name">HSL</div>
        
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="RGB" data-name="RGB">

        <div class="list-selector_name">RGB</div>
        
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="CMYK" data-name="CMYK">

        <div class="list-selector_name">CMYK</div>
        
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="LAB" data-name="LAB">

        <div class="list-selector_name">LAB</div>
        
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="NAME" data-name="Name">

        <div class="list-selector_name">Name</div>
        
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="RAL" data-name="RAL">

        <div class="list-selector_name">RAL</div>
        <div class="pro-star _m-l-1"></div>
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="HKS" data-name="HKS">

        <div class="list-selector_name">HKS</div>
        <div class="pro-star _m-l-1"></div>
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="COPIC" data-name="Copic">

        <div class="list-selector_name">Copic</div>
        <div class="pro-star _m-l-1"></div>
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="PRISMACOLOR" data-name="Prismacolor">

        <div class="list-selector_name">Prismacolor</div>
        <div class="pro-star _m-l-1"></div>
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a></div>
                <div class="list-selector_loader">Loading...</div>
                <div class="list-selector_empty">No items</div>
                <div class="list-selector_no-match" style="display: none;">No found</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Labels Tab -->
    <div data-tab="labels">
      <div class="input-group">
        <label>Colors Label<div class="pro-star"></div></label>
        <input type="text" class="input input--m" name="label" id="palette-image-exporter_label">
      </div>
      <div id="palette-image-exporter_labels_selector">
        <div class="palette-selector is-selectable">
          <div class="palette-selector_colors">
            <div data-index="0"><span></span><i></i><u></u></div>
            <div data-index="1"><span></span><i></i><u></u></div>
            <div data-index="2"><span></span><i></i><u></u></div>
            <div data-index="3"><span></span><i></i><u></u></div>
            <div data-index="4"><span></span><i></i><u></u></div>
            <div data-index="5"><span></span><i></i><u></u></div>
            <div data-index="6"><span></span><i></i><u></u></div>
            <div data-index="7"><span></span><i></i><u></u></div>
            <div data-index="8"><span></span><i></i><u></u></div>
            <div data-index="9"><span></span><i></i><u></u></div>
          </div>
          <div class="palette-selector_buttons"> <a><i class="icon icon-add-12px"></i></a> <a><i class="icon icon-delete-12px"></i></a> </div>
        </div>
      </div>
    </div>
    <!-- Options Tab -->
    <div data-tab="options">
      <div class="input-group _m-b-0">
        <input type="checkbox" class="checkbox" id="palette-image-exporter_whitelabel-logo" value="true">
        <label for="palette-image-exporter_whitelabel-logo">Use my custom <a href="/account/settings" class="link link--primary link--hover-underlined" target="_blank">logo</a>
          <div class="pro-star _m-l-1"></div>
        </label>
      </div>
    </div>
  </div>
  <!-- Export Button -->
  <div class="modal_footer">
    <div class="modal_footer_btns">
      <button type="submit" class="btn btn--m btn--primary" id="palette-image-exporter_submit-btn">Export</button>
    </div>
  </div>
</form>

<form id="palette-saver_form">
  <div class="modal_body">
    <!-- Info Tab -->
    <div data-tab="info" class="is-visible">
      <!-- Name -->
      <div class="input-group">
        <label for="palette-saver_name">Name</label>
        <input type="text" class="input input--m" placeholder="My new palette" name="name" id="palette-saver_name">
      </div>
      <!-- Description -->
      <div class="input-group">
        <label for="palette-saver_description">Description</label>
        <textarea type="text" class="textarea textarea--m" name="description" id="palette-saver_description" maxlength="300"></textarea>
      </div>
      <!-- Tags -->
      <div class="input-group _m-b-0">
        <label for="palette-saver_tags">Tags</label>
        <div id="palette-saver_tags">
          <div class="multiselect multiselect--m is-allow-custom is-min" data-id="8493223347257646"> <select multiple="" name="multiselect_64177[]"></select>
            <div class="multiselect_added"> <input type="text" class="multiselect_search" placeholder="Add new"> </div>
            <div class="multiselect_select">
              <div class="multiselect_list"><a class="multiselect_custom"></a></div>
              <div class="multiselect_empty">No items</div>
              <div class="multiselect_max">Max 999999 elements.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Projects Tab -->
    <div data-tab="projects">
      <!-- Projects -->
      <div class="input-group">
        <label for="palette-saver_projects">Select projects</label>
        <div id="palette-saver_projects-container">
          <div class="list-selector is-empty is-min"> <input type="text" readonly=""> <select multiple="" tabindex="-1" name="select_32847"></select>
            <div class="list-selector_list"></div>
            <div class="list-selector_loader">Loading...</div>
            <div class="list-selector_empty">No projects yet.</div>
            <div class="list-selector_no-match" style="display: none;">No found</div>
          </div>
        </div>
      </div>
      <!-- New project -->
      <div class="input-group input-size-m _m-b-0">
        <div class="input_help-btn">
          <input type="text" class="input input--m" id="palette-saver_new-project_input" placeholder="New project">
          <a class="btn btn--xs btn--transparent" id="palette-saver_new-project_btn">
                    <span>Add</span>
                  </a>
        </div>
      </div>
    </div>
    <!-- Collections Tab -->
    <div data-tab="collections">
      <!-- Collections -->
      <div class="input-group">
        <label for="palette-saver_collections">Select collections</label>
        <div id="palette-saver_collections-container">
          <div class="list-selector is-empty is-min"> <input type="text" readonly=""> <select multiple="" tabindex="-1" name="select_44719"></select>
            <div class="list-selector_list"></div>
            <div class="list-selector_loader">Loading...</div>
            <div class="list-selector_empty">No collections yet.</div>
            <div class="list-selector_no-match" style="display: none;">No found</div>
          </div>
        </div>
      </div>
      <!-- New collection -->
      <div class="input-group input-size-m _m-b-0">
        <div class="input_help-btn">
          <input type="text" class="input input--m" id="palette-saver_new-collection_input" placeholder="New collection">
          <a class="btn btn--xs btn--transparent" id="palette-saver_new-collection_btn">
                    <span>Add</span>
                  </a>
        </div>
      </div>
    </div>
    <!-- Colors Tab -->
    <div id="palette-saver_colors-container" data-tab="colors">
      <div class="input-group">
        <label for="palette-saver_colors_description_input">Label</label>
        <input type="text" class="input input--m" name="name" id="palette-saver_colors_description_input" maxlength="100">
      </div>
      <div class="input-group">
        <label>Color</label>
        <div id="palette-saver_colors_input">
          <div class="input-color has-color-inspector is-light is-filled"><input type="text" class="input input--m" placeholder="#C2EFB3" spellcheck="false">
            <div class="input-color_preview" data-tooltip="Pick color" style="background: rgb(194, 239, 179);"></div>
            <i class="input-color_hash-icon">#</i>
            <span class="input-color_clear-btn" data-tooltip="Remove color" data-tooltip-container="child"><i class="icon icon-c-remove-16px"></i></span>
          </div>
        </div>
      </div>
      <!-- <div class="input-group">
                <label for="palette-saver_colors_size_input">Size</label>
                <input type="text" class="input input--m" name="name" id="palette-saver_colors_size_input" maxlength="100">
              </div> -->
      <div id="palette-saver_colors_selector">
        <div class="palette-selector has-btns is-selectable is-sortable" data-colors="5">
          <div class="palette-selector_colors">
            <div data-index="0" class="is-light is-visible is-active" style="background-color: rgb(194, 239, 179); color: rgb(194, 239, 179);"><span>#C2EFB3</span><i></i><u></u></div>
            <div data-index="1" class="is-light is-visible" style="background-color: rgb(151, 171, 177); color: rgb(151, 171, 177);"><span>#97ABB1</span><i></i><u></u></div>
            <div data-index="2" class="is-light is-visible" style="background-color: rgb(116, 111, 114); color: rgb(116, 111, 114);"><span>#746F72</span><i></i><u></u></div>
            <div data-index="3" class="is-visible" style="background-color: rgb(115, 95, 61); color: rgb(115, 95, 61);"><span>#735F3D</span><i></i><u></u></div>
            <div data-index="4" class="is-visible" style="background-color: rgb(89, 74, 38); color: rgb(89, 74, 38);"><span>#594A26</span><i></i><u></u></div>
            <div data-index="5"><span></span><i></i><u></u></div>
            <div data-index="6"><span></span><i></i><u></u></div>
            <div data-index="7"><span></span><i></i><u></u></div>
            <div data-index="8"><span></span><i></i><u></u></div>
            <div data-index="9"><span></span><i></i><u></u></div>
          </div>
          <div class="palette-selector_buttons"> <a><i class="icon icon-add-12px"></i></a> <a><i class="icon icon-delete-12px"></i></a> </div>
        </div>
      </div>
    </div>
    <!-- Image Tab -->
    <div data-tab="image">
      <div class="modal_text">Add context to your palette by pairing it with an image.<div class="pro-star _m-l-1"></div>
      </div>
      <div id="palette-saver_image-preview" style="background-image: url(&quot;/assets/img/img_placeholder.jpg&quot;);">
        <div id="palette-saver_image_btns">
          <div class="btn btn--xs btn--over-color btn--inline" id="palette-saver_image_picker-btn" style="display: none;">Use picker image</div>
          <div class="btn btn--xs btn--icon btn--over-color" id="palette-saver_image_browse-btn"><i class="icon icon-upload-24px"></i></div>
          <div class="btn btn--xs btn--icon btn--over-color" id="palette-saver_image_remove-btn" style="display: none;"><i class="icon icon-remove-24px"></i></div>
        </div>
      </div>
    </div>
  </div>
  <!-- Footer -->
  <div class="modal_footer">
    <div class="modal_footer_btns">
      <button type="submit" class="btn btn--m btn--primary" id="palette-saver_save-btn"> Save </button>
    </div>
  </div>
</form>

<form id="project-saver_form">
  <div class="modal_body">
    <!-- Name -->
    <div class="input-group _m-b-0">
      <label for="project-saver_name"> Name <div class="input_errors input_errors--error">
          <div>This field is required</div>
        </div>
      </label>
      <input type="text" class="input input--m" name="name" id="project-saver_name" maxlength="50" placeholder="My new project">
    </div>
    <!-- Private -->
    <div class="input-group _m-b-0 _m-t-3">
      <input type="checkbox" class="checkbox" name="private" id="project-saver_private" value="true">
      <label for="project-saver_private">Private<i class="icon icon-info-16px _m-l-1" data-tooltip-delay="0" data-tooltip="Hide this project and all the contained items from the profile"></i></label>
    </div>
  </div>
  <!-- Footer -->
  <div class="modal_footer">
    <div class="modal_footer_btns">
      <button type="submit" class="btn btn--m btn--primary" id="project-saver_save-btn"> Save </button>
    </div>
  </div>
</form>

<form id="collection-saver_form">
  <div class="modal_body">
    <!-- Name -->
    <div class="input-group _m-b-0">
      <label for="collection-saver_name"> Name <div class="input_errors input_errors--error">
          <div>This field is required</div>
        </div>
      </label>
      <input type="text" class="input input--m" maxlength="50" placeholder="My new collection" name="name" id="collection-saver_name">
    </div>
    <!-- Private -->
    <div class="input-group _m-b-0 _m-t-3">
      <input type="checkbox" class="checkbox" name="private" id="collection-saver_private" value="true">
      <label for="collection-saver_private">Private<i class="icon icon-info-16px _m-l-1" data-tooltip-delay="0" data-tooltip="Hide this collection and all the contained items from the profile"></i></label>
    </div>
  </div>
  <!-- Footer -->
  <div class="modal_footer">
    <div class="modal_footer_btns">
      <button type="submit" class="btn btn--m btn--primary" id="collection-saver_save-btn"> Save </button>
    </div>
  </div>
</form>

<form id="color-saver_form">
  <div class="modal_body">
    <!-- Name -->
    <div class="input-group">
      <label for="color-saver_name">Name</label>
      <input type="text" class="input input--m" placeholder="My new color" name="name" id="color-saver_name">
    </div>
    <!-- Color -->
    <div class="input-group _m-b-0">
      <label for="color-saver_color"> Color <div class="input_errors input_errors--error">
          <div>This field is required</div>
          <div>Color already saved</div>
        </div>
      </label>
      <div class="input-color has-color-inspector is-filled"><input type="text" class="input input--m" name="color" id="color-saver_color" spellcheck="false" placeholder="#323EEF">
        <div class="input-color_preview" data-tooltip="Pick color" style="background: rgb(50, 62, 239);"></div>
        <i class="input-color_hash-icon">#</i>
        <span class="input-color_clear-btn" data-tooltip="Remove color" data-tooltip-container="child"><i class="icon icon-c-remove-16px"></i></span>
      </div>
    </div>
  </div>
  <!-- Footer -->
  <div class="modal_footer">
    <div class="modal_footer_btns">
      <button type="submit" class="btn btn--m btn--primary" id="color-saver_save-btn"> Save </button>
    </div>
  </div>
</form>

<form id="gradient-saver_form">
  <div class="modal_body">
    <div data-tab="info" class="is-visible">
      <!-- Name -->
      <div class="input-group">
        <label for="gradient-saver_name">Name</label>
        <input type="text" class="input input--m" placeholder="My new gradient" name="name" id="gradient-saver_name">
      </div>
      <!-- Description -->
      <div class="input-group">
        <label for="gradient-saver_description">Description</label>
        <textarea type="text" class="textarea textarea--m" name="description" id="gradient-saver_description" maxlength="300"></textarea>
      </div>
      <!-- Tags -->
      <div class="input-group _m-b-0">
        <label for="gradient-saver_tags">Tags</label>
        <div id="gradient-saver_tags">
          <div class="multiselect multiselect--m is-allow-custom is-min" data-id="51729726566536"> <select multiple="" name="multiselect_17135[]"></select>
            <div class="multiselect_added"> <input type="text" class="multiselect_search" placeholder="Add new"> </div>
            <div class="multiselect_select">
              <div class="multiselect_list"><a class="multiselect_custom"></a></div>
              <div class="multiselect_empty">No items</div>
              <div class="multiselect_max">Max 999999 elements.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div data-tab="colors">
      <div class="input-group">
        <label>Preview</label>
        <div id="gradient-saver_preview" style="background: linear-gradient(90deg, rgb(227, 181, 5) 0%, rgb(149, 25, 12) 25%, rgb(97, 3, 69) 50%, rgb(16, 126, 125) 75%, rgb(4, 75, 127) 100%);"></div>
      </div>
      <div class="input-group">
        <label>Colors</label>
        <div id="gradient-saver_colors_input">
          <div class="input-color has-color-inspector is-light is-filled"><input type="text" class="input input--m" placeholder="#E3B505" spellcheck="false">
            <div class="input-color_preview" data-tooltip="Pick color" style="background: rgb(227, 181, 5);"></div>
            <i class="input-color_hash-icon">#</i>
            <span class="input-color_clear-btn" data-tooltip="Remove color" data-tooltip-container="child"><i class="icon icon-c-remove-16px"></i></span>
          </div>
        </div>
      </div>
      <div id="gradient-saver_colors_selector">
        <div class="palette-selector has-btns is-selectable is-sortable" data-colors="5">
          <div class="palette-selector_colors">
            <div data-index="0" class="is-light is-visible is-active" style="background-color: rgb(227, 181, 5); color: rgb(227, 181, 5);"><span>#E3B505</span><i></i><u></u></div>
            <div data-index="1" class="is-visible" style="background-color: rgb(149, 25, 12); color: rgb(149, 25, 12);"><span>#95190C</span><i></i><u></u></div>
            <div data-index="2" class="is-visible" style="background-color: rgb(97, 3, 69); color: rgb(97, 3, 69);"><span>#610345</span><i></i><u></u></div>
            <div data-index="3" class="is-visible" style="background-color: rgb(16, 126, 125); color: rgb(16, 126, 125);"><span>#107E7D</span><i></i><u></u></div>
            <div data-index="4" class="is-visible" style="background-color: rgb(4, 75, 127); color: rgb(4, 75, 127);"><span>#044B7F</span><i></i><u></u></div>
            <div data-index="5"><span></span><i></i><u></u></div>
            <div data-index="6"><span></span><i></i><u></u></div>
            <div data-index="7"><span></span><i></i><u></u></div>
            <div data-index="8"><span></span><i></i><u></u></div>
            <div data-index="9"><span></span><i></i><u></u></div>
          </div>
          <div class="palette-selector_buttons"> <a><i class="icon icon-add-12px"></i></a> <a><i class="icon icon-delete-12px"></i></a> </div>
        </div>
      </div>
    </div>
    <!-- Projects Tab -->
    <div data-tab="projects">
      <!-- Projects -->
      <div class="input-group">
        <label for="gradient-saver_projects">Select projects</label>
        <div id="gradient-saver_projects-container">
          <div class="list-selector is-empty is-min"> <input type="text" readonly=""> <select multiple="" tabindex="-1" name="select_41444"></select>
            <div class="list-selector_list"></div>
            <div class="list-selector_loader">Loading...</div>
            <div class="list-selector_empty">No projects yet.</div>
            <div class="list-selector_no-match" style="display: none;">No found</div>
          </div>
        </div>
      </div>
      <!-- New project -->
      <div class="input-group input-size-m _m-b-0">
        <div class="input_help-btn">
          <input type="text" class="input input--m" id="gradient-saver_new-project_input" placeholder="New project">
          <a class="btn btn--xs btn--transparent" id="gradient-saver_new-project_btn">
                    <span>Add</span>
                  </a>
        </div>
      </div>
    </div>
    <!-- Collections Tab -->
    <div data-tab="collections">
      <!-- Collections -->
      <div class="input-group">
        <label for="gradient-saver_collections">Select collections</label>
        <div id="gradient-saver_collections-container">
          <div class="list-selector is-empty is-min"> <input type="text" readonly=""> <select multiple="" tabindex="-1" name="select_47635"></select>
            <div class="list-selector_list"></div>
            <div class="list-selector_loader">Loading...</div>
            <div class="list-selector_empty">No collections yet.</div>
            <div class="list-selector_no-match" style="display: none;">No found</div>
          </div>
        </div>
      </div>
      <!-- New collection -->
      <div class="input-group input-size-m _m-b-0">
        <div class="input_help-btn">
          <input type="text" class="input input--m" id="gradient-saver_new-collection_input" placeholder="New collection">
          <a class="btn btn--xs btn--transparent" id="gradient-saver_new-collection_btn">
                    <span>Add</span>
                  </a>
        </div>
      </div>
    </div>
  </div>
  <!-- Footer -->
  <div class="modal_footer">
    <div class="modal_footer_btns">
      <button type="submit" class="btn btn--m btn--primary" id="gradient-saver_save-btn"> Save </button>
    </div>
  </div>
</form>

<form id="image-browser_url_form">
  <div class="input-group">
    <label for="image-browser-url"> Image URL <div class="input_errors input_errors--error">
        <div>This field is required</div>
      </div>
    </label>
    <input type="text" class="input input--m" id="image-browser_url_input" placeholder="https://">
  </div>
  <button type="submit" class="btn btn--m btn--primary" id="image-browser_url_ok-btn">OK</button>
</form>

POST accept_terms

<form id="modal-terms_form" method="post" action="accept_terms">
  <div class="modal_footer_btns">
    <button type="submit" class="btn btn--m btn--primary">I accept</button>
  </div>
</form>

<form id="color-image-exporter_form">
  <div class="modal_body">
    <!-- Title -->
    <div class="input-group">
      <label for="color-image-exporter_title">Title</label>
      <input type="text" class="input input--m" name="title" id="color-image-exporter_title" autofocus="">
    </div>
    <!-- Space -->
    <div class="input-group">
      <label for="color-image-exporter_space">Space</label>
      <div id="color-image-exporter_space">
        <div class="select opens-down select--m" data-id="12798747378440134">
          <div class="select_text">HEX</div>
          <input type="text" class="input input--m select_livesearch" placeholder="Search item...">
          <div class="select_list">
            <div class="list-selector"> <input type="text" readonly=""> <select tabindex="-1" name="select_23424">
                <option value="NONE" data-id="NONE" data-name="None">None</option>
                <option value="HEX" data-id="HEX" data-name="HEX">HEX</option>
                <option value="HSB" data-id="HSB" data-name="HSB">HSB</option>
                <option value="HSL" data-id="HSL" data-name="HSL">HSL</option>
                <option value="RGB" data-id="RGB" data-name="RGB">RGB</option>
                <option value="CMYK" data-id="CMYK" data-name="CMYK">CMYK</option>
                <option value="LAB" data-id="LAB" data-name="LAB">LAB</option>
              </select>
              <div class="list-selector_list"><a data-id="NONE" data-name="None">

        <div class="list-selector_name">None</div>
        
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="HEX" data-name="HEX" class="is-selected">

        <div class="list-selector_name">HEX</div>
        
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="HSB" data-name="HSB">

        <div class="list-selector_name">HSB</div>
        
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="HSL" data-name="HSL">

        <div class="list-selector_name">HSL</div>
        
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="RGB" data-name="RGB">

        <div class="list-selector_name">RGB</div>
        
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="CMYK" data-name="CMYK">

        <div class="list-selector_name">CMYK</div>
        
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="LAB" data-name="LAB">

        <div class="list-selector_name">LAB</div>
        
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a></div>
              <div class="list-selector_loader">Loading...</div>
              <div class="list-selector_empty">No items</div>
              <div class="list-selector_no-match" style="display: none;">No found</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Library -->
    <div class="input-group _m-b-3">
      <label for="color-image-exporter_library">Library</label>
      <div id="color-image-exporter_library">
        <div class="select opens-down select--m" data-id="8202741744824231">
          <div class="select_text">Name</div>
          <input type="text" class="input input--m select_livesearch" placeholder="Search item...">
          <div class="select_list">
            <div class="list-selector"> <input type="text" readonly=""> <select tabindex="-1" name="select_16916">
                <option value="NONE" data-id="NONE" data-name="None">None</option>
                <option value="NAME" data-id="NAME" data-name="Name">Name</option>
                <option value="RAL" data-id="RAL" data-name="RAL">RAL</option>
                <option value="HKS" data-id="HKS" data-name="HKS">HKS</option>
                <option value="COPIC" data-id="COPIC" data-name="Copic">Copic</option>
                <option value="PRISMACOLOR" data-id="PRISMACOLOR" data-name="Prismacolor">Prismacolor</option>
              </select>
              <div class="list-selector_list"><a data-id="NONE" data-name="None">

        <div class="list-selector_name">None</div>
        
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="NAME" data-name="Name" class="is-selected">

        <div class="list-selector_name">Name</div>
        
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="RAL" data-name="RAL">

        <div class="list-selector_name">RAL</div>
        
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="HKS" data-name="HKS">

        <div class="list-selector_name">HKS</div>
        
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="COPIC" data-name="Copic">

        <div class="list-selector_name">Copic</div>
        
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a><a data-id="PRISMACOLOR" data-name="Prismacolor">

        <div class="list-selector_name">Prismacolor</div>
        
        <div class="list-selector_small-text"></div>
        <i class="list-selector_check-icon icon icon-check-12px"></i>
        <i class="list-selector_more-btn icon icon-dots-24px"></i>
      </a></div>
              <div class="list-selector_loader">Loading...</div>
              <div class="list-selector_empty">No items</div>
              <div class="list-selector_no-match" style="display: none;">No found</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Whitelabel -->
    <div class="input-group _m-b-0">
      <input type="checkbox" class="checkbox" id="color-image-exporter_whitelabel-logo" value="true">
      <label for="color-image-exporter_whitelabel-logo">Use my custom <a href="/account/settings" class="link link--primary link--hover-underlined" target="_blank">logo</a>
        <div class="pro-star _m-l-1"></div>
      </label>
    </div>
  </div>
  <!-- Export Button -->
  <div class="modal_footer">
    <div class="modal_footer_btns">
      <button type="submit" class="btn btn--m btn--primary" id="color-image-exporter_submit-btn">Export</button>
    </div>
  </div>
</form>

<form id="project-selector_form">
  <div class="modal_body">
    <!-- Projects -->
    <div class="input-group">
      <label for="project-selector_projects">Projects</label>
      <div id="project-selector_projects-select">
        <div class="select opens-down select--m" data-id="6878464615721247">
          <div class="select_text">Select project...</div>
          <input type="text" class="input input--m select_livesearch" placeholder="Search item...">
          <div class="select_list">
            <div class="list-selector is-empty"> <input type="text" readonly=""> <select tabindex="-1" name="select_91987"></select>
              <div class="list-selector_list"></div>
              <div class="list-selector_loader">Loading...</div>
              <div class="list-selector_empty">No items</div>
              <div class="list-selector_no-match" style="display: none;">No found</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- New project -->
    <div class="input-group input-size-m _m-b-0">
      <label for="project-selector_projects">New project</label>
      <input type="text" class="input input--m" id="project-selector_new-project_input">
    </div>
  </div>
  <!-- Footer -->
  <div class="modal_footer">
    <div class="modal_footer_btns">
      <button type="submit" class="btn btn--m btn--primary" id="project-selector_ok-btn">OK</button>
    </div>
  </div>
</form>

<form id="collection-selector_form">
  <div class="modal_body">
    <!-- Collections -->
    <div class="input-group">
      <label for="collection-selector_collections">Collections</label>
      <div id="collection-selector_collections-select">
        <div class="select opens-down select--m" data-id="890250773705431">
          <div class="select_text">Select collection...</div>
          <input type="text" class="input input--m select_livesearch" placeholder="Search item...">
          <div class="select_list">
            <div class="list-selector is-empty"> <input type="text" readonly=""> <select tabindex="-1" name="select_39507"></select>
              <div class="list-selector_list"></div>
              <div class="list-selector_loader">Loading...</div>
              <div class="list-selector_empty">No items</div>
              <div class="list-selector_no-match" style="display: none;">No found</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- New collection -->
    <div class="input-group input-size-m _m-b-0">
      <label for="collection-selector_collections">New collection</label>
      <input type="text" class="input input--m" id="collection-selector_new-collection_input">
    </div>
  </div>
  <!-- Footer -->
  <div class="modal_footer">
    <div class="modal_footer_btns">
      <button type="submit" class="btn btn--m btn--primary" id="collection-selector_ok-btn">OK</button>
    </div>
  </div>
</form>

POST check-coupon

<form id="coupon_form" method="post" action="check-coupon">
  <!-- Coupon -->
  <div class="input-group">
    <label for="coupon_code"> Coupon code <div class="input_errors input_errors--error">
        <div>This field is required</div>
        <div>This coupon is not valid.</div>
        <div>This coupon has expired.</div>
        <div>This coupon has been already used.</div>
      </div>
    </label>
    <input type="text" class="input input--m" name="code" id="coupon_code">
  </div>
  <!-- Submit Button -->
  <button type="submit" class="btn btn--m btn--primary" id="coupon_submit-btn">Apply</button>
</form>

<form id="credit-card_form">
  <div class="_m-b-3">
    <div id="credit-card_elements" class="_m-b-1"></div>
    <div id="credit-card_errors"></div>
  </div>
  <button type="submit" class="btn btn--m btn--primary" id="credit-card_submit-btn">Confirm</button>
</form>

<form id="palette-quicklink_form">
  <div class="modal_body">
    <div class="modal_text">Share a palette quickly with your clients or collegues, including title and descriptions.</div>
    <!-- Info Tab -->
    <div data-tab="info" class="is-visible">
      <!-- Name -->
      <div class="input-group">
        <label for="palette-quicklink_name">Name</label>
        <input type="text" class="input input--m" placeholder="My new palette" name="name" id="palette-quicklink_name">
      </div>
      <!-- Description -->
      <div class="input-group _m-b-0">
        <label for="palette-quicklink_description">Description<div class="pro-star"></div></label>
        <textarea type="text" class="textarea textarea--m" name="description" id="palette-quicklink_description" maxlength="300"></textarea>
      </div>
    </div>
    <!-- Colors Tab -->
    <div id="palette-quicklink_colors-container" data-tab="colors">
      <div class="input-group">
        <label>Label<div class="pro-star"></div></label>
        <input type="text" class="input input--m" name="name" id="palette-quicklink_colors_description_input" maxlength="100">
      </div>
      <div class="input-group">
        <label>Color</label>
        <div id="palette-quicklink_colors_input">
          <div class="input-color has-color-inspector is-light is-filled"><input type="text" class="input input--m" placeholder="#9AD5CA" spellcheck="false">
            <div class="input-color_preview" data-tooltip="Pick color" style="background: rgb(154, 213, 202);"></div>
            <i class="input-color_hash-icon">#</i>
            <span class="input-color_clear-btn" data-tooltip="Remove color" data-tooltip-container="child"><i class="icon icon-c-remove-16px"></i></span>
          </div>
        </div>
      </div>
      <div id="palette-quicklink_colors_selector">
        <div class="palette-selector has-btns is-selectable is-sortable" data-colors="5">
          <div class="palette-selector_colors">
            <div data-index="0" class="is-light is-visible is-active" style="background-color: rgb(154, 213, 202); color: rgb(154, 213, 202);"><span>#9AD5CA</span><i></i><u></u></div>
            <div data-index="1" class="is-light is-visible" style="background-color: rgb(172, 221, 231); color: rgb(172, 221, 231);"><span>#ACDDE7</span><i></i><u></u></div>
            <div data-index="2" class="is-light is-visible" style="background-color: rgb(173, 185, 227); color: rgb(173, 185, 227);"><span>#ADB9E3</span><i></i><u></u></div>
            <div data-index="3" class="is-light is-visible" style="background-color: rgb(163, 121, 201); color: rgb(163, 121, 201);"><span>#A379C9</span><i></i><u></u></div>
            <div data-index="4" class="is-light is-visible" style="background-color: rgb(183, 68, 184); color: rgb(183, 68, 184);"><span>#B744B8</span><i></i><u></u></div>
            <div data-index="5"><span></span><i></i><u></u></div>
            <div data-index="6"><span></span><i></i><u></u></div>
            <div data-index="7"><span></span><i></i><u></u></div>
            <div data-index="8"><span></span><i></i><u></u></div>
            <div data-index="9"><span></span><i></i><u></u></div>
          </div>
          <div class="palette-selector_buttons"> <a><i class="icon icon-add-12px"></i></a> <a><i class="icon icon-delete-12px"></i></a> </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Footer -->
  <div class="modal_footer">
    <div class="modal_footer_btns">
      <button type="submit" class="btn btn--m btn--primary" id="palette-quicklink_save-btn"> Get link </button>
    </div>
  </div>
</form>

<form id="work-saver_form">
  <div class="modal_body">
    <!-- Image Tab -->
    <div data-tab="image">
      <div id="work-saver_image_variants">
        <label>Variants</label>
        <div>
          <a>1</a>
          <a>2</a>
          <a>3</a>
          <a>4</a>
        </div>
      </div>
      <!-- Image Dropzone -->
      <div id="work-saver_image-dropzone"></div>
      <div id="work-saver_image-loader">
        <div class="spinner spinner--l spinner--auto spinner--center"></div>
      </div>
      <div id="work-saver_image-picker"></div>
    </div>
    <!-- Info Tab -->
    <div data-tab="info">
      <!-- Name -->
      <div class="input-group">
        <label for="work-saver_name"> Title <div class="input_errors input_errors--error">
            <div>This field is required</div>
          </div>
        </label>
        <input type="text" class="input input--m" placeholder="New awesome work" name="name" id="work-saver_name">
      </div>
      <!-- Description -->
      <div class="input-group _m-b-0">
        <label for="work-saver_description"> Description <div class="input_errors input_errors--error">
            <div>This field is required</div>
          </div>
        </label>
        <div id="work-saver_description"></div>
      </div>
    </div>
    <!-- Tags Tab -->
    <div data-tab="tags">
      <!-- Creative Fields -->
      <div class="input-group">
        <label for="work-saver_fields"> Creative fields <div class="input_errors input_errors--error">
            <div>This field is required</div>
          </div>
        </label>
        <div id="work-saver_fields"></div>
      </div>
      <!-- Tools -->
      <div class="input-group">
        <label for="work-saver_tools">Tools</label>
        <div id="work-saver_tools"></div>
      </div>
      <!-- Tags -->
      <div class="input-group _m-b-0">
        <label for="work-saver_tags">Tags</label>
        <div id="work-saver_tags"></div>
      </div>
    </div>
    <!-- Options Tab -->
    <div data-tab="options">
      <!-- Cover -->
      <!-- <div class="input-group">
                <label for="work-saver_cover">Cover image</label>
                <div id="work-saver_cover"></div>
              </div> -->
      <!-- Private -->
      <div class="input-group _m-b-0">
        <input type="checkbox" class="checkbox" name="private" id="work-saver_private" value="true">
        <label for="work-saver_private">Private<i class="icon icon-info-16px _m-l-1" data-tooltip-delay="0" data-tooltip="Keep this work private"></i></label>
      </div>
    </div>
  </div>
  <!-- Footer -->
  <div class="modal_footer">
    <div class="modal_footer_btns">
      <button type="submit" class="btn btn--m btn--primary" id="work-saver_save-btn"></button>
    </div>
  </div>
</form>

<form id="font-saver_form">
  <div class="modal_body">
    <div data-tab="font">
      <!-- Font Preview -->
      <div class="input-group _m-b-0">
        <div id="font-saver_font-preview"><img src="/assets/img/google_fonts_linear/Aladin.png"></div>
        <div id="font-saver_font-select"></div>
      </div>
    </div>
    <div data-tab="info" class="is-visible">
      <!-- Name -->
      <div class="input-group">
        <label for="font-saver_name">Name</label>
        <input type="text" class="input input--m" placeholder="Aladin" name="name" id="font-saver_name">
      </div>
      <!-- Description -->
      <div class="input-group">
        <label for="font-saver_description">Description</label>
        <textarea type="text" class="textarea textarea--m" name="description" id="font-saver_description" maxlength="300"></textarea>
      </div>
      <!-- Tags -->
      <div class="input-group _m-b-0">
        <label for="font-saver_tags">Tags</label>
        <div id="font-saver_tags">
          <div class="multiselect multiselect--m is-allow-custom is-min" data-id="443522876167048"> <select multiple="" name="multiselect_27005[]"></select>
            <div class="multiselect_added"> <input type="text" class="multiselect_search" placeholder="Add new"> </div>
            <div class="multiselect_select">
              <div class="multiselect_list"><a class="multiselect_custom"></a></div>
              <div class="multiselect_empty">No items</div>
              <div class="multiselect_max">Max 999999 elements.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Projects Tab -->
    <div data-tab="projects">
      <!-- Projects -->
      <div class="input-group">
        <label for="font-saver_projects">Select projects</label>
        <div id="font-saver_projects-container">
          <div class="list-selector is-empty is-min"> <input type="text" readonly=""> <select multiple="" tabindex="-1" name="select_58863"></select>
            <div class="list-selector_list"></div>
            <div class="list-selector_loader">Loading...</div>
            <div class="list-selector_empty">No projects yet.</div>
            <div class="list-selector_no-match" style="display: none;">No found</div>
          </div>
        </div>
      </div>
      <!-- New project -->
      <div class="input-group input-size-m _m-b-0">
        <div class="input_help-btn">
          <input type="text" class="input input--m" id="font-saver_new-project_input" placeholder="New project">
          <a class="btn btn--xs btn--transparent" id="font-saver_new-project_btn">
                    <span>Add</span>
                  </a>
        </div>
      </div>
    </div>
    <!-- Collections Tab -->
    <div data-tab="collections">
      <!-- Collections -->
      <div class="input-group">
        <label for="font-saver_collections">Select collections</label>
        <div id="font-saver_collections-container">
          <div class="list-selector is-empty is-min"> <input type="text" readonly=""> <select multiple="" tabindex="-1" name="select_82334"></select>
            <div class="list-selector_list"></div>
            <div class="list-selector_loader">Loading...</div>
            <div class="list-selector_empty">No collections yet.</div>
            <div class="list-selector_no-match" style="display: none;">No found</div>
          </div>
        </div>
      </div>
      <!-- New collection -->
      <div class="input-group input-size-m _m-b-0">
        <div class="input_help-btn">
          <input type="text" class="input input--m" id="font-saver_new-collection_input" placeholder="New collection">
          <a class="btn btn--xs btn--transparent" id="font-saver_new-collection_btn">
                    <span>Add</span>
                  </a>
        </div>
      </div>
    </div>
  </div>
  <!-- Footer -->
  <div class="modal_footer">
    <div class="modal_footer_btns">
      <button type="submit" class="btn btn--m btn--primary" id="font-saver_save-btn"> Save </button>
    </div>
  </div>
</form>

<form id="palette-parser_form">
  <div class="modal_body">
    <!-- Label -->
    <div class="input-group _m-b-0">
      <label for="palette-parser_value"> Coolors URL / String / Array <div class="input_errors input_errors--error">
          <div>This field is required</div>
          <div>No colors found</div>
        </div>
      </label>
      <input type="text" class="input input--m" name="value" id="palette-parser_value" placeholder="https://coolors.co/00ff00-aabbcc">
    </div>
  </div>
  <!-- Footer -->
  <div class="modal_footer">
    <div class="modal_footer_btns">
      <button type="submit" class="btn btn--m btn--primary" id="palette-parser_submit-btn"> OK </button>
    </div>
  </div>
</form>

<form id="image-saver_form">
  <div class="modal_body">
    <!-- Info Tab -->
    <div data-tab="info" class="is-visible">
      <!-- Name -->
      <div class="input-group">
        <label for="image-saver_name">Name</label>
        <input type="text" class="input input--m" placeholder="My new palette" name="name" id="image-saver_name">
      </div>
      <!-- Description -->
      <div class="input-group">
        <label for="image-saver_description">Description</label>
        <textarea type="text" class="textarea textarea--m" name="description" id="image-saver_description" maxlength="300"></textarea>
      </div>
      <!-- Tags -->
      <div class="input-group _m-b-0">
        <label for="image-saver_tags">Tags</label>
        <div id="image-saver_tags">
          <div class="multiselect multiselect--m is-allow-custom is-min" data-id="31737140063770064"> <select multiple="" name="multiselect_64607[]"></select>
            <div class="multiselect_added"> <input type="text" class="multiselect_search" placeholder="Add new"> </div>
            <div class="multiselect_select">
              <div class="multiselect_list"><a class="multiselect_custom"></a></div>
              <div class="multiselect_empty">No items</div>
              <div class="multiselect_max">Max 999999 elements.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Projects Tab -->
    <div data-tab="projects">
      <!-- Projects -->
      <div class="input-group">
        <label for="image-saver_projects">Select projects</label>
        <div id="image-saver_projects-container">
          <div class="list-selector is-empty is-min"> <input type="text" readonly=""> <select multiple="" tabindex="-1" name="select_83628"></select>
            <div class="list-selector_list"></div>
            <div class="list-selector_loader">Loading...</div>
            <div class="list-selector_empty">No projects yet.</div>
            <div class="list-selector_no-match" style="display: none;">No found</div>
          </div>
        </div>
      </div>
      <!-- New project -->
      <div class="input-group input-size-m _m-b-0">
        <div class="input_help-btn">
          <input type="text" class="input input--m" id="image-saver_new-project_input" placeholder="New project">
          <a class="btn btn--xs btn--transparent" id="image-saver_new-project_btn">
                    <span>Add</span>
                  </a>
        </div>
      </div>
    </div>
    <!-- Collections Tab -->
    <div data-tab="collections">
      <!-- Collections -->
      <div class="input-group">
        <label for="image-saver_collections">Select collections</label>
        <div id="image-saver_collections-container">
          <div class="list-selector is-empty is-min"> <input type="text" readonly=""> <select multiple="" tabindex="-1" name="select_60401"></select>
            <div class="list-selector_list"></div>
            <div class="list-selector_loader">Loading...</div>
            <div class="list-selector_empty">No collections yet.</div>
            <div class="list-selector_no-match" style="display: none;">No found</div>
          </div>
        </div>
      </div>
      <!-- New collection -->
      <div class="input-group input-size-m _m-b-0">
        <div class="input_help-btn">
          <input type="text" class="input input--m" id="image-saver_new-collection_input" placeholder="New collection">
          <a class="btn btn--xs btn--transparent" id="image-saver_new-collection_btn">
                    <span>Add</span>
                  </a>
        </div>
      </div>
    </div>
    <!-- Image Tab -->
    <div data-tab="image">
      <div id="image-saver_image-preview" style="background-image: url(&quot;/assets/img/img_placeholder.jpg&quot;);">
        <div id="image-saver_image_btns">
          <div class="btn btn--xs btn--icon btn--over-color" id="image-saver_image_browse-btn"><i class="icon icon-upload-24px"></i></div>
        </div>
      </div>
    </div>
  </div>
  <!-- Footer -->
  <div class="modal_footer">
    <div class="modal_footer_btns">
      <button type="submit" class="btn btn--m btn--primary" id="image-saver_save-btn"> Save </button>
    </div>
  </div>
</form>

Text Content

 * Tools
    * Palette Generator Create your palettes in seconds
    * Explore Palettes Browse millions of trending color schemes
    * Image Picker Get beautiful palettes from your photos
    * Contrast Checker Check the contrast between two colors
    * Palette Visualizer
      New
      Preview your colors on real designs
   
   
      
    * List of colorsNew
    * Browse Gradients
    * Create a Gradient
    * Make a Gradient Palette
    * Color Picker
    * Collage Maker
    * List of Fonts
    * Image Converter
    * Apps
    * iOS App
    * Android App
    * Figma Plugin
    * Adobe ExtensionNew
      
      

   
   
 * Go Pro
 * 
 * Sign in
 * Sign up
 *  * Dashboard
    * 
    * Profile
    * Account
    * Sign out


Chatbolt.ai Create your own ChatGPT chatbot trained with your data from any file
or website. try it for free


 * Palette Generator
 * Explore Palettes
 * Image Picker
 * Contrast Checker
 * List of FontsNew

 * Other tools
 * List of colorsNew
 * Browse Gradients
 * Create a Gradient
 * Make a Gradient Palette
 * Color Picker
 * Collage Maker
 * Image Converter

 * Jobs
 * Job Board
 * Post a Job

 * Apps
 * iOS App
 * Android App
 * Figma Plugin
   
 * Chrome Extension
 * Instagram Page

 * Account
 * Sign in
 * Sign up
 * Go Pro

 * Account
 * Dashboard
 * Profile
 * Account
 * Go Pro
 * Sign out


ROHAN CLARKE

Fynix.io is an innovative WhatsApp chatbot designed to streamline the
appointment booking process for businesses and their customers. By leveraging
the convenience of WhatsApp, Fynix.io allows users to schedule, manage, and
confirm appointments with ease, improving customer experience and operational
efficiency. This intuitive platform automates appointment reminders,
rescheduling, and cancellations, ensuring smooth communication and reducing
administrative workloads for businesses.

No palettes yet.
Load more

 * Tools
 * Generate your palettes
 * Explore popular palettes
 * Extract palette from image
 * Contrast checker
 * Preview palettes on designs
 * Recolor your own design
 * Color picker
 * Browse free fonts

 * More
 * List of colorsNew
 * Browse gradients
 * Create a gradient
 * Make a gradient palette
 * Image converter
 * Create a collage
 * Font Generator
   

 * Jobs
 * Find your next job
 * Post a job
 * Apps
 * iOS App
 * Android App
 * Figma Plugin
 * Adobe ExtensionNew
 * Chrome Extension
 * Instagram Page

 * Company
 * Pricing
 * License
 * Terms of service
 * Privacy policy
 * Cookie policy
 * Manage cookies
 * Help center
 * Advertise
 * Affiliate
 * Contact
   

© Coolors by Fabrizio Bianchi. From a creative to all the others.
 * 
 * 
 * 
 * 
 * 


SIGN IN

Sign in with your email here.

Sign in
By continuing, you agree to our Terms of Service.
Read our Privacy Policy.
Forgot password? Reset
Don't have an account? Sign up


SIGN UP

Create a free account with your email.

Create your free account
By continuing, you agree to our Terms of Service.
Read our Privacy Policy.
Already have an account? Sign in


YOU'RE ALL SET!

We're thrilled to have you on board!
Enjoy Coolors!
Okay
Reset password
Enter your email address below and choose a new password.
Email / Username
This field is required
This email is not registered
Choose a new password
This field is required
Min 8 characters

Send reset link
Back to Sign in
Color code
Color code
This field is required
The code is not valid.
This code has been already used.
This code has expired.
Too many attempts. Try again in 1 minute.

#
Email not received? Send again
Do you need help? Contact us

Export Palette
URL Share PDF Image CSS ASE SVG Code Embed Facebook Twitter Pinterest
Export palette as PDF
 * General
 * Labels
 * Spaces
 * Pages
 * Options

Title
Description

Colors Label


Color Spaces
HEXRGBHSBCMYKLABNameRALHKSCopicPrismacolor
HEX

RGB

HSB

CMYK

LAB

Name

RAL


HKS


Copic


Prismacolor


Loading...
No items
No found
Pages
CoverColorsShadesContrastTemperatureHueSaturationColor
blindnessLuminanceGradient
Cover

Colors

Shades


Contrast


Temperature


Hue


Saturation


Color blindness


Luminance


Gradient


Loading...
No items
No found
Use my custom logo

Export
Export as PDF
Title
Description
Use my custom logo

Export
Export palette as image
 * General
 * Labels
 * Options

Title
Color Space
HEX
NoneHEXHSBHSLRGBCMYKLABNameRALHKSCopicPrismacolor
None

HEX

HSB

HSL

RGB

CMYK

LAB

Name

RAL


HKS


Copic


Prismacolor


Loading...
No items
No found
Colors Label


Use my custom logo

Export
Save Palette
 * Info
 * Colors
 * Projects
 * Collections
 * ImageNEW

Name
Description
Tags
No items
Max 999999 elements.
Select projects
Loading...
No projects yet.
No found
Add
Select collections
Loading...
No collections yet.
No found
Add
Label
Color

#
#C2EFB3
#97ABB1
#746F72
#735F3D
#594A26






Add context to your palette by pairing it with an image.

Use picker image


Save
Name
This field is required
Private
Save
Name
This field is required
Private
Save
New color
Name
Color
This field is required
Color already saved

#
Save
Save gradient
 * Info
 * Colors
 * Projects
 * Collections

Name
Description
Tags
No items
Max 999999 elements.
Preview

Colors

#
#E3B505
#95190C
#610345
#107E7D
#044B7F






Select projects
Loading...
No projects yet.
No found
Add
Select collections
Loading...
No collections yet.
No found
Add
Save
Select image
 * Upload
 * URL
 * Camera
 * Stock

Browse or drop image
Wrong file type or size (max 10 MB).

Image URL
This field is required
OK
No photos found.
Not available. Please try later.
Allow access to your camera...
Camera not available.
Not supported by your device.
Camera access denied.
Retake
Use this photo
Take
Image picker
Next

Collage maker
Export

 * Layout
 * Aspect
 * Palette

Share palette
Facebook Twitter Pinterest
What's new
Save imagesGradientsPro MembershipNew Explore PageAndroid & FigmaPalettes
DashboardNew Profile Page


Howdy!
Thank you so much for getting here! I’m Fabrizio, creator and maintainer of
Coolors. I’d really love to get in touch with you to hear your feedback or just
say hello! 😃
Reach me on

New terms available

We updated our Terms and Privacy.
Please read them and accept to continue.

I accept
Download Copy
Palette Luminance


Palette Gradient

Check Palette Contrast
Pro Feature
Go Pro to unlock this feature and many others.
Learn more View demo

No color pairs have enough contrast.
ValidAll
Export color as image
Title
Space
HEX
NoneHEXHSBHSLRGBCMYKLAB
None

HEX

HSB

HSL

RGB

CMYK

LAB

Loading...
No items
No found
Library
Name
NoneNameRALHKSCopicPrismacolor
None

Name

RAL

HKS

Copic

Prismacolor

Loading...
No items
No found
Use my custom logo

Export

Select project
Projects
Select project...
Loading...
No items
No found
New project
OK
Select collection
Collections
Select collection...
Loading...
No items
No found
New collection
OK
Share
link_sharer_description
Private link to share

Palette details
Projects
Collections
Tags
Keywords
Created on

modal_pro_subtitle
👋 Hello, I'm Fabrizio, the guy behind Coolors. Today I introduce Coolors Pro, a
subscription plan to premium features, that I believe represents a fundamental
step forward for the future of Coolors' development.
So what happens? You can still use nearly every features for free, with mainly
these limitations on the account:
 * You can save up to 10 palettes
 * You can have only 1 project and 1 collection
 * You can save up to 5 colors to favorites



 * Remove ads and popups to enter the heaven of colors
 * Generate palettes with more than 5 colors automatically or with color theory
   rules
 * Save unlimited palettes, colors and gradients, and organize them in projects
   and collections
 * Explore more than 10 million color schemes perfect for any project
   
 * Pro Profile, a new beautiful page to present yourself and showcase your
   palettes, projects and collections
 * Get advanced PDF export options like shades, hues, color blindness, etc.
 * Unlock additional tools like the new Palette Visualizer to check your colors
   on real designs
 * Support me as an indie developer
   
 * And more...

Cancel your subscription anytime. We'll send you reminders 3 days before
renewals.
Learn more

Used by 5+ million users
And top companies
View plans
Redeem your coupon
Coupon code
This field is required
This coupon is not valid.
This coupon has expired.
This coupon has been already used.
Apply
Contact us if you need support with your coupon.

Update payment method
Provide your card details (protected by Stripe)

Confirm
Update payment method


Update payment method


Change Plan





HELLO!

Use your email or another service to continue with Coolors.
Continue with Google Continue with Apple Continue with email
By continuing, you agree to our Terms of Service.
Read our Privacy Policy.
Quick Share
 * Info
 * Colors

Share a palette quickly with your clients or collegues, including title and
descriptions.
Name
Description

Label

Color

#
#9AD5CA
#ACDDE7
#ADB9E3
#A379C9
#B744B8






Get link
Become an Affiliate!
If you have a blog, website, email list or social media accounts then you can
join the Affiliate Program and earn a 20% commission on every purchase.
Get your link
 * Info
 * Image
 * Tags
 * Options

Variants
1 2 3 4



Title
This field is required
Description
This field is required

Creative fields
This field is required

Tools

Tags

Private


Request an invitation
We can't wait to see what you are working on but, to prevent abuse and scale
gradually, you you can start uploading your designs only upon invitation.
Make sure your profile is well sorted out before sending your request!
Send a request
Your already sent your request.

Save font
 * Info
 * Font
 * Projects
 * Collections

Name
Description
Tags
No items
Max 999999 elements.
Select projects
Loading...
No projects yet.
No found
Add
Select collections
Loading...
No collections yet.
No found
Add
Save
Palette Variations
Show HEX
 * Shade
 * Saturation
 * Hue
 * Temperature
 * Blindness
 * Luminance
 * Gradient
 * Theme

Pro Feature
Go Pro to unlock this feature and many others.
Learn more View demo










COOLORS ADOBE EXTENSION

Download and install the extension for Illustrator, InDesign and Photoshop (up
to version 20). Photoshop 21+ and Adobe XD will be supported soon.
Adobe Illustrator, InDesign, Photoshop (20)
Download (1.1.0)
Adobe Photoshop 21+, Adobe XD
Coming soon
Parse Palette
Coolors URL / String / Array
This field is required
No colors found
OK
Prev
Next
Cancel subscription
Oh no! It breaks my 💙
to see you leave!

Before you cancel your subscription, please share with me what made you cancel
today. Your honest feedback will help me improve a lot! Thanks.

Select a reason...
Select a reason...Don't use it frequentlyFound better alternativesDidn't see the
valuePoor supportToo hard to useIt's too expensiveOther reasons
Select a reason...

Don't use it frequently

Found better alternatives

Didn't see the value

Poor support

Too hard to use

It's too expensive

Other reasons

Loading...
No items
No found

Never mind, I'll stay! Continue
Save Image
 * Info
 * Image
 * Projects
 * Collections

Name
Description
Tags
No items
Max 999999 elements.
Select projects
Loading...
No projects yet.
No found
Add
Select collections
Loading...
No collections yet.
No found
Add

Save


ALLOW THE ADS

Hey, I'm Fabrizio, the guy behind this website. Please help me to keep most of
the site free by allowing ads or consider subscribing to enjoy even more
features.

Your support truly matters.

I disabled the ad blocker I want to subscribe for $3/mo

I don't care, close popup


Loading...
No items
No found



#
Hue


Saturation


Brightness


Hue


Saturation


Luminance


Red


Green


Blue


Cyan


Magenta


Yellow


Key


Luminance


Green-Red


Blue-Yellow


No colors
No colors
No colors
No colors
No colors
No colors
Sign in to view your saved colors.
Sign in
PickerHSBHSLRGBCMYKLABName Saved RAL

HKS

Copic

Prismacolor

Picker



×
Want a cookie? 🍪

We and selected third parties use cookies or similar technologies as specified
in the cookie policy.


You can consent to the use of such technologies by using the “Accept” button.
Press again to continue 0/2
Manage cookies
Accept all cookies