Lihat sumber bagi Warna sesawang

{{Html series}}

'''Warna sesawang''' ({{lang-en|Web colors}}) adalah [[Warna|warna]] yang digunakan di dalam rekabentuk laman-laman [[jaringan sejagat|sesawang]], dan kaedah-kaedah untuk menggambarkan dan mengkhususkan warna-warna berkenaan. Kod-kod warna keenambelasan bermula dengan satu cincang (#).<ref>Web Design in a Nutshell By Jennifer Niederst Robbins. Page 103.</ref><ref>Beginning CSS By Richard York. Page 71-72.</ref> 

Pengarang-pengarang laman-laman sesawang mempunyai kepelbagaian pilihan yang ada untuk mengkhususkan warna-warna bagi unsur-unsur dokumen sesawang. Warna-warna boleh dikhususkan sebagai satu format [[RGB]]trirangkap [[Nombor perenambelasan|perenambelasan]] [[RGB]]  (satu ''hex triplet''); mereka mungkin boleh dikhususkan merujuk kepada nama-nama [[Bahasa Inggeris|Inggeris]] biasa mereka dalam beberapa kes. Selalunya, satu [[Peralatan warna|peralatan warna]] atau [[Perisian grafik|perisian grafik]] lain digunakan untuk menjana nilai-nilai warna.

Versi  [[Mosaic (pelayar web)|Mosaic]] yang pertama dan [[Netscape Navigator]] menggunakan [[Nama-nama warna X11]] sebagai asas bagi senarai warna mereka, kerana kedua-duanya bermula sebagai aplikasi [[X Window System]].<ref>[http://www.splus.com/support/splus80win/graphics.pdf Guide to Graphics]{{Pautan putus|date=Ogos 2021 |bot=InternetArchiveBot |fix-attempted=yes }}. SP LUS, splus.com. Page 13.</ref>

Warna-warna sesawang mempunyai definisi metrik warna  yang jelas, [[sRGB]], yang mengaitkan  [[Kekromatan|kekromatan]] suatu set [[Fosfor|fosfor]] tertentu, satu lengkungan perpindahan diberi, titik putih mudah suai, dan keadaan-keadaan tontonan.<ref>Digital Color Imaging Handbook By Gaurav Sharma. ISBN 084930900X</ref> Semuanya ini telah dipilih untuk menjadi serupa dengan monitor-monitor yang sebenar dan keadaan-keadaan tontonan, supaya walaupun dengan ketiadaan penerapan [[Pengurusan warna|pengurusan warna]] adalah dekat dengan nilai-nilai yang khusus. Walaupun begitu, [[Agen pengguna|agen pengguna]]  berubah-ubah dalam ketepatan dengan yang mana mereka wakilkan warna-warna yang khusus. Lebih tinggi agen-agen pengguna menggunakan pengurusan warna untuk mendapatkan ketepatan warna yang lebih baik; ini adalah sangat penting bagi aplikasi-aplikasi bagi Sesawang-ke-percefp
FFFP
takan.

== Trirangkap heks ==

Satu '''trirangkap heks''' adalah satu nombor enam digit, tiga-[[bait]] [[perenambelas]] digunakan di dalam [[HTML]], [[Cascading Style Sheets|CSS]], [[Scalable Vector Graphics|SVG]], dan aplikasi-aplikasi perkomputeran yang lain , untuk mewakilkan [[Warna|warna-warna]]. Bait-bait mewakilkan komponen-komponen warna merah, hijau dan biru. Satu bait mewakilkan satu nombor di dalam julat 00 ke FF (dalam notasi perenambelas), atau 0 ke 255 dalam notasi perenambelas. Ini mewakilkan sekurang-kurangnya keamatan (0) hingga ke paling banyak (255) bagi setiap komponen warna. Trirangkap heks dibentuk oleh  rangkaian tiga bait di dalam notasi perenambelas, di dalam aturan yang berikut: 

:Bait 1: nilai merah (jenis warna merah)

:Bait 2: nilai hijau (jenis warna hijau)

:Bait 3: nilai biru (jenis warna biru)

Sebagai contoh, pertimbangkan warna dimana nilai-nilai merah/hijau/biru adalah nombor-nombor perpuluhan: merah=36, hijau=104, biru=160 (satu warna hijau kekelabuan). Nombor-nombor perpuluhan adalah 36, 104 dan 160 adalah setara dengan nombor-nombor perenambelas 24, 68 dan A0 masing-masing. Trirangkap heks ini diperolehi dengan merangkaikan digit-digit 6 perenambelas sekaligus, 2468A0 sebagai contoh.

{{terjemah|en|Web colors}}

Note that if any one of the three color values is less than 16 (decimal) or 10 (hex), it must be represented with a leading zero so that the triplet always has exactly six digits. For example, the decimal triplet 4, 8, 16 would be represented by the hex digits 04, 08, 10, forming the hex triplet 040810.

The number of colors that can be represented by this system is

:<math>256 \times 256 \times 256 = 16,777,216</math>

An abbreviated, three (hexadecimal) digit form is sometimes used.<ref>[http://www.w3.org/TR/css3-color/#rgb-color CSS3 color module]</ref> Expanding this form to the six-digit form is as simple as doubling each digit: 09C becomes 0099CC. This allows each color value to cover its full range from 00 to FF.

The three-digit form is described in the CSS specification, not in HTML.  As a result, the three digit form in an attribute other than "style" is not interpreted as a valid color in some browsers. {{fact|date=April 2009}}

===Jadual warna===

Di dalam jadual di bawah, setiap kod warna yang disenaraikan adalah satutrengkas bagi nilai RGB; sebagai contoh, kod 609 adalah setara dengan kod RGB 102-0-153 atau kod HEX #660099.

 

<div align="center">

{| width="80%" class="wikitable" style="color:white;width:80%;text-align:center"

|+ style="color:black"|''' Web-Safe Colors'''

| style="background: #000;" | <u>*000*</u>

| style="background: #300;" | 300

| style="background: #600;" | 600

| style="background: #900;" | 900

| style="background: #C00;" | C00

| style="background: #F00;" | <u>*F00*</u>

|-

| style="background: #003;" | <u>*003*</u>

| style="background: #303;" | 303

| style="background: #603;" | 603

| style="background: #903;" | 903

| style="background: #C03;" | C03

| style="background: #F03;" | <u>*F03*</u>

|-

| style="background: #006;" | 006

| style="background: #306;" | 306

| style="background: #606;" | 606

| style="background: #906;" | 906

| style="background: #C06;" | C06

| style="background: #F06;" | F06

|-

| style="background: #009;" | 009

| style="background: #309;" | 309

| style="background: #609;" | 609

| style="background: #909;" | 909

| style="background: #C09;" | C09

| style="background: #F09;" | F09

|-

| style="background: #00C;" | 00C

| style="background: #30C;" | 30C

| style="background: #60C;" | 60C

| style="background: #90C;" | 90C

| style="background: #C0C;" | C0C

| style="background: #F0C;" | F0C

|-

| style="background: #00F;" | <u>*00F*</u>

| style="background: #30F;" | 30F

| style="background: #60F;" | 60F

| style="background: #90F;" | 90F

| style="background: #C0F;" | C0F

| style="background: #F0F;" | <u>*F0F*</u>

|-

| style="background: #030;" | 030

| style="background: #330;" | 330

| style="background: #630;" | 630

| style="background: #930;" | 930

| style="background: #C30;" | C30

| style="background: #F30;" | F30

|-

| style="background: #033;" | 033

| style="background: #333;" | 333

| style="background: #633;" | 633

| style="background: #933;" | 933

| style="background: #C33;" | C33

| style="background: #F33;" | F33

|-

| style="background: #036;" | 036

| style="background: #336;" | 336

| style="background: #636;" | 636

| style="background: #936;" | 936

| style="background: #C36;" | C36

| style="background: #F36;" | F36

|-

| style="background: #039;" | 039

| style="background: #339;" | 339

| style="background: #639;" | 639

| style="background: #939;" | 939

| style="background: #C39;" | C39

| style="background: #F39;" | F39

|-

| style="background: #03C;" | 03C

| style="background: #33C;" | 33C

| style="background: #63C;" | 63C

| style="background: #93C;" | 93C

| style="background: #C3C;" | C3C

| style="background: #F3C;" | F3C

|-

| style="background: #03F;" | 03F

| style="background: #33F;" | 33F

| style="background: #63F;" | 63F

| style="background: #93F;" | 93F

| style="background: #C3F;" | C3F

| style="background: #F3F;" | F3F

|-

| style="background: #060;" | 060

| style="background: #360;" | 360

| style="background: #660;" | 660

| style="background: #960;" | 960

| style="background: #C60;" | C60

| style="background: #F60;" | F60

|-

| style="background: #063;" | 063

| style="background: #363;" | 363

| style="background: #663;" | 663

| style="background: #963;" | 963

| style="background: #C63;" | C63

| style="background: #F63;" | F63

|-

| style="background: #066;" | 066

| style="background: #366;" | 366

| style="background: #666;" | 666

| style="background: #966;" | 966

| style="background: #C66;" | C66

| style="background: #F66;" | F66

|-

| style="background: #069;" | 069

| style="background: #369;" | 369

| style="background: #669;" | 669

| style="background: #969;" | 969

| style="background: #C69;" | C69

| style="background: #F69;" | F69

|-

| style="background: #06C;" | 06C

| style="background: #36C;" | 36C

| style="background: #66C;" | 66C

| style="background: #96C;" | 96C

| style="background: #C6C;" | C6C

| style="background: #F6C;" | F6C

|-

| style="background: #06F;" | 06F

| style="background: #36F;" | 36F

| style="background: #66F;" | 66F

| style="background: #96F;" | 96F

| style="background: #C6F;" | C6F

| style="background: #F6F;" | F6F

|-

| style="background: #090;" | 090

| style="background: #390;" | 390

| style="background: #690;" | 690

| style="background: #990;" | 990

| style="background: #C90;" | C90

| style="background: #F90;" | F90

|-

| style="background: #093;" | 093

| style="background: #393;" | 393

| style="background: #693;" | 693

| style="background: #993;" | 993

| style="background: #C93;" | C93

| style="background: #F93;" | F93

|-

| style="background: #096;" | 096

| style="background: #396;" | 396

| style="background: #696;" | 696

| style="background: #996;" | 996

| style="background: #C96;" | C96

| style="background: #F96;" | F96

|-

| style="background: #099;" | 099

| style="background: #399;" | 399

| style="background: #699;" | 699

| style="background: #999;" | 999

| style="background: #C99;" | C99

| style="background: #F99;" | F99

|-

| style="background: #09C;" | 09C

| style="background: #39C;" | 39C

| style="background: #69C;" | 69C

| style="background: #99C;" | 99C

| style="background: #C9C;" | C9C

| style="background: #F9C;" | F9C

|-

| style="background: #09F;" | 09F

| style="background: #39F;" | 39F

| style="background: #69F;" | 69F

| style="background: #99F;" | 99F

| style="background: #C9F;" | C9F

| style="background: #F9F;" | F9F

|- style="color: black;"

| style="background: #0C0;" | 0C0

| style="background: #3C0;" | 3C0

| style="background: #6C0;" | 6C0

| style="background: #9C0;" | 9C0

| style="background: #CC0;" | CC0

| style="background: #FC0;" | FC0

|- style="color: black;"

| style="background: #0C3;" | 0C3

| style="background: #3C3;" | 3C3

| style="background: #6C3;" | 6C3

| style="background: #9C3;" | 9C3

| style="background: #CC3;" | CC3

| style="background: #FC3;" | FC3

|- style="color: black;"

| style="background: #0C6;" | 0C6

| style="background: #3C6;" | 3C6

| style="background: #6C6;" | 6C6

| style="background: #9C6;" | 9C6

| style="background: #CC6;" | CC6

| style="background: #FC6;" | FC6

|- style="color: black;"

| style="background: #0C9;" | 0C9

| style="background: #3C9;" | 3C9

| style="background: #6C9;" | 6C9

| style="background: #9C9;" | 9C9

| style="background: #CC9;" | CC9

| style="background: #FC9;" | FC9

|- style="color: black;"

| style="background: #0CC;" | 0CC

| style="background: #3CC;" | 3CC

| style="background: #6CC;" | 6CC

| style="background: #9CC;" | 9CC

| style="background: #CCC;" | CCC

| style="background: #FCC;" | FCC

|- style="color: black;"

| style="background: #0CF;" | 0CF

| style="background: #3CF;" | 3CF

| style="background: #6CF;" | 6CF

| style="background: #9CF;" | 9CF

| style="background: #CCF;" | CCF

| style="background: #FCF;" | FCF

|- style="color: black;"

| style="background: #0F0;" | <u>*0F0*</u>

| style="background: #3F0;" | 3F0

| style="background: #6F0;" | <u>*6F0*</u>

| style="background: #9F0;" | 9F0

| style="background: #CF0;" | CF0

| style="background: #FF0;" | <u>*FF0*</u>

|- style="color: black;"

| style="background: #0F3;" | 0F3

| style="background: #3F3;" | <u>*3F3*</u>

| style="background: #6F3;" | <u>*6F3*</u>

| style="background: #9F3;" | 9F3

| style="background: #CF3;" | CF3

| style="background: #FF3;" | <u>*FF3*</u>

|- style="color: black;"

| style="background: #0F6;" | <u>*0F6*</u>

| style="background: #3F6;" | <u>*3F6*</u>

| style="background: #6F6;" | 6F6

| style="background: #9F6;" | 9F6

| style="background: #CF6;" | <u>*CF6*</u>

| style="background: #FF6;" | <u>*FF6*</u>

|- style="color: black;"

| style="background: #0F9;" | 0F9

| style="background: #3F9;" | 3F9

| style="background: #6F9;" | 6F9

| style="background: #9F9;" | 9F9

| style="background: #CF9;" | CF9

| style="background: #FF9;" | FF9

|- style="color: black;"

| style="background: #0FC;" | <u>*0FC*</u>

| style="background: #3FC;" | <u>*3FC*</u>

| style="background: #6FC;" | 6FC

| style="background: #9FC;" | 9FC

| style="background: #CFC;" | CFC

| style="background: #FFC;" | FFC

|- style="color: black;"

| style="background: #0FF;" | <u>*0FF*</u>

| style="background: #3FF;" | <u>*3FF*</u>

| style="background: #6FF;" | <u>*6FF*</u>

| style="background: #9FF;" | 9FF

| style="background: #CFF;" | CFF

| style="background: #FFF;" | <u>*FFF*</u>

|}</div>

===Warna-warna sesawang paling selamat===

Designers were often encouraged to stick to these 216 "web-safe" colors in their websites; however, 8-bit color displays were much more common when the 216-color palette was developed than they are now. David Lehn and Hadley Stern have since discovered that only 22 of the 216 colors in the web-safe palette are reliably displayed without inconsistent remapping on [[highcolour|16-bit computer displays]]. They called these 22 colors the "really safe" palette; it consists mainly of shades of green and yellow, as can be seen in the table above, where the "really safe" colors are underlined.<ref>[http://www.physics.ohio-state.edu/~wilkins/color/websafecolors.html Death of the Websafe Color Palette?]</ref>

== Warna-warna CSS==

Bahasa [[Cascading Style Sheets]] mendefinisikan nombor penamaan warna sebagai  HTML 4 spec, dinamakan penyenaraian 16 [[Warna sesawang#Nama-nama warna HTML|sebelumnya]].

Tambahan pula, CSS 2.1 menambah warna 'oren' kepada senarai tersebut<ref>{{cite web |url=http://www.w3.org/TR/CSS21/syndata.html#color-units |title=CSS 2.1 Specification: Syntax and basic data types: Colors |date=2009-09-08 |accessdate=2009-12-21 }}</ref>:

{| class="wikitable"
!Warna
!Perenambelas
|-
|[[Jingga|oren]]
|style="background:#FFA500; color:#000; font-family:monospace;"|#FFA500
|}

CSS 2, [[SVG]] dan CSS 2.1 juga membenarkan pengarang-pengarang sesawang menggunakan apa yang dinamakan sebagai ''warna sistem'', yang merupakan nama-nama warna yang nilainya diambil daripada [[sistem pengendalian]]. Ini membolehkan pengarang-pengarang sesawang untuk menggayakan kandungan mereka sebaris dengan sistem pengendalian agen pengguna.<ref>[http://www.w3.org/TR/CSS21/ui.html#system-colors User interface - System colors]</ref> Pada 2004, terdapat tanda-tanda bahawa modul warna [[Cascading_Style_Sheets#CSS_3|CSS3]] akan kembali menarik nilai-nilai ini, menandakan mereka "usang", tetapi ini mungkin berubah.<ref>[http://www.w3.org/TR/css3-color/#css2-system CSS3 Color Module - CSS2 System Colors]</ref>

Pengkhususan  pembangunan  CSS3 akan juga memperkenalkan nilai-nilai [[Ruang warna HSL|ruang warna HSL]] kepada "style sheets":

 /* RGB model */

 p { color: #F00 }       /* #rgb */

 p { color: #FF0000 }      /* #rrggbb */

 p { color: rgb(255,0,0) }   /* integer range 0 - 255 */

 p { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */

 /* RGB with alpha channel, added to CSS3 */

 p { color: rgba(255,0,0,0.5) } /* 0.5 opacity, semi-transparent */

 /* HSL model, added to CSS3 */

 p { color: hsl(0, 100%, 50%) }  /* red */

 p { color: hsl(120, 100%, 50%) } /* green */ 

 p { color: hsl(120, 100%, 25%) } /* dark green */ 

 p { color: hsl(120, 100%, 75%) } /* light green */ 

 p { color: hsl(120, 50%, 50%) } /* pastel green */

 /* HSL model with alpha channel */

 p { color: hsla(120, 100%, 50%, 1) }  /* green */

 p { color: hsla(120, 100%, 50%, 0.5) } /* semi-transparent green */

 p { color: hsla(120, 100%, 50%, 0.1) } /* very transparent green */

== Lihat juga ==
* [[Peralatan warna]]
* [[Senarai warna]]
* [[Senarai palet warna]]

== Rujukan ==
{{reflist}}

== Pautan luar ==
* [http://igotbored.freehostia.com/chart.php 4,096 Web-Safe Colors] {{Webarchive|url=https://web.archive.org/web/20090411044734/http://igotbored.freehostia.com/chart.php |date=2009-04-11 }}
* [http://www.w3.org/TR/CSS21/syndata.html#color-units CSS2.1 Color Specification]
* [http://www.uize.com/examples/sortable-color-table.html Sortable Table of X11 Colors]
* {{dmoz|Computers/Graphics/Web/Colors}}
* [http://christtrek.dyndns.org:8000/~tim/web/wsx11colors.html X11/browser colors, with closest web-safe equivalents] {{Webarchive|url=https://web.archive.org/web/20091203035813/http://christtrek.dyndns.org:8000/~tim/web/wsx11colors.html |date=2009-12-03 }}
* [http://www.color-hex.com/ Color hex codes with rgb chart graph]

{{web colors}}
{{Color topics}}

<!--Categories-->
[[Kategori:Warna]]
[[Kategori:Pembangunan web]]
[[Kategori:Reka bentuk web]]

<!--Other languages-->
[[eu:Wikipedia:Kolorea]]