szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[:oktatas:web:css|< CSS]]

====== CSS színek ======

===== Színek beállítása =====


A színek az RGB színtér használatával vagy nevekkel adhatók meg.


Szín névvel:
<code css>
p {
    background-color: olive;
}
</code>

Szín RGB kóddal, hexadecimálisan:
<code css>
p {
    background-color: #808000;
}
</code>

Szín RGB kóddal, decimálisan:
<code css>
p {
    background-color: rgb(128, 128, 0);
}
</code>

<code css>
p {
    background-color: rgba(128, 128, 0, 1);
}
</code>


Rövidítés:
<code css>
p {
    background-color: #333;
}
</code>

Egyenértékű ezzel:
<code css>
p {
    background-color: #333333;
}
</code>


===== Alapszínek =====



<html>
<table>
    <tr>
        <td style="background-color:#000000; width: 50px;"></td>
        <td style="padding: 2px 5px;">#000000</td>
        <td style="padding: 2px 5px;">rgb(0,0,0)</td>
    </tr>
    <tr>
        <td style="background-color:#ff0000; width: 50px;"></td>
        <td style="padding: 2px 5px;">#ff0000</td>
        <td style="padding: 2px 5px;">rgb(255,0,0)</td>
    </tr>
    <tr>
        <td style="background-color:#00ff00; width: 50px;"></td>
        <td style="padding: 2px 5px;">#00ff00</td>
        <td style="padding: 2px 5px;">rgb(0,255,0)</td>
    </tr>
    <tr>
        <td style="background-color:#0000ff; width: 50px;"></td>
        <td style="padding: 2px 5px;">#0000ff</td>
        <td style="padding: 2px 5px;">rgb(0,0,255)</td>
    </tr>
    <tr>
        <td style="background-color:#ffff00; width: 50px;"></td>
        <td style="padding: 2px 5px;">#ffff00</td>
        <td style="padding: 2px 5px;">rgb(255,255,0)</td>
    </tr>
    <tr>
        <td style="background-color:#00ffff; width: 50px;"></td>
        <td style="padding: 2px 5px;">#00ffff</td>
        <td style="padding: 2px 5px;">rgb(0,255,255)</td>
    </tr>
    <tr>
        <td style="background-color:#ff00ff; width: 50px;"></td>
        <td style="padding: 2px 5px;">#ff00ff</td>
        <td style="padding: 2px 5px;">rgb(255,0,255)</td>
    </tr>
    <tr>
        <td style="background-color:#c0c0c0; width: 50px;"></td>
        <td style="padding: 2px 5px;">#c0c0c0</td>
        <td style="padding: 2px 5px;">rgb(192,192,192)</td>
    </tr>
    <tr>
        <td style="background-color:#ffffff; width: 50px;"></td>
        <td style="padding: 2px 5px;">#ffffff</td>
        <td style="padding: 2px 5px;">rgb(255,255,255)</td>
    </tr>
</table>


</html>


===== A piros árnyalatai =====


<html>
	HEX	RGB
<br>

<div style="display: inline-block; width:50px; height: 20px; background-color: #000000"></div> 	#000000 	rgb(0,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #080000"></div> 	#080000 	rgb(8,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #100000"></div> 	#100000 	rgb(16,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #180000"></div> 	#180000 	rgb(24,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #200000"></div> 	#200000 	rgb(32,0,0) <br> 
<div style="display: inline-block; width:50px; height: 20px; background-color: #280000"></div> 	#280000 	rgb(40,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #300000"></div> 	#300000 	rgb(48,0,0) <br> 
<div style="display: inline-block; width:50px; height: 20px; background-color: #380000"></div> 	#380000 	rgb(56,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #400000"></div> 	#400000 	rgb(64,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #480000"></div> 	#480000 	rgb(72,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #500000"></div> 	#500000 	rgb(80,0,0) <br> 
<div style="display: inline-block; width:50px; height: 20px; background-color: #580000"></div> 	#580000 	rgb(88,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #600000"></div> 	#600000 	rgb(96,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #680000"></div> 	#680000 	rgb(104,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #700000"></div> 	#700000 	rgb(112,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #780000"></div> 	#780000 	rgb(120,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #800000"></div> 	#800000 	rgb(128,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #880000"></div> 	#880000 	rgb(136,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #900000"></div> 	#900000 	rgb(144,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #980000"></div> 	#980000 	rgb(152,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #a00000"></div> 	#A00000 	rgb(160,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #a80000"></div> 	#A80000 	rgb(168,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #b00000"></div> 	#B00000 	rgb(176,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #b80000"></div> 	#B80000 	rgb(184,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #c00000"></div> 	#C00000 	rgb(192,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #c80000"></div> 	#C80000 	rgb(200,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #d00000"></div> 	#D00000 	rgb(208,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #d80000"></div> 	#D80000 	rgb(216,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #e00000"></div> 	#E00000 	rgb(224,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #e80000"></div> 	#E80000 	rgb(232,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #f00000"></div> 	#F00000 	rgb(240,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #f80000"></div> 	#F80000 	rgb(248,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #ff0000"></div> 	#FF0000 	rgb(255,0,0) <br>

</html>



===== A szürke árnyalatai =====
<html>

<div style="display: inline-block; width:50px; height: 20px; background-color: #000000"></div> 	#000000 	rgb(0,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #080808"></div> 	#080808 	rgb(8,8,8) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #101010"></div> 	#101010 	rgb(16,16,16) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #181818"></div> 	#181818 	rgb(24,24,24) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #202020"></div> 	#202020 	rgb(32,32,32) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #282828"></div> 	#282828 	rgb(40,40,40) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #303030"></div> 	#303030 	rgb(48,48,48) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #383838"></div> 	#383838 	rgb(56,56,56) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #404040"></div> 	#404040 	rgb(64,64,64) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #484848"></div> 	#484848 	rgb(72,72,72) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #505050"></div> 	#505050 	rgb(80,80,80) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #585858"></div> 	#585858 	rgb(88,88,88) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #606060"></div> 	#606060 	rgb(96,96,96) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #686868"></div> 	#686868 	rgb(104,104,104) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #707070"></div> 	#707070 	rgb(112,112,112) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #787878"></div> 	#787878 	rgb(120,120,120) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #808080"></div> 	#808080 	rgb(128,128,128) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #888888"></div> 	#888888 	rgb(136,136,136) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #909090"></div> 	#909090 	rgb(144,144,144) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #989898"></div> 	#989898 	rgb(152,152,152) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #a0a0a0"></div> 	#A0A0A0 	rgb(160,160,160) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #a8a8a8"></div> 	#A8A8A8 	rgb(168,168,168) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #b0b0b0"></div> 	#B0B0B0 	rgb(176,176,176) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #b8b8b8"></div> 	#B8B8B8 	rgb(184,184,184) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #c0c0c0"></div> 	#C0C0C0 	rgb(192,192,192) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #c8c8c8"></div> 	#C8C8C8 	rgb(200,200,200) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #d0d0d0"></div> 	#D0D0D0 	rgb(208,208,208) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #d8d8d8"></div> 	#D8D8D8 	rgb(216,216,216) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #e0e0e0"></div> 	#E0E0E0 	rgb(224,224,224) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #e8e8e8"></div> 	#E8E8E8 	rgb(232,232,232) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #f0f0f0"></div> 	#F0F0F0 	rgb(240,240,240) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #f8f8f8"></div> 	#F8F8F8 	rgb(248,248,248) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #ffffff"></div> 	#FFFFFF 	rgb(255,255,255) <br> 

</html>


===== A kék árnyalatai =====

<html>

<div style="display: inline-block; width:50px; height: 20px; background-color: #000000"></div> 	#000000 	rgb(0,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #000008"></div> 	#000008 	rgb(0,0,8) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #000010"></div> 	#000010 	rgb(0,0,16) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #000018"></div> 	#000018 	rgb(0,0,24) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #000020"></div> 	#000020 	rgb(0,0,32) <br> 
<div style="display: inline-block; width:50px; height: 20px; background-color: #000028"></div> 	#000028 	rgb(0,0,40) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #000030"></div> 	#000048 	rgb(0,0,48) <br> 
<div style="display: inline-block; width:50px; height: 20px; background-color: #000038"></div> 	#000038 	rgb(0,0,56) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #000040"></div> 	#000040 	rgb(0,0,64) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #000048"></div> 	#000048 	rgb(0,0,72) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #000050"></div> 	#000050 	rgb(0,0,80) <br> 
<div style="display: inline-block; width:50px; height: 20px; background-color: #000058"></div> 	#000058 	rgb(0,0,88) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #000060"></div> 	#000060 	rgb(0,0,96) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #000068"></div> 	#000068 	rgb(0,0,104) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #000070"></div> 	#000070 	rgb(0,0,112) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #000078"></div> 	#000078 	rgb(0,0,120) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #000080"></div> 	#000080 	rgb(0,0,128) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #000088"></div> 	#000088 	rgb(0,0,136) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #000090"></div> 	#000090 	rgb(0,0,144) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #000098"></div> 	#000089 	rgb(0,0,152) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #0000a0"></div> 	#0000a0 	rgb(0,0,160) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #0000a8"></div> 	#0000a8 	rgb(0,0,168) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #0000b0"></div> 	#0000b0 	rgb(0,0,176) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #0000b8"></div> 	#0000b8 	rgb(0,0,184) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #0000c0"></div> 	#0000c0 	rgb(0,0,192) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #0000c8"></div> 	#0000c8 	rgb(0,0,200) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #0000d0"></div> 	#0000d0 	rgb(0,0,208) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #0000d8"></div> 	#0000d8 	rgb(0,0,216) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #0000e0"></div> 	#0000e0 	rgb(0,0,224) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #0000e8"></div> 	#0000e8 	rgb(0,0,232) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #0000f0"></div> 	#0000f0 	rgb(0,0,240) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #0000f8"></div> 	#0000f8 	rgb(0,0,248) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #0000ff"></div> 	#0000ff 	rgb(0,0,255) <br>


</html>

===== A zöld árnyalatai====

<html>

<div style="display: inline-block; width:50px; height: 20px; background-color: #000000"></div> 	#000000 	rgb(0,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #000800"></div> 	#000800 	rgb(0,8,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #001000"></div> 	#001000 	rgb(0,16,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #001800"></div> 	#001800 	rgb(0,24,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #002000"></div> 	#002000 	rgb(0,32,0) <br> 
<div style="display: inline-block; width:50px; height: 20px; background-color: #002800"></div> 	#002800 	rgb(0,40,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #003000"></div> 	#004800 	rgb(0,48,0) <br> 
<div style="display: inline-block; width:50px; height: 20px; background-color: #003800"></div> 	#003800 	rgb(0,56,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #004000"></div> 	#004000 	rgb(0,64,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #004800"></div> 	#004800 	rgb(0,72,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #005000"></div> 	#005000 	rgb(0,80,0) <br> 
<div style="display: inline-block; width:50px; height: 20px; background-color: #005800"></div> 	#005800 	rgb(0,88,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #006000"></div> 	#006000 	rgb(0,96,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #006800"></div> 	#006800 	rgb(0,104,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #007000"></div> 	#007000 	rgb(0,112,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #007800"></div> 	#007800 	rgb(0,120,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #008000"></div> 	#008000 	rgb(0,128,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #008800"></div> 	#008800 	rgb(0,136,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #009000"></div> 	#009000 	rgb(0,144,08) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #009800"></div> 	#008900 	rgb(0,152,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #00a000"></div> 	#00a000 	rgb(0,160,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #00a800"></div> 	#00a800 	rgb(0,168,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #00b000"></div> 	#00b000 	rgb(0,176,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #00b800"></div> 	#00b800 	rgb(0,184,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #00c000"></div> 	#00c000 	rgb(0,192,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #00c800"></div> 	#00c800 	rgb(0,200,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #00d000"></div> 	#00d000 	rgb(0,208,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #00d800"></div> 	#00d800 	rgb(0,216,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #00e000"></div> 	#00e000 	rgb(0,224,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #00e800"></div> 	#00e800 	rgb(0,232,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #00f000"></div> 	#00f000 	rgb(0,240,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #00f800"></div> 	#00f800 	rgb(0,248,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #00ff00"></div> 	#00ff00 	rgb(0,255,0) <br>



</html>



===== A sárga árnyalatai =====


<html>

<div style="display: inline-block; width:50px; height: 20px; background-color: #000000"></div> 	#000000 	rgb(0,0,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #080800"></div> 	#080800 	rgb(8,8,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #101000"></div> 	#101000 	rgb(16,16,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #181800"></div> 	#181800 	rgb(24,24,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #202000"></div> 	#202000 	rgb(32,32,0) <br> 
<div style="display: inline-block; width:50px; height: 20px; background-color: #282800"></div> 	#282800 	rgb(40,40,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #303000"></div> 	#484800 	rgb(48,48,0) <br> 
<div style="display: inline-block; width:50px; height: 20px; background-color: #383800"></div> 	#383800 	rgb(56,56,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #404000"></div> 	#404000 	rgb(64,64,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #484800"></div> 	#484800 	rgb(72,72,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #505000"></div> 	#505000 	rgb(80,80,0) <br> 
<div style="display: inline-block; width:50px; height: 20px; background-color: #585800"></div> 	#585800 	rgb(88,88,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #606000"></div> 	#606000 	rgb(96,96,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #686800"></div> 	#686800 	rgb(104,104,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #707000"></div> 	#707000 	rgb(112,112,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #787800"></div> 	#787800 	rgb(120,120,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #808000"></div> 	#808000 	rgb(128,128,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #888800"></div> 	#888800 	rgb(136,136,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #909000"></div> 	#909000 	rgb(144,144,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #989800"></div> 	#898900 	rgb(152,152,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #a0a000"></div> 	#a0a000 	rgb(160,160,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #a8a800"></div> 	#a8a800 	rgb(168,168,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #b0b000"></div> 	#b0b000 	rgb(176,176,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #b8b800"></div> 	#b8b800 	rgb(184,184,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #c0c000"></div> 	#c0c000 	rgb(192,192,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #c8c800"></div> 	#c8c800 	rgb(200,200,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #d0d000"></div> 	#d0d000 	rgb(208,208,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #d8d800"></div> 	#d8d800 	rgb(216,216,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #e0e000"></div> 	#e0e000 	rgb(224,224,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #e8e800"></div> 	#e8e800 	rgb(232,232,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #f0f000"></div> 	#f0f000 	rgb(240,240,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #f8f800"></div> 	#f8f800 	rgb(248,248,0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #ffff00"></div> 	#ffff00 	rgb(255,255,0) <br>





</html>


===== Aranyárnyalatok =====


Szűkebb paletta:



<html>
<div style="display: inline-block; width:50px; height: 20px; background-color: #fafad2"></div> 	#fafad2 rgb(250,250,210) lightgoldenrodyellow<br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #eee8aa"></div> 	#eee8aa rgb(238,232,170) palegoldenrod<br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #f0e68c"></div> 	#f0e68c rgb(240,230,140) khaki<br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #daa520"></div> 	#daa520 rgb(218,165,32) goldenrod<br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #ffd700"></div> 	#ffd700 rgb(255,215,0) gold<br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #ffa500"></div> 	#ffa500 rgb(255,165,0) orange<br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #ff8c00"></div> 	#ff8c00 rgb(255,140,0) darkorange<br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #cd853f"></div> 	#cd853f rgb(205,133,63) peru<br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #d2691e"></div> 	#d2691e rgb(210,105,30) chocolate<br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #8b4513"></div> 	#8b4513 rgb(139,69,19) saddlebrown<br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #a0522d"></div> 	#a0522d rgb(160, 82, 45) sienna<br>
</html>



Teljes paletta lesz egyszer:
<html>
<div style="display: inline-block; width:50px; height: 20px; background-color: #fcfc80"></div> 	#fcfc80 	rgb(252,252,128) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #fcf87c"></div> 	#fcf87c 	rgb(252,248,124) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #fcf478"></div> 	#fcf478 	rgb(252,244,120) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #f8f478"></div> 	#f8f478 	rgb(248,244,120) <br>



...

<br>

<div style="display: inline-block; width:50px; height: 20px; background-color: #e8cc48"></div> 	#e8cc48 	rgb(232, 204, 72) <br>

...

<br>


<div style="display: inline-block; width:50px; height: 20px; background-color: #cc980c"></div> 	#cc980c 	rgb(204, 152, 12) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #cc9408"></div> 	#cc9408 	rgb(204, 148, 8) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #cc9004"></div> 	#cc9004 	rgb(204, 144, 4) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #c88c00"></div> 	#c88c00 	rgb(200, 140, 0) <br>
<div style="display: inline-block; width:50px; height: 20px; background-color: #c48800"></div> 	#c48800 	rgb(196, 136, 0) <br>


</html>