[vc_row][vc_column width="1/4"][grve_single_image image_type="image" align="center" animation="pulse" animation_delay="50" image="207"][/vc_column][vc_column width="3/4"][grve_title title="Website Layout Examples" heading="h1" line_type="no-line" align="left" animation_delay="200" animation="fadeInRight"][/vc_column][/vc_row][vc_row][vc_column width="1/1"][vc_column_text animation_delay="200"]Every client, whether company or individual, has different needs. As a result, we <strong>tailor every website</strong> to meet the needs of that client to allow them to get the best response from their users. A<strong> full evaluation</strong> is performed to determine what is needed and where costs can be cut.  There is <span style="text-decoration: underline;">one requirement for all clients</span>: We require that all websites be <strong>built correctly</strong> and constructed to meet the needs of<strong> today's devices and tomorrow's technology</strong>. Below are a few <strong>examples of website layouts</strong>. All features and design elements can be mixed, rearranged, modified, and integrated into the construction of your<strong> new website</strong>![/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/1"][grve_divider line_type="dashed-line"][/vc_column][/vc_row][vc_row][vc_column width="1/1"][vc_tabs layout="horizontal"][vc_tab title="ScreenSlider" tab_id="1405502508-1-31"]<iframe src="http://demo.select-themes.com/hazel6/" width="100%" height="800" scrolling="auto"></iframe>[/vc_tab][vc_tab title="TopSlider" tab_id="1405502508-2-3"]<iframe src="http://demo.select-themes.com/hazel3/" width="100%" height="800" scrolling="auto"></iframe>[/vc_tab][vc_tab title="ClearHeader" tab_id="1405503863338-2-1"]<iframe src="http://demo.select-themes.com/hazel2/" width="100%" height="800" scrolling="auto"></iframe>[/vc_tab][vc_tab title="MasonryButtons" tab_id="1405503864024-3-0"]<iframe src="http://demo.select-themes.com/hazel8/" width="100%" height="800" scrolling="auto"></iframe>[/vc_tab][vc_tab title="SideNav" tab_id="1405503864536-4-0"]<iframe src="http://demo.select-themes.com/hazel7/" width="100%" height="800" scrolling="auto"></iframe>[/vc_tab][vc_tab title="HomeButtons" tab_id="1405503865815-5-4"]<iframe src="http://demo.select-themes.com/hazel9/" width="100%" height="800" scrolling="auto"></iframe>[/vc_tab][vc_tab title="1-Pager" tab_id="1405503867144-6-4"]<iframe src="http://demo.select-themes.com/hazel13/" width="100%" height="800" scrolling="auto"></iframe>[/vc_tab][vc_tab title="Boxed" tab_id="1405504193338-7-3"][vc_column_text animation_delay="200"]<iframe src="http://demo.select-themes.com/hazel11/" width="100%" height="800" scrolling="auto"></iframe>[/vc_column_text][/vc_tab][/vc_tabs][/vc_column][/vc_row][vc_row][vc_column width="1/1"][grve_divider line_type="dashed-line"][/vc_column][/vc_row][vc_row][vc_column width="1/2"][grve_title title="Logo Color Sample" heading="h2" line_type="no-line" align="center" animation="pulse" animation_delay="200" margin_bottom="35px"][grve_carousel items_per_page="4" ids="200,192,196,193,198,194,197,195" margin_bottom="10px"][/vc_column][vc_column width="1/2"][grve_title title="Color Wheel Tool" heading="h2" line_type="no-line" align="center" animation="pulse" animation_delay="200" margin_bottom="35px"][vc_column_text animation_delay="200"]<section id="content">
<div class="page-editor">
<div class="create-actions">
<div class="save-theme ctooltip">
<a id="myButton" class="btn primary save-button" title="" href="javascript:void(0)">Save</a>
<span class="mini-spinner" style="display: none;"></span>
</div>
<div class="edit-themeName">
<div class="filename">
<div class="filename-edit hidden">
<div>
<input type="text" value="" maxlength="255">
</div>
</div>
<h1 class="selectable">
<div>My Kuler Theme</div>
<span class="sprite30x30 edit-button"></span>
</h1>
</div>
</div>
</div>
<a class="sprite30x30 image-uploader tooltip-left" data-tooltip="Create from Image"></a>
<div class="harmonyrule" aria-haspopup="true">
<div class="box-head">
Color Rule
<a class="sprite30x30 toggleUI"></a>
</div>
<div class="harmony-list kuHarmonu-button">
<a class="selected" data-rule="Analogous" href="">Analogous</a>
<a data-rule="Monochromatic" href="">Monochromatic</a>
<a data-rule="Triad" href="">Triad</a>
<a data-rule="Complementary" href="">Complementary</a>
<a data-rule="Compound" href="">Compound</a>
<a data-rule="Shades" href="">Shades</a>
<a data-rule="Custom" href="">Custom</a>
</div>
<div class="harmonyButton sprite30x30"></div>
</div>
<div class="colorwheel">
<img draggable="false" src="/build01/resource/img/kuler/color_wheel_730.png" alt="RYB Color Wheel">
<svg class="markertails" viewBox="-10 -10 120 120" preserveAspectRatio="xMidYMin meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="M 50,50 L 92.83738882998736,29.87021812764793 A 4,4,0,1,0,88.85159688909005,22.96662397761524Z">
<path d="M 50,50 L 96.58771112399585,41.64325588359234 A 4,4,0,1,0,94.52451339575512,33.94329713573727Z">
<path d="M 50,50 L 99.68,53.98717945420068 A 4,4,0,1,0,99.68,46.01282054579932Z">
<path d="M 50,50 L 94.52451339575512,66.05670286426273 A 4,4,0,1,0,96.58771112399585,58.35674411640766Z">
<path d="M 50,50 L 88.85159688909005,77.0333760223848 A 4,4,0,1,0,92.83738882998735,70.12978187235211Z">
</g>
</svg>
<div class="marker selected" style="left: 86.1362%; top: 21.25%;">
<div style="background-color: rgb(255, 83, 13);"></div>
</div>
<div class="marker" style="left: 90.8815%; top: 32.7061%;">
<div style="background-color: rgb(232, 44, 12);"></div>
</div>
<div class="marker basecolor" style="left: 95%; top: 45%; transform: rotate(0deg);">
<div style="background-color: rgb(255, 0, 0);"></div>
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMin meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M 50,50 L 0,0 L 0,100 Z" style="background-color: rgb(255, 0, 0);">
</svg>
</div>
<div class="marker" style="left: 90.8815%; top: 57.2939%;">
<div style="background-color: rgb(232, 12, 122);"></div>
</div>
<div class="marker" style="left: 86.1362%; top: 68.75%;">
<div style="background-color: rgb(255, 13, 255);"></div>
</div>
</div>
<div class="theme">
<ul class="themeBox ctooltip">
<li class="selected" style="background: #FF530D" data-index="0" aria-haspopup="true" draggable="false">
<div class="tooltip">Set as Base Color</div>
<div class="tooltip-arrow"></div>
<svg class="base-indicator" viewBox="0 0 100 100" preserveAspectRatio="none meet" version="1.1" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg" data-index="0">
<path class="chevron" d="M 0,100 L 100,100 L 50,0 L 0,100">
</svg>
</li>
<li style="background: #E82C0C" data-index="1" aria-haspopup="true" draggable="false">
<div class="tooltip">Set as Base Color</div>
<div class="tooltip-arrow"></div>
<svg class="base-indicator" viewBox="0 0 100 100" preserveAspectRatio="none meet" version="1.1" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg" data-index="1">
<path class="chevron" d="M 0,100 L 100,100 L 50,0 L 0,100">
</svg>
</li>
<li class="basecolor" style="background: #FF0000" data-index="2" aria-haspopup="true" draggable="false">
<div class="tooltip">Base Color</div>
<div class="tooltip-arrow"></div>
<svg class="base-indicator" viewBox="0 0 100 100" preserveAspectRatio="none meet" version="1.1" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg" data-index="2">
<path class="chevron" d="M 0,100 L 100,100 L 50,0 L 0,100">
</svg>
</li>
<li style="background: #E80C7A" data-index="3" aria-haspopup="true" draggable="false">
<div class="tooltip">Set as Base Color</div>
<div class="tooltip-arrow"></div>
<svg class="base-indicator" viewBox="0 0 100 100" preserveAspectRatio="none meet" version="1.1" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg" data-index="3">
<path class="chevron" d="M 0,100 L 100,100 L 50,0 L 0,100">
</svg>
</li>
<li class="" style="background: #FF0DFF" data-index="4" aria-haspopup="true" draggable="false">
<div class="tooltip">Set as Base Color</div>
<div class="tooltip-arrow"></div>
<svg class="base-indicator" viewBox="0 0 100 100" preserveAspectRatio="none meet" version="1.1" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg" data-index="4">
<path class="chevron" d="M 0,100 L 100,100 L 50,0 L 0,100">
</svg>
</li>
</ul>
</div>
<div class="sliderList">
<div class="slider selected" data-mode="rgb">
<span id="fd-slider-fd-slider-form-elem-0" class="fd-slider " role="application" aria-disabled="false">
<span class="fd-slider-wrapper">
<span class="fd-slider-inner"></span>
<span class="fd-slider-bar" style="background: linear-gradient(to right, rgb(0, 83, 13) 0%, rgb(255, 83, 13) 100%) repeat scroll 0% 0% transparent;"></span>
<span class="fd-slider-handle" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="255" aria-valuenow="255" aria-valuetext="255" style="left: 149px; background-color: rgb(255, 83, 13);"> </span>
</span>
</span>
<input id="fd-slider-form-elem-0" class="fd-form-element-hidden" type="range" step="1" max="255" min="0" data-comp="r" value="255">
<span id="fd-slider-fd-slider-form-elem-1" class="fd-slider " role="application" aria-disabled="false">
<span class="fd-slider-wrapper">
<span class="fd-slider-inner"></span>
<span class="fd-slider-bar" style="background: linear-gradient(to right, rgb(255, 0, 13) 0%, rgb(255, 255, 13) 100%) repeat scroll 0% 0% transparent;"></span>
<span class="fd-slider-handle" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="255" aria-valuenow="83" aria-valuetext="83" style="left: 48px; background-color: rgb(255, 83, 13);"> </span>
</span>
</span>
<input id="fd-slider-form-elem-1" class="fd-form-element-hidden" type="range" step="1" max="255" min="0" data-comp="g" value="83">
<span id="fd-slider-fd-slider-form-elem-2" class="fd-slider " role="application" aria-disabled="false">
<span class="fd-slider-wrapper">
<span class="fd-slider-inner"></span>
<span class="fd-slider-bar" style="background: linear-gradient(to right, rgb(255, 83, 0) 0%, rgb(255, 83, 255) 100%) repeat scroll 0% 0% transparent;"></span>
<span class="fd-slider-handle" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="255" aria-valuenow="13" aria-valuetext="13" style="left: 8px; background-color: rgb(255, 83, 13);"> </span>
</span>
</span>
<input id="fd-slider-form-elem-2" class="fd-form-element-hidden" type="range" step="1" max="255" min="0" data-comp="b" value="13">
<span id="fd-slider-fd-slider-form-elem-3" class="fd-slider " role="application" aria-disabled="false" style="margin-top: 20px;">
<span class="fd-slider-wrapper">
<span class="fd-slider-inner"></span>
<span class="fd-slider-bar" style="background: linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(255, 81, 13) 100%) repeat scroll 0% 0% transparent;"></span>
<span class="fd-slider-handle" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" aria-valuetext="100" style="left: 149px; background-color: rgb(255, 83, 13);"> </span>
</span>
</span>
<input id="fd-slider-form-elem-3" class="fd-form-element-hidden" type="range" step="1" max="100" min="0" data-comp="k" value="50">
</div>
<div class="slider" data-mode="rgb">
<span id="fd-slider-fd-slider-form-elem-4" class="fd-slider " role="application" aria-disabled="false">
<span class="fd-slider-wrapper">
<span class="fd-slider-inner"></span>
<span class="fd-slider-bar"></span>
<span class="fd-slider-handle" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="255" aria-valuenow="232" aria-valuetext="232" style="left: 137px; background-color: rgb(232, 44, 12);"> </span>
</span>
</span>
<input id="fd-slider-form-elem-4" class="fd-form-element-hidden" type="range" step="1" max="255" min="0" data-comp="r" value="232">
<span id="fd-slider-fd-slider-form-elem-5" class="fd-slider " role="application" aria-disabled="false">
<span class="fd-slider-wrapper">
<span class="fd-slider-inner"></span>
<span class="fd-slider-bar"></span>
<span class="fd-slider-handle" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="255" aria-valuenow="44" aria-valuetext="44" style="left: 26px; background-color: rgb(232, 44, 12);"> </span>
</span>
</span>
<input id="fd-slider-form-elem-5" class="fd-form-element-hidden" type="range" step="1" max="255" min="0" data-comp="g" value="44">
<span id="fd-slider-fd-slider-form-elem-6" class="fd-slider " role="application" aria-disabled="false">
<span class="fd-slider-wrapper">
<span class="fd-slider-inner"></span>
<span class="fd-slider-bar"></span>
<span class="fd-slider-handle" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="255" aria-valuenow="12" aria-valuetext="12" style="left: 7px; background-color: rgb(232, 44, 12);"> </span>
</span>
</span>
<input id="fd-slider-form-elem-6" class="fd-form-element-hidden" type="range" step="1" max="255" min="0" data-comp="b" value="12">
<span id="fd-slider-fd-slider-form-elem-7" class="fd-slider " role="application" aria-disabled="false" style="margin-top: 20px;">
<span class="fd-slider-wrapper">
<span class="fd-slider-inner"></span>
<span class="fd-slider-bar"></span>
<span class="fd-slider-handle" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="91" aria-valuetext="91" style="left: 137px; background-color: rgb(232, 44, 12);"> </span>
</span>
</span>
<input id="fd-slider-form-elem-7" class="fd-form-element-hidden" type="range" step="1" max="100" min="0" data-comp="k" value="50">
</div>
<div class="slider" data-mode="rgb">
<span id="fd-slider-fd-slider-form-elem-8" class="fd-slider " role="application" aria-disabled="false">
<span class="fd-slider-wrapper">
<span class="fd-slider-inner"></span>
<span class="fd-slider-bar"></span>
<span class="fd-slider-handle" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="255" aria-valuenow="255" aria-valuetext="255" style="left: 151px; background-color: rgb(255, 0, 0);"> </span>
</span>
</span>
<input id="fd-slider-form-elem-8" class="fd-form-element-hidden" type="range" step="1" max="255" min="0" data-comp="r" value="255">
<span id="fd-slider-fd-slider-form-elem-9" class="fd-slider " role="application" aria-disabled="false">
<span class="fd-slider-wrapper">
<span class="fd-slider-inner"></span>
<span class="fd-slider-bar"></span>
<span class="fd-slider-handle" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="255" aria-valuenow="0" aria-valuetext="0" style="left: 0px; background-color: rgb(255, 0, 0);"> </span>
</span>
</span>
<input id="fd-slider-form-elem-9" class="fd-form-element-hidden" type="range" step="1" max="255" min="0" data-comp="g" value="0">
<span id="fd-slider-fd-slider-form-elem-10" class="fd-slider " role="application" aria-disabled="false">
<span class="fd-slider-wrapper">
<span class="fd-slider-inner"></span>
<span class="fd-slider-bar"></span>
<span class="fd-slider-handle" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="255" aria-valuenow="0" aria-valuetext="0" style="left: 0px; background-color: rgb(255, 0, 0);"> </span>
</span>
</span>
<input id="fd-slider-form-elem-10" class="fd-form-element-hidden" type="range" step="1" max="255" min="0" data-comp="b" value="0">
<span id="fd-slider-fd-slider-form-elem-11" class="fd-slider " role="application" aria-disabled="false" style="margin-top: 20px;">
<span class="fd-slider-wrapper">
<span class="fd-slider-inner"></span>
<span class="fd-slider-bar"></span>
<span class="fd-slider-handle" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" aria-valuetext="100" style="left: 151px; background-color: rgb(255, 0, 0);"> </span>
</span>
</span>
<input id="fd-slider-form-elem-11" class="fd-form-element-hidden" type="range" step="1" max="100" min="0" data-comp="k" value="50">
</div>
<div class="slider" data-mode="rgb">
<span id="fd-slider-fd-slider-form-elem-12" class="fd-slider " role="application" aria-disabled="false">
<span class="fd-slider-wrapper">
<span class="fd-slider-inner"></span>
<span class="fd-slider-bar"></span>
<span class="fd-slider-handle" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="255" aria-valuenow="232" aria-valuetext="232" style="left: 137px; background-color: rgb(232, 12, 122);"> </span>
</span>
</span>
<input id="fd-slider-form-elem-12" class="fd-form-element-hidden" type="range" step="1" max="255" min="0" data-comp="r" value="232">
<span id="fd-slider-fd-slider-form-elem-13" class="fd-slider " role="application" aria-disabled="false">
<span class="fd-slider-wrapper">
<span class="fd-slider-inner"></span>
<span class="fd-slider-bar"></span>
<span class="fd-slider-handle" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="255" aria-valuenow="12" aria-valuetext="12" style="left: 7px; background-color: rgb(232, 12, 122);"> </span>
</span>
</span>
<input id="fd-slider-form-elem-13" class="fd-form-element-hidden" type="range" step="1" max="255" min="0" data-comp="g" value="12">
<span id="fd-slider-fd-slider-form-elem-14" class="fd-slider " role="application" aria-disabled="false">
<span class="fd-slider-wrapper">
<span class="fd-slider-inner"></span>
<span class="fd-slider-bar"></span>
<span class="fd-slider-handle" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="255" aria-valuenow="122" aria-valuetext="122" style="left: 72px; background-color: rgb(232, 12, 122);"> </span>
</span>
</span>
<input id="fd-slider-form-elem-14" class="fd-form-element-hidden" type="range" step="1" max="255" min="0" data-comp="b" value="122">
<span id="fd-slider-fd-slider-form-elem-15" class="fd-slider " role="application" aria-disabled="false" style="margin-top: 20px;">
<span class="fd-slider-wrapper">
<span class="fd-slider-inner"></span>
<span class="fd-slider-bar"></span>
<span class="fd-slider-handle" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="91" aria-valuetext="91" style="left: 137px; background-color: rgb(232, 12, 122);"> </span>
</span>
</span>
<input id="fd-slider-form-elem-15" class="fd-form-element-hidden" type="range" step="1" max="100" min="0" data-comp="k" value="50">
</div>
<div class="slider" data-mode="rgb">
<span id="fd-slider-fd-slider-form-elem-16" class="fd-slider " role="application" aria-disabled="false">
<span class="fd-slider-wrapper">
<span class="fd-slider-inner"></span>
<span class="fd-slider-bar"></span>
<span class="fd-slider-handle" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="255" aria-valuenow="255" aria-valuetext="255" style="left: 151px; background-color: rgb(255, 13, 255);"> </span>
</span>
</span>
<input id="fd-slider-form-elem-16" class="fd-form-element-hidden" type="range" step="1" max="255" min="0" data-comp="r" value="255">
<span id="fd-slider-fd-slider-form-elem-17" class="fd-slider " role="application" aria-disabled="false">
<span class="fd-slider-wrapper">
<span class="fd-slider-inner"></span>
<span class="fd-slider-bar"></span>
<span class="fd-slider-handle" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="255" aria-valuenow="13" aria-valuetext="13" style="left: 8px; background-color: rgb(255, 13, 255);"> </span>
</span>
</span>
<input id="fd-slider-form-elem-17" class="fd-form-element-hidden" type="range" step="1" max="255" min="0" data-comp="g" value="13">
<span id="fd-slider-fd-slider-form-elem-18" class="fd-slider " role="application" aria-disabled="false">
<span class="fd-slider-wrapper">
<span class="fd-slider-inner"></span>
<span class="fd-slider-bar"></span>
<span class="fd-slider-handle" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="255" aria-valuenow="255" aria-valuetext="255" style="left: 151px; background-color: rgb(255, 13, 255);"> </span>
</span>
</span>
<input id="fd-slider-form-elem-18" class="fd-form-element-hidden" type="range" step="1" max="255" min="0" data-comp="b" value="255">
<span id="fd-slider-fd-slider-form-elem-19" class="fd-slider " role="application" aria-disabled="false" style="margin-top: 20px;">
<span class="fd-slider-wrapper">
<span class="fd-slider-inner"></span>
<span class="fd-slider-bar"></span>
<span class="fd-slider-handle" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" aria-valuetext="100" style="left: 151px; background-color: rgb(255, 13, 255);"> </span>
</span>
</span>
<input id="fd-slider-form-elem-19" class="fd-form-element-hidden" type="range" step="1" max="100" min="0" data-comp="k" value="50">
</div>
</div>
<div class="themevalues collapsed">
<div class="values selected">
<div class="color-values" data-mode="cmyk">
<div class="color-mode-text">
<span>CMYK</span>
</div>
<input type="number" value="" max="100" min="0" data-comp="c" pattern="[0-9]*" data-tab="true" tabindex="50">
<input type="number" value="" max="100" min="0" data-comp="m" pattern="[0-9]*" data-tab="true" tabindex="51">
<input type="number" value="" max="100" min="0" data-comp="y" pattern="[0-9]*" data-tab="true" tabindex="52">
<input type="number" max="100" min="0" data-comp="k" pattern="[0-9]*" data-tab="true" tabindex="53">
</div>
<div class="color-values color-mode" data-mode="rgb">
<div class="color-mode-text">
<span>RGB</span>
</div>
<input type="number" max="255" min="0" data-comp="r" pattern="[0-9]*" data-tab="true" tabindex="70">
<input type="number" max="255" min="0" data-comp="g" pattern="[0-9]*" data-tab="true" tabindex="71">
<input type="number" value="" max="255" min="0" data-comp="b" pattern="[0-9]*" data-tab="true" tabindex="72">
</div>
<div class="color-values" data-mode="lab">
<div class="color-mode-text">
<span>LAB</span>
</div>
<input type="number" max="100" min="0" data-comp="l" pattern="[0-9]*" data-tab="true" tabindex="85">
<input type="number" max="127" min="-128" data-comp="a" pattern="\-?[0-9]*" data-tab="true" tabindex="86">
<input type="number" value="" max="127" min="-128" data-comp="b" pattern="\-?[0-9]*" data-tab="true" tabindex="87">
</div>
<div class="color-values" data-mode="hsv">
<div class="color-mode-text">
<span>HSB</span>
</div>
<input type="number" max="359" min="0" data-comp="h" pattern="[0-9]*" data-tab="true" tabindex="100">
<input type="number" max="100" min="0" data-comp="s" pattern="[0-9]*" data-tab="true" tabindex="101">
<input type="number" value="" max="100" min="0" data-comp="v" pattern="[0-9]*" data-tab="true" tabindex="102">
</div>
<div class="color-values always-show" data-mode="hex">
<div class="color-mode-text">
<span>HEX</span>
</div>
<input class="always-show" type="text" value="" data-comp="hex" pattern="#?[A-Fa-f0-9]*" data-tab="true" tabindex="115">
</div>
<div class="color-values always-show" data-mode="name">
<div class="color-mode-text">
<span>Name</span>
</div>
<input class="always-show" type="text" value="" data-comp="name" data-tab="false">
</div>
</div>
<div class="values">
<div class="color-values" data-mode="cmyk">
<div class="color-mode-text">
<span>CMYK</span>
</div>
<input type="number" value="" max="100" min="0" data-comp="c" pattern="[0-9]*" data-tab="true" tabindex="54">
<input type="number" value="" max="100" min="0" data-comp="m" pattern="[0-9]*" data-tab="true" tabindex="55">
<input type="number" value="" max="100" min="0" data-comp="y" pattern="[0-9]*" data-tab="true" tabindex="56">
<input type="number" max="100" min="0" data-comp="k" pattern="[0-9]*" data-tab="true" tabindex="57">
</div>
<div class="color-values color-mode" data-mode="rgb">
<div class="color-mode-text">
<span>RGB</span>
</div>
<input type="number" max="255" min="0" data-comp="r" pattern="[0-9]*" data-tab="true" tabindex="73">
<input type="number" max="255" min="0" data-comp="g" pattern="[0-9]*" data-tab="true" tabindex="74">
<input type="number" value="" max="255" min="0" data-comp="b" pattern="[0-9]*" data-tab="true" tabindex="75">
</div>
<div class="color-values" data-mode="lab">
<div class="color-mode-text">
<span>LAB</span>
</div>
<input type="number" max="100" min="0" data-comp="l" pattern="[0-9]*" data-tab="true" tabindex="88">
<input type="number" max="127" min="-128" data-comp="a" pattern="\-?[0-9]*" data-tab="true" tabindex="89">
<input type="number" value="" max="127" min="-128" data-comp="b" pattern="\-?[0-9]*" data-tab="true" tabindex="90">
</div>
<div class="color-values" data-mode="hsv">
<div class="color-mode-text">
<span>HSB</span>
</div>
<input type="number" max="359" min="0" data-comp="h" pattern="[0-9]*" data-tab="true" tabindex="103">
<input type="number" max="100" min="0" data-comp="s" pattern="[0-9]*" data-tab="true" tabindex="104">
<input type="number" value="" max="100" min="0" data-comp="v" pattern="[0-9]*" data-tab="true" tabindex="105">
</div>
<div class="color-values always-show" data-mode="hex">
<div class="color-mode-text">
<span>HEX</span>
</div>
<input class="always-show" type="text" value="" data-comp="hex" pattern="#?[A-Fa-f0-9]*" data-tab="true" tabindex="116">
</div>
<div class="color-values always-show" data-mode="name">
<div class="color-mode-text">
<span>Name</span>
</div>
<input class="always-show" type="text" value="" data-comp="name" data-tab="false">
</div>
</div>
<div class="values">
<div class="color-values" data-mode="cmyk">
<div class="color-mode-text">
<span>CMYK</span>
</div>
<input type="number" value="" max="100" min="0" data-comp="c" pattern="[0-9]*" data-tab="true" tabindex="58">
<input type="number" value="" max="100" min="0" data-comp="m" pattern="[0-9]*" data-tab="true" tabindex="59">
<input type="number" value="" max="100" min="0" data-comp="y" pattern="[0-9]*" data-tab="true" tabindex="60">
<input type="number" max="100" min="0" data-comp="k" pattern="[0-9]*" data-tab="true" tabindex="61">
</div>
<div class="color-values color-mode" data-mode="rgb">
<div class="color-mode-text">
<span>RGB</span>
</div>
<input type="number" max="255" min="0" data-comp="r" pattern="[0-9]*" data-tab="true" tabindex="76">
<input type="number" max="255" min="0" data-comp="g" pattern="[0-9]*" data-tab="true" tabindex="77">
<input type="number" value="" max="255" min="0" data-comp="b" pattern="[0-9]*" data-tab="true" tabindex="78">
</div>
<div class="color-values" data-mode="lab">
<div class="color-mode-text">
<span>LAB</span>
</div>
<input type="number" max="100" min="0" data-comp="l" pattern="[0-9]*" data-tab="true" tabindex="91">
<input type="number" max="127" min="-128" data-comp="a" pattern="\-?[0-9]*" data-tab="true" tabindex="92">
<input type="number" value="" max="127" min="-128" data-comp="b" pattern="\-?[0-9]*" data-tab="true" tabindex="93">
</div>
<div class="color-values" data-mode="hsv">
<div class="color-mode-text">
<span>HSB</span>
</div>
<input type="number" max="359" min="0" data-comp="h" pattern="[0-9]*" data-tab="true" tabindex="106">
<input type="number" max="100" min="0" data-comp="s" pattern="[0-9]*" data-tab="true" tabindex="107">
<input type="number" value="" max="100" min="0" data-comp="v" pattern="[0-9]*" data-tab="true" tabindex="108">
</div>
<div class="color-values always-show" data-mode="hex">
<div class="color-mode-text">
<span>HEX</span>
</div>
<input class="always-show" type="text" value="" data-comp="hex" pattern="#?[A-Fa-f0-9]*" data-tab="true" tabindex="117">
</div>
<div class="color-values always-show" data-mode="name">
<div class="color-mode-text">
<span>Name</span>
</div>
<input class="always-show" type="text" value="" data-comp="name" data-tab="false">
</div>
</div>
<div class="values">
<div class="color-values" data-mode="cmyk">
<div class="color-mode-text">
<span>CMYK</span>
</div>
<input type="number" value="" max="100" min="0" data-comp="c" pattern="[0-9]*" data-tab="true" tabindex="62">
<input type="number" value="" max="100" min="0" data-comp="m" pattern="[0-9]*" data-tab="true" tabindex="63">
<input type="number" value="" max="100" min="0" data-comp="y" pattern="[0-9]*" data-tab="true" tabindex="64">
<input type="number" max="100" min="0" data-comp="k" pattern="[0-9]*" data-tab="true" tabindex="65">
</div>
<div class="color-values color-mode" data-mode="rgb">
<div class="color-mode-text">
<span>RGB</span>
</div>
<input type="number" max="255" min="0" data-comp="r" pattern="[0-9]*" data-tab="true" tabindex="79">
<input type="number" max="255" min="0" data-comp="g" pattern="[0-9]*" data-tab="true" tabindex="80">
<input type="number" value="" max="255" min="0" data-comp="b" pattern="[0-9]*" data-tab="true" tabindex="81">
</div>
<div class="color-values" data-mode="lab">
<div class="color-mode-text">
<span>LAB</span>
</div>
<input type="number" max="100" min="0" data-comp="l" pattern="[0-9]*" data-tab="true" tabindex="94">
<input type="number" max="127" min="-128" data-comp="a" pattern="\-?[0-9]*" data-tab="true" tabindex="95">
<input type="number" value="" max="127" min="-128" data-comp="b" pattern="\-?[0-9]*" data-tab="true" tabindex="96">
</div>
<div class="color-values" data-mode="hsv">
<div class="color-mode-text">
<span>HSB</span>
</div>
<input type="number" max="359" min="0" data-comp="h" pattern="[0-9]*" data-tab="true" tabindex="109">
<input type="number" max="100" min="0" data-comp="s" pattern="[0-9]*" data-tab="true" tabindex="110">
<input type="number" value="" max="100" min="0" data-comp="v" pattern="[0-9]*" data-tab="true" tabindex="111">
</div>
<div class="color-values always-show" data-mode="hex">
<div class="color-mode-text">
<span>HEX</span>
</div>
<input class="always-show" type="text" value="" data-comp="hex" pattern="#?[A-Fa-f0-9]*" data-tab="true" tabindex="118">
</div>
<div class="color-values always-show" data-mode="name">
<div class="color-mode-text">
<span>Name</span>
</div>
<input class="always-show" type="text" value="" data-comp="name" data-tab="false">
</div>
</div>
<div class="values">
<div class="color-values" data-mode="cmyk">
<div class="color-mode-text">
<span>CMYK</span>
</div>
<input type="number" value="" max="100" min="0" data-comp="c" pattern="[0-9]*" data-tab="true" tabindex="66">
<input type="number" value="" max="100" min="0" data-comp="m" pattern="[0-9]*" data-tab="true" tabindex="67">
<input type="number" value="" max="100" min="0" data-comp="y" pattern="[0-9]*" data-tab="true" tabindex="68">
<input type="number" max="100" min="0" data-comp="k" pattern="[0-9]*" data-tab="true" tabindex="69">
</div>
<div class="color-values color-mode" data-mode="rgb">
<div class="color-mode-text">
<span>RGB</span>
</div>
<input type="number" max="255" min="0" data-comp="r" pattern="[0-9]*" data-tab="true" tabindex="82">
<input type="number" max="255" min="0" data-comp="g" pattern="[0-9]*" data-tab="true" tabindex="83">
<input type="number" value="" max="255" min="0" data-comp="b" pattern="[0-9]*" data-tab="true" tabindex="84">
</div>
<div class="color-values" data-mode="lab">
<div class="color-mode-text">
<span>LAB</span>
</div>
<input type="number" max="100" min="0" data-comp="l" pattern="[0-9]*" data-tab="true" tabindex="97">
<input type="number" max="127" min="-128" data-comp="a" pattern="\-?[0-9]*" data-tab="true" tabindex="98">
<input type="number" value="" max="127" min="-128" data-comp="b" pattern="\-?[0-9]*" data-tab="true" tabindex="99">
</div>
<div class="color-values" data-mode="hsv">
<div class="color-mode-text">
<span>HSB</span>
</div>
<input type="number" max="359" min="0" data-comp="h" pattern="[0-9]*" data-tab="true" tabindex="112">
<input type="number" max="100" min="0" data-comp="s" pattern="[0-9]*" data-tab="true" tabindex="113">
<input type="number" value="" max="100" min="0" data-comp="v" pattern="[0-9]*" data-tab="true" tabindex="114">
</div>
<div class="color-values always-show" data-mode="hex">
<div class="color-mode-text">
<span>HEX</span>
</div>
<input class="always-show" type="text" value="" data-comp="hex" pattern="#?[A-Fa-f0-9]*" data-tab="true" tabindex="119">
</div>
<div class="color-values always-show" data-mode="name">
<div class="color-mode-text">
<span>Name</span>
</div>
<input class="always-show" type="text" value="" data-comp="name" data-tab="false">
</div>
</div>
</div>
</div>
</section>
</div>[/vc_column_text][/vc_column][/vc_row]