Valoarea HEX
O culoare hexazecimală (hex) este scrisă ca #rrggbb.
Aici rr (roșu), gg (verde) și bb (albastru) sunt valori hex între 00 și ff, care este același interval ca 0 până la 255 în zecimal.
De exemplu, #ff0000 este roșu, pentru că roșul este la maxim (ff), iar celelalte sunt la minim (00). Folosește #000000 pentru negru și #ffffff pentru alb.
Culori HEX
Șase culori scrise ca valori hex pe 6 cifre.
Prompt
O pagină HTML care arată mai multe culori scrise ca valori hex pe 6 cifre.
Creează șase titluri cu culori de fundal: #ff0000, #0000ff, #3cb371, #ee82ee, #ffa500 și #6a5acd. Etichetează fiecare cu valoarea sa hex.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>
</body>
</html>
Nuanțe de gri
Nuanțele de gri se obțin atunci când perechile roșu, verde și albastru sunt egale.
Prompt
O pagină HTML care arată nuanțe de gri realizate cu perechi hex egale pentru roșu, verde și albastru.
Creează șase titluri cu culori de fundal: #3c3c3c, #616161, #787878, #b4b4b4, #f0f0f0 și #f9f9f9. Etichetează fiecare.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1 style="background-color:#3c3c3c;">#3c3c3c</h1>
<h1 style="background-color:#616161;">#616161</h1>
<h1 style="background-color:#787878;">#787878</h1>
<h1 style="background-color:#b4b4b4;">#b4b4b4</h1>
<h1 style="background-color:#f0f0f0;">#f0f0f0</h1>
<h1 style="background-color:#f9f9f9;">#f9f9f9</h1>
</body>
</html>
Valoarea HEX pe 3 Cifre
Uneori vei vedea un cod hex pe 3 cifre, scris ca #rgb. Este o prescurtare pentru unele coduri pe 6 cifre.
Poate fi folosit doar atunci când ambele cifre ale fiecărei perechi sunt identice. Astfel, #ff00cc poate fi scurtat la #f0c.
Exemplu
Fiecare cod pe 3 cifre corespunde codului său pe 6 cifre.
Prompt
O pagină HTML care folosește prescurtarea hex pe 3 cifre într-un bloc de stil intern.
Setează fundalul body-ului la #fc9 (la fel ca #ffcc99), culoarea
<h1> la #f0f (la fel ca #ff00ff) și culoarea <p> la #b58 (la fel ca #bb5588). Adaugă un titlu și un paragraf.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: #fc9; /* same as #ffcc99 */
}
h1 {
color: #f0f; /* same as #ff00ff */
}
p {
color: #b58; /* same as #bb5588 */
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>This paragraph uses a 3-digit hex color.</p>
</body>
</html>