Daftar Isi:
Rona dalam HTML dan CSS dapat didefinisikan menggunakan beberapa metode berbeda, mulai dari: nama-nama Rona yang telah ditentukan, ke kode heksadesimal, ke fungsi RGB dan HSL. Di Dasar ini, saya akan menjelaskan beberapa metodenya dan bagaimana Metode menggunakannya.
Di artikel ini, kita akan membahas detail :
- Metode-Metode memberi Rona pada elemen HTML
- Table Rona “NAMA” HTML dan CSS
- Table Rona “HEX” HTML dan CSS
- Table Rona “RGB” HTML dan CSS
- Table Rona “HSL” HTML dan CSS
- Daftar kode Rona HTML dan CSS (Nama, RGB + Hex Code)
Apa itu kode Rona HTML dan CSS?
Kode Rona HTML dan CSS adalah Metode Demi mendefinisikan Rona dalam HTML dan CSS pada sebuah website. Terdapat banyak sekali Rona web yang Dapat dipakai dalam HTML dan CSS. Rona-Rona tersebut Dapat didefinisikan menggunakan beberapa metode berbeda, mulai dari: nama-nama Rona yang telah ditentukan, ke kode heksadesimal, ke fungsi RGB dan HSL.
Jenis-jenis kode Rona HTML dan CSS
Berikut beberapa Metode Demi menggunakan kode Rona HTML dan CSS pada sebuah website:
- Nama Rona: menggunakan nama Rona yang sudah ditentukan
- Kode heksadesimal: menggunakan kode heksadesimal yang terdiri dari 6 digit
- Kode heksadesimal singkat: menggunakan kode heksadesimal yang terdiri dari 3 digit
- Fungsi RGB: menggunakan fungsi RGB yang terdiri dari 3 Bilangan
- Fungsi RGBA: menggunakan fungsi RGBA yang terdiri dari 4 Bilangan
- Fungsi HSL: menggunakan fungsi HSL yang terdiri dari 3 Bilangan
- Fungsi HSLA: menggunakan fungsi HSLA yang terdiri dari 4 Bilangan
Berikut Metode penggunaan kode Rona dan Teladan code nya.
1. Nama Rona
Nama Rona adalah metode termudah Demi mendefinisikan Rona dalam HTML dan CSS Demi menghias website. Terdapat banyak nama Rona yang telah ditentukan dan dapat digunakan. Anda cukup menulis nama Rona tersebut sebagai nilai dari properti Rona atau latar belakang.
body {
background-color: LightGreen;
color: DarkRed;
}2. Kode Heksadesimal
Kode heksadesimal memungkinkan Anda mendefinisikan Rona dengan lebih presisi. Kode ini dimulai dengan tanda pagar (#), diikuti oleh enam digit yang mewakili Rona merah, hijau, dan biru (RGB).
body {
background-color: #32CD32;
color: #8B0000;
}3. Kode Heksadesimal Singkat
Kalau setiap Kekasih digit dalam kode heksadesimal adalah sama, Anda dapat menyederhanakannya menjadi tiga digit saja.
body {
background-color: #3C3; // sama dengan #33CC33
color: #800; // sama dengan #880000
}4. Fungsi RGB
Fungsi rgb() dalam CSS memungkinkan Anda mendefinisikan Rona dengan menyebutkan intensitas dari Rona merah, hijau, dan biru, dalam rentang 0-255.
body {
background-color: rgb(50,205,50);
color: rgb(139,0,0);
}5. Fungsi RGBA
Dengan menambahkan parameter keempat pada fungsi rgb(), Anda dapat menentukan tingkat transparansi Rona. Parameter ini berada dalam rentang 0-1.
body {
background-color: rgba(50,205,50,0.5);
color: rgba(139,0,0,0.5);
}6. Fungsi HSL
Fungsi hsl() memungkinkan Anda mendefinisikan Rona berdasarkan hue (0-360 derajat di roda Rona), saturation (0%-100%), dan lightness (0%-100%).
body {
background-color: hsl(120,60%,50%);
color: hsl(0,100%,27%);
}7. Fungsi HSLA
Mirip dengan rgba(), fungsi hsla() memungkinkan Anda menambahkan transparansi pada Rona yang ditentukan dengan hsl().
body {
background-color: hsla(120,60%,50%,0.5);
color: hsla(0,100%,27%,0.5);
}
Tabel lengkap 140+ daftar kode Rona HTML dan CSS
Berikut table lengkap nama Rona HTML dan CSS, Teladan, beserta kode RGB dan kode Rona Hexadecimal nya.
| Tampilan | Nama Rona | Kode Hex | Kode RGB |
|---|---|---|---|
| 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) |
Tutorial mengubah Rona elemen HTML pada CSS
Berikut beberapa Teladan bagaimana Metode penggunaan kode Rona pada pengembangan website (Front End):
- Rona background
- Rona text (tulisan)
- Rona border (garis tepi)
Bagaimana Metode mengubah Rona background pada CSS
Rona background atau latar belakang pada CSS Dapat diubah dengan menggunakan properti background-color dan nilai Rona yang diinginkan.
body {
background-color: #32CD32;
}Berikut video tutorial bagaimana Metode mengubah Rona background pada CSS
Bagaimana Metode mengubah Rona text (tulisan) pada CSS
Rona text atau tulisan pada CSS Dapat diubah dengan menggunakan properti color dan nilai Rona yang diinginkan.
body {
color: #8B0000;
}Bagaimana Metode mengubah Rona border pada CSS
Rona border atau garis tepi pada CSS Dapat diubah dengan menggunakan properti border-color dan nilai Rona yang diinginkan.
div {
border-color: #8B0000;
}Demi tutorial CSS lengkap, silahkan baca Surat keterangan CSS Bahasa Indonesia
Tabel Overview metode kode Rona dan Teladan nilainya
Berikut adalah tabel markdown yang merangkum berbagai metode Demi mendefinisikan Rona dalam HTML dan CSS:
| Nama Penggunaan | Teladan Nilai |
|---|---|
| Nama Rona | red, green, blue, LightGreen, DarkRed, MediumBlue |
| Kode Heksadesimal | #FF0000, #00FF00, #0000FF, #32CD32, #8B0000, #00008B |
| Kode Heksadesimal Singkat | #F00, #0F0, #00F, #3C3, #800, #008 |
| Fungsi RGB | rgb(255,0,0), rgb(0,255,0), rgb(0,0,255), rgb(50,205,50), rgb(139,0,0), rgb(0,0,139) |
| Fungsi RGBA | rgba(255,0,0,0.5), rgba(0,255,0,0.5), rgba(0,0,255,0.5), rgba(50,205,50,0.5), rgba(139,0,0,0.5), rgba(0,0,139,0.5) |
| Fungsi HSL | hsl(0,100%,50%), hsl(120,100%,50%), hsl(240,100%,50%), hsl(120,60%,50%), hsl(0,100%,27%), hsl(240,100%,27%) |
| Fungsi HSLA | hsla(0,100%,50%,0.5), hsla(120,100%,50%,0.5), hsla(240,100%,50%,0.5), hsla(120,60%,50%,0.5), hsla(0,100%,27%,0.5), hsla(240,100%,27%,0.5) |
Bagiamana Metode konversi dari Rona RGB ke Hexadecimal?
Demi mengkonversi Rona RGB ke Hexadecimal atau sebaliknya, silahkan coba di sini.
Engkau Dapat mengganti Rona:
Silahkan klik tombol Rona di Dasar ini:
Atau Engkau tinggal ketik di google
rgb to hexatau
hex to rgbAkan muncul visual Rona color picker yang Dapat Engkau pilih dan akan muncul kode Rona RGB dan Hexadecimal nya.
Metode Rona apa yang harus digunakan ?
Enggak Terdapat aturan yang mengharuskan Anda menggunakan metode Rona tertentu. Tetapi, Terdapat beberapa keuntungan dan kerugian Demi masing-masing metode.
Terutama pada Ketika ini sudah banyak tool online dan juga Ekspansi pada text editor seperti VSCode yang memudahkan kita Demi memilih Rona yang kita inginkan. Tinggal klik-klin tanpa perlu dihafalkan
Nama Rona
Keuntungan menggunakan nama Rona adalah bahwa Anda Enggak perlu mengingat kode Rona. Anda cukup mengetik nama Rona yang Mau Anda gunakan. Kerugiannya adalah Anda Enggak dapat mendefinisikan Rona dengan presisi yang sama seperti menggunakan kode heksadesimal atau fungsi RGB.
Kode Heksadesimal
Keuntungan menggunakan kode heksadesimal adalah Anda dapat mendefinisikan Rona dengan presisi yang lebih tinggi daripada menggunakan nama Rona. Kerugiannya adalah Anda harus mengingat kode Rona Demi Rona yang Mau Anda gunakan.
Fungsi RGB
Keuntungan menggunakan fungsi RGB adalah Anda dapat mendefinisikan Rona dengan presisi yang lebih tinggi daripada menggunakan nama Rona. Kerugiannya adalah Anda harus mengingat kode Rona Demi Rona yang Mau Anda gunakan.
Fungsi HSL
Keuntungan menggunakan fungsi HSL adalah Anda dapat mendefinisikan Rona dengan presisi yang lebih tinggi daripada menggunakan nama Rona. Kerugiannya adalah Anda harus mengingat kode Rona Demi Rona yang Mau Anda gunakan.
Tips menggunakan Rona pada sebuah website
Berikut adalah beberapa tips yang dapat membantu Engkau dalam menggunakan Rona HTML dan CSS:
1. Menggunakan CSS Variables (Pro tips)
Dengan menggunakan CSS Variables, Engkau dapat mendefinisikan suatu Rona sekali dan kemudian menggunakannya di seluruh website Engkau. Ini memudahkan proses perubahan Rona secara keseluruhan Kalau diperlukan. Misalnya:
:root {
--primary-color: #1e90ff;
}
body {
background-color: var(--primary-color);
}2. Memanfaatkan Tools Rona Online
Terdapat banyak tools online seperti Adobe Color, ColorSpace, dan Coolors yang dapat membantu Engkau Membikin palet Rona yang serasi dan menyenangkan secara visual.
3. Menggunakan Color Schemes
Terdapat beberapa skema Rona yang sudah terbukti efektif dalam desain web, seperti monokromatik, analogus, komplementer, split-complementer, triad, tetrad, dan sebagainya. Engkau Dapat mencoba skema-skema ini Demi menciptakan Selaras Rona dalam desain Engkau.
4. Pahami Arti Rona
Setiap Rona Mempunyai Arti dan emosi yang berbeda. Sebagai Teladan, merah seringkali dikaitkan dengan gairah dan bahaya, sementara biru sering dihubungkan dengan kepercayaan dan kedamaian. Menggunakan Rona yang Akurat dapat membantu Engkau mengkomunikasikan pesan yang Akurat kepada pengguna Engkau.
Gabungkan berbagai Rona, Kombinasi Rona-Rona ini Dapat membantu Engkau punya palet Rona yang serasi dan menyenangkan secara visual.
5. Menggunakan Rona dengan Bijaksana
Menggunakan terlalu banyak Rona dalam satu desain dapat menjadi bumerang dan malah Membikin desain Engkau tampak berantakan dan Enggak profesional. Sebagai aturan Biasa, cobalah Demi menggunakan 3-5 Rona Istimewa dalam desain Engkau. Satu Demi latar belakang, satu Demi konten, dan sisanya Demi penekanan dan aksen.
Yang sering ditanyakan seputar kode Rona HTML dan CSS (FAQ)
#ffffff Rona apa?
#ffffff adalah kode Rona heksadesimal Demi Rona putih.
#000000 Rona apa?
#000000 adalah kode Rona heksadesimal Demi Rona hitam.
Berapa kode RGB Rona biru?
Kode RGB Rona birut adalah 255 250 205
Berapa kode RGB Rona hijau?
Kode RGB Rona hijau adalah 0 255 0
Berapa kode RGB Rona merah?
Kode RGB Rona merah adalah 255 0 0
Apa itu color picker?
Color picker adalah alat yang memungkinkan Engkau memilih Rona dari roda Rona atau memasukkan kode Rona Demi mendapatkan nilai Rona yang Akurat.
Di mana tempat belajar HTML?
Engkau Dapat membaca informasi seputar HTML dan kurikulum belajarnya di:
belajar HTML di sini
Di mana tempat belajar CSS?
Engkau Dapat membaca informasi seputar CSS dan kurikulum belajarnya di:
belajar CSS di sini
Apa itu palet Rona?
Palet Rona atau color palette adalah kumpulan Rona yang digunakan dalam desain. Palet Rona yang Bagus terdiri dari Rona-Rona yang serasi dan menyenangkan secara visual.