[html]<div class="wrap">
<div class="main">
<section id="information">
<p class="description">
Generate any gradient between two colors. Just type your colors separated by the word "to" in the search field.
ColorHexa will then display a RGB, HSV and Reverse HSV gradient.
If you just want to blend two (or more) colors together, you might be interested by our <a href="/color-blend">color mixer tool</a>.
</p>
</section>
<section class="gradients">
<div class="scheme gradient">
<ul>
<li style="background-color:#ffd700;">
<a href="/ffd700" class="tb">#ffd700</a>
<pre class="code"><code>#ffd700</code> <code>rgb(255,215,0)</code></pre>
</li><li style="background-color:#fcd303;">
<a href="/fcd303" class="tb">#fcd303</a>
<pre class="code"><code>#fcd303</code> <code>rgb(252,211,3)</code></pre>
</li><li style="background-color:#f9cf05;">
<a href="/f9cf05" class="tb">#f9cf05</a>
<pre class="code"><code>#f9cf05</code> <code>rgb(249,207,5)</code></pre>
</li><li style="background-color:#f6ca08;">
<a href="/f6ca08" class="tb">#f6ca08</a>
<pre class="code"><code>#f6ca08</code> <code>rgb(246,202,8)</code></pre>
</li><li style="background-color:#f3c60b;">
<a href="/f3c60b" class="tb">#f3c60b</a>
<pre class="code"><code>#f3c60b</code> <code>rgb(243,198,11)</code></pre>
</li><li style="background-color:#f0c20d;">
<a href="/f0c20d" class="tb">#f0c20d</a>
<pre class="code"><code>#f0c20d</code> <code>rgb(240,194,13)</code></pre>
</li><li style="background-color:#edbe10;">
<a href="/edbe10" class="tb">#edbe10</a>
<pre class="code"><code>#edbe10</code> <code>rgb(237,190,16)</code></pre>
</li><li style="background-color:#e9ba13;">
<a href="/e9ba13" class="tb">#e9ba13</a>
<pre class="code"><code>#e9ba13</code> <code>rgb(233,186,19)</code></pre>
</li><li style="background-color:#e6b615;">
<a href="/e6b615" class="tb">#e6b615</a>
<pre class="code"><code>#e6b615</code> <code>rgb(230,182,21)</code></pre>
</li><li style="background-color:#e3b118;">
<a href="/e3b118" class="tb">#e3b118</a>
<pre class="code"><code>#e3b118</code> <code>rgb(227,177,24)</code></pre>
</li><li style="background-color:#e0ad1b;">
<a href="/e0ad1b" class="tb">#e0ad1b</a>
<pre class="code"><code>#e0ad1b</code> <code>rgb(224,173,27)</code></pre>
</li><li style="background-color:#dda91d;">
<a href="/dda91d" class="tb">#dda91d</a>
<pre class="code"><code>#dda91d</code> <code>rgb(221,169,29)</code></pre>
</li><li style="background-color:#daa520;">
<a href="/daa520" class="tb">#daa520</a>
<pre class="code"><code>#daa520</code> <code>rgb(218,165,32)</code></pre>
</li> </ul>
<strong>RGB Gradient</strong>
</div>
<div class="scheme gradient">
<ul>
<li style="background-color:#ffd700;">
<a href="/ffd700" class="tb">#ffd700</a>
<pre class="code"><code>#ffd700</code> <code>rgb(255,215,0)</code></pre>
</li><li style="background-color:#a9fc03;">
<a href="/a9fc03" class="tb">#a9fc03</a>
<pre class="code"><code>#a9fc03</code> <code>rgb(169,252,3)</code></pre>
</li><li style="background-color:#31f906;">
<a href="/31f906" class="tb">#31f906</a>
<pre class="code"><code>#31f906</code> <code>rgb(49,249,6)</code></pre>
</li><li style="background-color:#09f653;">
<a href="/09f653" class="tb">#09f653</a>
<pre class="code"><code>#09f653</code> <code>rgb(9,246,83)</code></pre>
</li><li style="background-color:#0cf3c5;">
<a href="/0cf3c5" class="tb">#0cf3c5</a>
<pre class="code"><code>#0cf3c5</code> <code>rgb(12,243,197)</code></pre>
</li><li style="background-color:#0faef0;">
<a href="/0faef0" class="tb">#0faef0</a>
<pre class="code"><code>#0faef0</code> <code>rgb(15,174,240)</code></pre>
</li><li style="background-color:#1142ed;">
<a href="/1142ed" class="tw">#1142ed</a>
<pre class="code"><code>#1142ed</code> <code>rgb(17,66,237)</code></pre>
</li><li style="background-color:#4d14e9;">
<a href="/4d14e9" class="tw">#4d14e9</a>
<pre class="code"><code>#4d14e9</code> <code>rgb(77,20,233)</code></pre>
</li><li style="background-color:#b417e6;">
<a href="/b417e6" class="tw">#b417e6</a>
<pre class="code"><code>#b417e6</code> <code>rgb(180,23,230)</code></pre>
</li><li style="background-color:#e319b1;">
<a href="/e319b1" class="tw">#e319b1</a>
<pre class="code"><code>#e319b1</code> <code>rgb(227,25,177)</code></pre>
</li><li style="background-color:#e01b4f;">
<a href="/e01b4f" class="tw">#e01b4f</a>
<pre class="code"><code>#e01b4f</code> <code>rgb(224,27,79)</code></pre>
</li><li style="background-color:#dd491e;">
<a href="/dd491e" class="tw">#dd491e</a>
<pre class="code"><code>#dd491e</code> <code>rgb(221,73,30)</code></pre>
</li><li style="background-color:#daa520;">
<a href="/daa520" class="tb">#daa520</a>
<pre class="code"><code>#daa520</code> <code>rgb(218,165,32)</code></pre>
</li> </ul>
<strong>HSV Gradient</strong>
</div>
<div class="scheme gradient">
<ul>
<li style="background-color:#ffd700;">
<a href="/ffd700" class="tb">#ffd700</a>
<pre class="code"><code>#ffd700</code> <code>rgb(255,215,0)</code></pre>
</li><li style="background-color:#fcd203;">
<a href="/fcd203" class="tb">#fcd203</a>
<pre class="code"><code>#fcd203</code> <code>rgb(252,210,3)</code></pre>
</li><li style="background-color:#f9ce06;">
<a href="/f9ce06" class="tb">#f9ce06</a>
<pre class="code"><code>#f9ce06</code> <code>rgb(249,206,6)</code></pre>
</li><li style="background-color:#f6c909;">
<a href="/f6c909" class="tb">#f6c909</a>
<pre class="code"><code>#f6c909</code> <code>rgb(246,201,9)</code></pre>
</li><li style="background-color:#f3c50c;">
<a href="/f3c50c" class="tb">#f3c50c</a>
<pre class="code"><code>#f3c50c</code> <code>rgb(243,197,12)</code></pre>
</li><li style="background-color:#f0c00f;">
<a href="/f0c00f" class="tb">#f0c00f</a>
<pre class="code"><code>#f0c00f</code> <code>rgb(240,192,15)</code></pre>
</li><li style="background-color:#edbc11;">
<a href="/edbc11" class="tb">#edbc11</a>
<pre class="code"><code>#edbc11</code> <code>rgb(237,188,17)</code></pre>
</li><li style="background-color:#e9b814;">
<a href="/e9b814" class="tb">#e9b814</a>
<pre class="code"><code>#e9b814</code> <code>rgb(233,184,20)</code></pre>
</li><li style="background-color:#e6b417;">
<a href="/e6b417" class="tb">#e6b417</a>
<pre class="code"><code>#e6b417</code> <code>rgb(230,180,23)</code></pre>
</li><li style="background-color:#e3b019;">
<a href="/e3b019" class="tb">#e3b019</a>
<pre class="code"><code>#e3b019</code> <code>rgb(227,176,25)</code></pre>
</li><li style="background-color:#e0ac1b;">
<a href="/e0ac1b" class="tb">#e0ac1b</a>
<pre class="code"><code>#e0ac1b</code> <code>rgb(224,172,27)</code></pre>
</li><li style="background-color:#dda91e;">
<a href="/dda91e" class="tb">#dda91e</a>
<pre class="code"><code>#dda91e</code> <code>rgb(221,169,30)</code></pre>
</li><li style="background-color:#daa520;">
<a href="/daa520" class="tb">#daa520</a>
<pre class="code"><code>#daa520</code> <code>rgb(218,165,32)</code></pre>
</li> </ul>
<strong>Reverse HSV Gradient</strong>
</div>
<div class="scheme gradient linear">
<div style="background: #ffd700;
background: -webkit-linear-gradient(left, #ffd700, #daa520);
background: -moz-linear-gradient(left, #ffd700, #daa520);
background: -ms-linear-gradient(left, #ffd700, #daa520);
background: -o-linear-gradient(left, #ffd700, #daa520);
background: linear-gradient(to right, #ffd700, #daa520);">
</div>
<pre class="code"><code>background: #ffd700;
background: -webkit-linear-gradient(left, #ffd700, #daa520);
background: -moz-linear-gradient(left, #ffd700, #daa520);
background: -ms-linear-gradient(left, #ffd700, #daa520);
background: -o-linear-gradient(left, #ffd700, #daa520);
background: linear-gradient(to right, #ffd700, #daa520);
</code></pre>
<strong id="linear" data-hex="ffd700 daa520">
Linear Gradient (Select :
<a id="left" href="#">left to right</a>,
<a id="right" href="#">right to left</a>,
<a id="top" href="#">top to bottom</a>,
<a id="bottom" href="#">bottom to top)</a>
</strong>
</div>
</section>
</div>
</div>
</article>
[/html]
ЭТО ВЕСЕЛО! Главное найти «HTLM в сообщениях»...
Именно исходный код страницы. просмотреть. Не элемента, да, а до этого — я копалась в коде элемента по клавише F12 и нашла, что и где искать.
