A hexadecimális szín a következővel van megadva: #RRGGBB, ahol az RR (piros), GG (zöld) és BB (kék) hexadecimális egész számok határozzák meg a a szín.
A CSS-ben egy szín a következő formában adható meg hexadecimális értékkel:
#rrggbb
Ahol rr (piros), gg (zöld) és bb (kék) hexadecimális értékek 00 és ff között (ugyanaz, mint a decimális 0-255).
Például az #ff0000 pirosként jelenik meg, mert a piros a legmagasabb értékre (ff), a többi pedig a a legalacsonyabb érték (00).
A fekete megjelenítéséhez állítsa az összes értéket 00-ra, így: #000000.
A fehér megjelenítéséhez állítsa az összes értéket ff-re, pl ez: #ffffff.
Kísérletezzen az alábbi HEX-értékek keverésével:
RED
GREEN
BLUE
Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<body>
<h1>Specify colors using HEX values</h1>
<h2 style="background-color:#ff0000;">#ff0000</h2>
<h2 style="background-color:#0000ff;">#0000ff</h2>
<h2 style="background-color:#3cb371;">#3cb371</h2>
<h2 style="background-color:#ee82ee;">#ee82ee</h2>
<h2 style="background-color:#ffa500;">#ffa500</h2>
<h2 style="background-color:#6a5acd;">#6a5acd</h2>
</body>
</html>
A szürke árnyalatait gyakran egyenlő értékekkel határozzák meg mind a 3 fényforráshoz:
Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<body>
<h1>Shades of gray</h1>
<p>By using equal values for red, green, and blue, you will get different shades of gray:</p>
<h2 style="background-color:#3c3c3c;">#3c3c3c</h2>
<h2 style="background-color:#616161;">#616161</h2>
<h2 style="background-color:#787878;">#787878</h2>
<h2 style="background-color:#b4b4b4;">#b4b4b4</h2>
<h2 style="background-color:#f0f0f0;">#f0f0f0</h2>
<h2 style="background-color:#f9f9f9;">#f9f9f9</h2>
</body>
</html>
Néha egy 3 számjegyű hexadecimális kódot láthat a CSS-forrásban.
A 3 számjegyű hexadecimális kód néhány 6 számjegyű hexadecimális kód rövidítése.
A 3 számjegyű hexadecimális kód a következő formában van:
#rgb
Ahol r, g és b a piros, zöld és kék komponenseket jelentik 0 és f közötti értékkel.
A 3 jegyű hexadecimális kód csak akkor használható, ha mindkét érték (RR, GG és BB) megegyezik minden komponens. Tehát, ha van #ff00cc, akkor ezt így írhatjuk fel: #f0c.
Íme egy példa:
body {
background-color: #fc9; /* same as #ffcc99 */
}
h1 {
color: #f0f; /* same as #ff00ff */
}
p {
color: #b58; /* same as #bb5588 */
} Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #fc9; /* same as #ffcc99 */
}
h1 {
color: #f0f; /* same as #ff00ff */
}
p {
color: #b58; /* same as #bb5588 */
}
</style>
</head>
<body>
<h1>CSS 3-digit Hex Code</h1>
<p>This is a paragraph.</p>
</body>
</html>