Color pada CSS
https://www.codepolitan.com/css-color-dan-background
Ditulis oleh Toni Haryanto, dipublikasi pada 20 Jul 2016
Sebagai format untuk mendeskripsikan tampilan
sebuah halaman HTML tentu CSS memiliki kapasitas untuk mengatur warna
dari elemen-elemen tertentu seperti teks dan latar belakang
(background). CSS menggunakan format tertentu untuk
mendefinisikan warna.
Ada beberapa format penulisan warna pada CSS, diantaranya menggunakan nama, dengan kode RGB dan kode Hexadesimal.
Nama Warna
Warna dapat dipanggil langsung dengan namanya dalam bahasa
inggris. HTML dan CSS sudah mendefinisikan 140 nama warna standar,
selengkapnya dapat dilihat di halaman selanjutnya.
|
red |
|
green |
|
blue |
|
black |
|
orange |
|
yellow |
|
purple |
RGB
Warna juga dapat ditulis dengan menggunakan format rgb(red, green,
blue). Format ini mendukung lebih banyak warna spesifik di luar
yang sudah didefinisikan namanya. Setiap parameter (red, green,
blue) menunjukkan intensitas warna, dengan nilai 0 - 255. Sebagai
contoh, rgb(0, 0, 255) akan menampilkan warna biru (blue), karena
parameter red bernilai 0, green bernilai 0 dan blue bernilai maksimum
255. Selain itu, nilai parameter juga dapat ditulis dengan menggunakan
persentase (%). Misalnya rgb(0, 0, 50%) sama dengan rgb(0, 0, 128).
Kamu dapat mencoba nilai RGB pada simulasi di bawah ini:
Hexadesimal
Warna dapat ditulis lebih pendek dengan menggunakan
nilai hexadesimal. Format penulisan warne hexadesimal adalah #RRGGBB,
dimana RR (red), GG (green) dan BB (blue) adalah nilai untuk intensitas
warna dengan rentang nilai 0 - FF dalam sistem bilangan hexadesimal.
Contohnya, #00FF00 akan menampilkan warna green, atau setara dengan
rgb(0, 255, 0).
Cobalah simulasi warna hexadesimal di bawah ini.
Kode warna hexadesimal juga dapat dibuat lebih sederhana lagi, dengan
hanya menggunakan satu digit hexadesimal untuk setiap warna dasar,
dengan format penulisan #RGB. Masing-masing warna dasar memiliki rentang
nilai 0 - F, sehingga variasi warnanya pun lebih terbatas dibanding
dengan format sebelumya. Kode hex #F00 akan menghasilkan warna yang sama
dengan #FF0000 yakni merah.
Contoh Penerapan Warna
Berikut adalah beberapa contoh penerapan warna pada elemen HTML yang memiliki properti warna.
Warna pada Teks
Untuk memberikan warna pada teks, kita menggunakan properti
color.
p {color: red;}
kode di atas akan membuat warna teks pada semua elemen
<p> menjadi berwarna merah.
Warna pada Background
Untuk memberikan warna latar pada suatu elemen, kita menggunakan properti
background-color.
<div style="background-color: rgb(255, 0, 0);">Teks dengan warna latar merah.</div>
kode diatas akan menampilkan teks dengan warna latar merah.
Warna pada Border
Untuk memberikan warna pada outline garis, kita menggunakan properti
border-color.
<div class="box">Hello Programmer!</div>
<style>.box {border-width: 1px; border-color: #ff0000;}</style>
kode di atas akan menampilkan kotak berisi teks dengan warna garis outline kotak berwarna merah.
Berikut adalah contoh penerapannya beserta hasil yang dapat diamati.
Nama-nama Warna
Seperti pada penjelasan sebelumnya, kita dapat menggunakan warna yang
sudah memiliki nama pada CSS. Berikut ini adalah daftar dari 140 warna
yang sudah terdefinisi dan dikenali namanya di CSS.
| Nama Warna |
Hex |
RGB |
Color |
| AliceBlue |
#F0F8FF |
rgb(240,248,255) |
|
| AntiqueWhite |
#FAEBD7 |
rgb(250,235,215) |
|
| Aqua |
#00FFFF |
rgb(0,255,255) |
|
| Aquamarine |
#7FFFD4 |
rgb(127,255,212) |
|
| Azure |
#F0FFFF |
rgb(240,255,255) |
|
| Beige |
#F5F5DC |
rgb(245,245,220) |
|
| Bisque |
#FFE4C4 |
rgb(255,228,196) |
|
| Black |
#000000 |
rgb(0,0,0) |
|
| BlanchedAlmond |
#FFEBCD |
rgb(255,235,205) |
|
| Blue |
#0000FF |
rgb(0,0,255) |
|
| BlueViolet |
#8A2BE2 |
rgb(138,43,226) |
|
| Brown |
#A52A2A |
rgb(165,42,42) |
|
| BurlyWood |
#DEB887 |
rgb(222,184,135) |
|
| CadetBlue |
#5F9EA0 |
rgb(95,158,160) |
|
| Chartreuse |
#7FFF00 |
rgb(127,255,0) |
|
| Chocolate |
#D2691E |
rgb(210,105,30) |
|
| Coral |
#FF7F50 |
rgb(255,127,80) |
|
| CornflowerBlue |
#6495ED |
rgb(100,149,237) |
|
| Cornsilk |
#FFF8DC |
rgb(255,248,220) |
|
| Crimson |
#DC143C |
rgb(220,20,60) |
|
| Cyan |
#00FFFF |
rgb(0,255,255) |
|
| DarkBlue |
#00008B |
rgb(0,0,139) |
|
| DarkCyan |
#008B8B |
rgb(0,139,139) |
|
| DarkGoldenRod |
#B8860B |
rgb(184,134,11) |
|
| DarkGray |
#A9A9A9 |
rgb(169,169,169) |
|
| DarkGrey |
#A9A9A9 |
rgb(169,169,169) |
|
| DarkGreen |
#006400 |
rgb(0,100,0) |
|
| DarkKhaki |
#BDB76B |
rgb(189,183,107) |
|
| DarkMagenta |
#8B008B |
rgb(139,0,139) |
|
| DarkOliveGreen |
#556B2F |
rgb(85,107,47) |
|
| DarkOrange |
#FF8C00 |
rgb(255,140,0) |
|
| DarkOrchid |
#9932CC |
rgb(153,50,204) |
|
| DarkRed |
#8B0000 |
rgb(139,0,0) |
|
| DarkSalmon |
#E9967A |
rgb(233,150,122) |
|
| DarkSeaGreen |
#8FBC8F |
rgb(143,188,143) |
|
| DarkSlateBlue |
#483D8B |
rgb(72,61,139) |
|
| DarkSlateGray |
#2F4F4F |
rgb(47,79,79) |
|
| DarkSlateGrey |
#2F4F4F |
rgb(47,79,79) |
|
| DarkTurquoise |
#00CED1 |
rgb(0,206,209) |
|
| DarkViolet |
#9400D3 |
rgb(148,0,211) |
|
| DeepPink |
#FF1493 |
rgb(255,20,147) |
|
| DeepSkyBlue |
#00BFFF |
rgb(0,191,255) |
|
| DimGray |
#696969 |
rgb(105,105,105) |
|
| DimGrey |
#696969 |
rgb(105,105,105) |
|
| DodgerBlue |
#1E90FF |
rgb(30,144,255) |
|
| FireBrick |
#B22222 |
rgb(178,34,34) |
|
| FloralWhite |
#FFFAF0 |
rgb(255,250,240) |
|
| ForestGreen |
#228B22 |
rgb(34,139,34) |
|
| Fuchsia |
#FF00FF |
rgb(255,0,255) |
|
| Gainsboro |
#DCDCDC |
rgb(220,220,220) |
|
| GhostWhite |
#F8F8FF |
rgb(248,248,255) |
|
| Gold |
#FFD700 |
rgb(255,215,0) |
|
| GoldenRod |
#DAA520 |
rgb(218,165,32) |
|
| Gray |
#808080 |
rgb(128,128,128) |
|
| Grey |
#808080 |
rgb(128,128,128) |
|
| Green |
#008000 |
rgb(0,128,0) |
|
| GreenYellow |
#ADFF2F |
rgb(173,255,47) |
|
| HoneyDew |
#F0FFF0 |
rgb(240,255,240) |
|
| HotPink |
#FF69B4 |
rgb(255,105,180) |
|
| >IndianRed |
#CD5C5C |
rgb(205,92,92) |
|
| ">Indigo |
#4B0082 |
rgb(75,0,130) |
|
| Ivory |
#FFFFF0 |
rgb(255,255,240) |
|
| Khaki |
#F0E68C |
rgb(240,230,140) |
|
| Lavender |
#E6E6FA |
rgb(230,230,250) |
|
| LavenderBlush |
#FFF0F5 |
rgb(255,240,245) |
|
| LawnGreen |
#7CFC00 |
rgb(124,252,0) |
|
| LemonChiffon |
#FFFACD |
rgb(255,250,205) |
|
| LightBlue |
#ADD8E6 |
rgb(173,216,230) |
|
| LightCoral |
#F08080 |
rgb(240,128,128) |
|
| LightCyan |
#E0FFFF |
rgb(224,255,255) |
|
| LightGoldenRodYellow |
#FAFAD2 |
rgb(250,250,210) |
|
| LightGray |
#D3D3D3 |
rgb(211,211,211) |
|
| LightGrey |
#D3D3D3 |
rgb(211,211,211) |
|
| LightGreen |
#90EE90 |
rgb(144,238,144) |
|
| LightPink |
#FFB6C1 |
rgb(255,182,193) |
|
| LightSalmon |
#FFA07A |
rgb(255,160,122) |
|
| LightSeaGreen |
#20B2AA |
rgb(32,178,170) |
|
| LightSkyBlue |
#87CEFA |
rgb(135,206,250) |
|
| LightSlateGray |
#778899 |
rgb(119,136,153) |
|
| LightSlateGrey |
#778899 |
rgb(119,136,153) |
|
| LightSteelBlue |
#B0C4DE |
rgb(176,196,222) |
|
| LightYellow |
#FFFFE0 |
rgb(255,255,224) |
|
| Lime |
#00FF00 |
rgb(0,255,0) |
|
| LimeGreen |
#32CD32 |
rgb(50,205,50) |
|
| Linen |
#FAF0E6 |
rgb(250,240,230) |
|
| Magenta |
#FF00FF |
rgb(255,0,255) |
|
| Maroon |
#800000 |
rgb(128,0,0) |
|
| MediumAquaMarine |
#66CDAA |
rgb(102,205,170) |
|
| MediumBlue |
#0000CD |
rgb(0,0,205) |
|
| MediumOrchid |
#BA55D3 |
rgb(186,85,211) |
|
| MediumPurple |
#9370DB |
rgb(147,112,219) |
|
| MediumSeaGreen |
#3CB371 |
rgb(60,179,113) |
|
| MediumSlateBlue |
#7B68EE |
rgb(123,104,238) |
|
| MediumSpringGreen |
#00FA9A |
rgb(0,250,154) |
|
| MediumTurquoise |
#48D1CC |
rgb(72,209,204) |
|
| MediumVioletRed |
#C71585 |
rgb(199,21,133) |
|
| MidnightBlue |
#191970 |
rgb(25,25,112) |
|
| MintCream |
#F5FFFA |
rgb(245,255,250) |
|
| MistyRose |
#FFE4E1 |
rgb(255,228,225) |
|
| Moccasin |
#FFE4B5 |
rgb(255,228,181) |
|
| NavajoWhite |
#FFDEAD |
rgb(255,222,173) |
|
| Navy |
#000080 |
rgb(0,0,128) |
|
| OldLace |
#FDF5E6 |
rgb(253,245,230) |
|
| Olive |
#808000 |
rgb(128,128,0) |
|
| OliveDrab |
#6B8E23 |
rgb(107,142,35) |
|
| Orange |
#FFA500 |
rgb(255,165,0) |
|
| OrangeRed |
#FF4500 |
rgb(255,69,0) |
|
| Orchid |
#DA70D6 |
rgb(218,112,214) |
|
| PaleGoldenRod |
#EEE8AA |
rgb(238,232,170) |
|
| PaleGreen |
#98FB98 |
rgb(152,251,152) |
|
| PaleTurquoise |
#AFEEEE |
rgb(175,238,238) |
|
| PaleVioletRed |
#DB7093 |
rgb(219,112,147) |
|
| PapayaWhip |
#FFEFD5 |
rgb(255,239,213) |
|
| PeachPuff |
#FFDAB9 |
rgb(255,218,185) |
|
| Peru |
#CD853F |
rgb(205,133,63) |
|
| Pink |
#FFC0CB |
rgb(255,192,203) |
|
| Plum |
#DDA0DD |
rgb(221,160,221) |
|
| PowderBlue |
#B0E0E6 |
rgb(176,224,230) |
|
| Purple |
#800080 |
rgb(128,0,128) |
|
| RebeccaPurple |
#663399 |
rgb(102,51,153) |
|
| Red |
#FF0000 |
rgb(255,0,0) |
|
| RosyBrown |
#BC8F8F |
rgb(188,143,143) |
|
| RoyalBlue |
#4169E1 |
rgb(65,105,225) |
|
| SaddleBrown |
#8B4513 |
rgb(139,69,19) |
|
| Salmon |
#FA8072 |
rgb(250,128,114) |
|
| SandyBrown |
#F4A460 |
rgb(244,164,96) |
|
| SeaGreen |
#2E8B57 |
rgb(46,139,87) |
|
| SeaShell |
#FFF5EE |
rgb(255,245,238) |
|
| Sienna |
#A0522D |
rgb(160,82,45) |
|
| Silver |
#C0C0C0 |
rgb(192,192,192) |
|
| SkyBlue |
#87CEEB |
rgb(135,206,235) |
|
| SlateBlue |
#6A5ACD |
rgb(106,90,205) |
|
| SlateGray |
#708090 |
rgb(112,128,144) |
|
| SlateGrey |
#708090 |
rgb(112,128,144) |
|
| Snow |
#FFFAFA |
rgb(255,250,250) |
|
| SpringGreen |
#00FF7F |
rgb(0,255,127) |
|
| SteelBlue |
#4682B4 |
rgb(70,130,180) |
|
| Tan |
#D2B48C |
rgb(210,180,140) |
|
| Teal |
#008080 |
rgb(0,128,128) |
|
| Thistle |
#D8BFD8 |
rgb(216,191,216) |
|
| Tomato |
#FF6347 |
rgb(255,99,71) |
|
| Turquoise |
#40E0D0 |
rgb(64,224,208) |
|
| Violet |
#EE82EE |
rgb(238,130,238) |
|
| Wheat |
#F5DEB3 |
rgb(245,222,179) |
|
| White |
#FFFFFF |
rgb(255,255,255) |
|
| WhiteSmoke |
#F5F5F5 |
rgb(245,245,245) |
|
| Yellow |
#FFFF00 |
rgb(255,255,0) |
|
| YellowGreen |
#9ACD32 |
rgb(154,205,50) |
|
.jpg)
0 Komentar