Cara Mengubah Warna Font HTML
Diterbitkan: 2021-11-29Ketika datang untuk menyesuaikan situs Anda, warna font sering diabaikan. Dalam kebanyakan kasus, pemilik situs web membiarkan warna font default seperti hitam atau apa pun yang telah ditentukan gaya tema mereka untuk badan dan warna teks judul.
Namun, ada baiknya Anda mengubah warna font HTML di situs web Anda karena beberapa alasan. Mengubah warna font HTML mungkin tampak menakutkan, tetapi cukup sederhana. Ada beberapa cara untuk mengubah warna font di situs web Anda.
Dalam posting ini, kami akan menunjukkan kepada Anda berbagai cara untuk mengubah warna font situs web Anda, serta mendiskusikan mengapa Anda ingin melakukannya sejak awal.
Mengapa Mengubah Warna Font HTML?
Anda ingin mengubah warna font karena hal itu dapat membantu meningkatkan keterbacaan dan aksesibilitas situs web Anda. Misalnya, jika situs Anda menggunakan skema warna yang lebih gelap, membiarkan warna font hitam akan mempersulit pembacaan teks di situs web Anda.
Alasan lain Anda ingin mempertimbangkan untuk mengubah warna font adalah jika Anda akan menggunakan warna yang lebih gelap dari palet warna merek Anda. Ini adalah kesempatan lain untuk memperkuat merek Anda. Ini membangun konsistensi merek dan memastikan bahwa teks di semua saluran pemasaran Anda terlihat sama.
Dengan itu, mari kita lihat bagaimana Anda dapat menentukan dan mengubah warna font HTML.
Cara Mendefinisikan Warna
Ada beberapa cara untuk mendefinisikan warna dalam desain web, termasuk nama, nilai RGB, kode hex, dan nilai HSL. Mari kita lihat bagaimana mereka bekerja.
Nama Warna
Nama warna adalah cara termudah untuk menentukan warna dalam gaya CSS Anda. Nama warna mengacu pada nama khusus untuk warna HTML. Saat ini, ada 140 nama warna yang didukung, dan Anda dapat menggunakan salah satu warna tersebut dalam gaya Anda. Misalnya, Anda dapat menggunakan "biru" untuk mengatur warna masing-masing elemen menjadi biru.
Namun, kelemahan dari pendekatan ini adalah tidak semua nama warna didukung. Dengan kata lain, jika Anda menggunakan warna yang tidak ada dalam daftar warna yang didukung, Anda tidak akan dapat menggunakannya dalam desain Anda dengan nama warnanya.
Nilai RGB dan RGBA
Selanjutnya, kita memiliki nilai RGB dan RGBA. RGB adalah singkatan dari Red, Green, dan Blue. Ini mendefinisikan warna dengan mencampur nilai merah, hijau, dan biru, mirip dengan bagaimana Anda akan mencampur warna pada palet yang sebenarnya.
Nilai RGB terlihat seperti ini: RGB(153,0,255). Angka pertama menentukan input warna merah, angka kedua menentukan input warna hijau, dan angka ketiga menentukan biru.
Nilai setiap input warna dapat berkisar antara 0 dan 255, di mana 0 berarti warna tidak ada sama sekali dan 255 berarti warna tertentu berada pada intensitas maksimum.
Nilai RGBA menambahkan satu nilai lagi ke campuran, dan itulah nilai alfa yang mewakili opacity. Ini berkisar dari 0 (tidak transparan) hingga 1 (sepenuhnya transparan).
Nilai HEX
Kode warna hex bekerja mirip dengan kode RGB. Mereka terdiri dari angka dari 0 sampai 9 dan huruf dari A sampai F. Kode hex terlihat seperti ini: #800080. Dua huruf pertama menentukan intensitas warna merah, dua angka di tengah menentukan intensitas warna hijau, dan dua terakhir menentukan intensitas warna biru.
Nilai HSL dan HSLA
Cara lain untuk mendefinisikan warna dalam HTML adalah dengan menggunakan nilai HSL. HSL adalah singkatan dari Hue, Saturation, dan Lightness.
Hue menggunakan derajat dari 0 hingga 360. Pada roda warna standar, merah di sekitar 0/360, hijau di 120, dan biru di 240.
Saturasi menggunakan persentase untuk menentukan seberapa jenuh warnanya. 0 mewakili hitam dan putih, dan 100 mewakili warna penuh.
Terakhir, lightness menggunakan persentase yang mirip dengan saturasi. Dalam hal ini, 0% mewakili hitam, dan 100% mewakili putih.
Misalnya, warna ungu yang telah kita gunakan sepanjang artikel ini akan terlihat seperti ini di HSL: hsl(276, 100%, 50%) .
HSL, seperti RGB, mendukung opacity. Dalam hal ini, Anda akan menggunakan nilai HSLA di mana A adalah singkatan dari alpha dan didefinisikan dalam angka dari 0 hingga 1. jika kita ingin menurunkan opacity dari contoh ungu, kita akan menggunakan kode ini: hsl(276, 100%, 50%, .85) .
Sekarang setelah Anda mengetahui cara mendefinisikan warna, mari kita lihat berbagai cara untuk mengubah warna font HTML.
Yang Lama: <font> Tags
Sebelum HTML5 diperkenalkan dan ditetapkan sebagai standar pengkodean, Anda dapat mengubah warna font menggunakan tag font. Lebih khusus lagi, Anda akan menggunakan tag font dengan atribut warna untuk mengatur warna teks. color ditentukan baik dengan namanya atau dengan kode hex-nya.
Berikut adalah contoh tampilan kode ini dengan kode warna hex:
<font color="#800080">This text is purple.</font>Dan ini adalah bagaimana Anda bisa mengatur warna teks menjadi ungu menggunakan nama warna.
<font color="purple">This text is purple.</font> Namun, tag <font> tidak digunakan lagi di HTML5 dan tidak lagi digunakan. Mengubah warna font adalah keputusan desain, dan desain bukanlah tujuan utama HTML. Oleh karena itu, masuk akal jika <font> tidak lagi didukung di HTML5.
Jadi jika tag <font> tidak lagi didukung, bagaimana Anda mengubah warna font HTML? Jawabannya adalah dengan Cascading Style Sheets atau CSS.
Yang Baru: Gaya CSS
Untuk mengubah warna font HTML dengan CSS, Anda akan menggunakan properti warna CSS yang dipasangkan dengan pemilih yang sesuai. CSS memungkinkan Anda menggunakan nama warna, RGB, hex, dan nilai HSL untuk menentukan warna. Ada tiga cara menggunakan CSS untuk mengubah warna font.
CSS sebaris
CSS sebaris ditambahkan langsung ke file HTML Anda. Anda akan menggunakan tag HTML seperti <p> dan kemudian menatanya dengan properti warna CSS seperti:
<p>This is a purple paragraph.</p>Jika Anda ingin menggunakan nilai hex, kode Anda akan terlihat seperti ini:
<p>This is a purple paragraph.</p>Jika Anda akan menggunakan nilai RGB, Anda akan menulisnya seperti ini:
<p>This is a purple paragraph.</p>Terakhir, menggunakan nilai HSL, Anda akan menggunakan kode ini:
<p>This is a purple paragraph.</p>Contoh di atas menunjukkan cara mengubah warna paragraf di situs web Anda. Tapi Anda tidak terbatas pada paragraf saja. Anda dapat mengubah warna font judul serta tautan.
Misalnya, mengganti tag <p> di atas dengan <h2> akan mengubah warna teks judul tersebut, sedangkan menggantinya dengan tag <a> akan mengubah warna tautan tersebut. Anda juga dapat menggunakan elemen <span> untuk mewarnai teks dalam jumlah berapa pun.
Ingin tahu bagaimana kami meningkatkan lalu lintas kami lebih dari 1000%?
Bergabunglah dengan 20.000+ orang lain yang mendapatkan buletin mingguan kami dengan kiat-kiat WordPress orang dalam!
Jika Anda ingin mengubah warna latar belakang seluruh paragraf atau judul, ini sangat mirip dengan cara Anda mengubah warna font. Anda harus menggunakan atribut background-color sebagai gantinya dan menggunakan nilai nama warna, hex, RGB, atau HSL untuk mengatur warna. Berikut ini contohnya:
<p>CSS tersemat
CSS yang disematkan berada di dalam <style> dan ditempatkan di antara tag kepala dokumen HTML Anda.
Kode akan terlihat seperti ini jika Anda ingin menggunakan nama warna:
<!DOCTYPE html> <html> <head> <style> <p> { color: purple; } </style> </head>Kode di atas akan mengubah warna setiap paragraf di halaman menjadi ungu. Mirip dengan metode CSS sebaris, Anda dapat menggunakan penyeleksi yang berbeda untuk mengubah warna font judul dan tautan Anda.
Jika Anda ingin menggunakan kode hex, berikut tampilan kodenya:
<!DOCTYPE html> <html> <head> <style> <p> { color: #800080; } </style> </head>Contoh di bawah ini menggunakan nilai RBGA sehingga Anda dapat melihat contoh pengaturan opacity:
<!DOCTYPE html> <html> <head> <style> <p> { color: RGB(153,0,255,0.75), } </style> </head>Dan kode HSL akan terlihat seperti ini:
<!DOCTYPE html> <html> <head> <style> <p> { color: hsl(276, 100%, 50%), } </style> </head>CSS eksternal
Terakhir, Anda dapat menggunakan CSS eksternal untuk mengubah warna font di situs web Anda. CSS eksternal adalah CSS yang ditempatkan dalam file stylesheet terpisah, biasanya disebut style.css atau stylesheet.css.
Stylesheet ini bertanggung jawab untuk semua gaya di situs Anda dan menentukan warna font dan ukuran font, margin, padding, keluarga font, warna latar belakang, dan banyak lagi. Singkatnya, stylesheet bertanggung jawab atas tampilan situs Anda secara visual.
Untuk mengubah warna font dengan CSS eksternal, Anda akan menggunakan penyeleksi untuk menata bagian HTML yang Anda inginkan. Misalnya, kode ini akan mengubah semua teks isi di situs Anda:
body {color: purple;}Ingat, Anda dapat menggunakan nilai RGB, hex, dan HSL dan bukan hanya nama warna untuk mengubah warna font. Jika Anda ingin mengedit stylesheet, disarankan untuk melakukannya di editor kode.
Butuh hosting yang sangat cepat, andal, dan sepenuhnya aman untuk situs WordPress Anda? Kinsta menyediakan semua ini dan dukungan kelas dunia 24/7 dari para ahli WordPress. Lihat rencana kami.
Sebaris, Tertanam, atau Eksternal?
Jadi sekarang Anda tahu bagaimana Anda dapat menggunakan CSS untuk mengubah warna font. Tetapi metode mana yang harus Anda gunakan?
Jika Anda menggunakan kode CSS sebaris, Anda akan menambahkannya langsung ke file HTML Anda. Secara umum, metode ini cocok untuk perbaikan cepat. Jika Anda ingin mengubah warna satu paragraf atau judul tertentu pada satu halaman, metode ini adalah cara tercepat dan termudah untuk melakukannya.
Namun, gaya sebaris dapat membuat ukuran file HTML Anda menjadi lebih besar. Semakin besar file HTML Anda, semakin lama waktu yang dibutuhkan untuk memuat halaman web Anda. Selain itu, CSS sebaris dapat membuat HTML Anda berantakan. Dengan demikian, metode inline menggunakan CSS untuk mengubah warna font HTML umumnya tidak disarankan.
CSS tertanam ditempatkan di antara tag <head> dan di dalam tag <style>. Seperti CSS sebaris, ini bagus untuk perbaikan cepat dan mengganti gaya yang ditentukan dalam lembar gaya eksternal.
Satu perbedaan mencolok antara gaya sebaris dan tersemat adalah gaya tersebut akan diterapkan ke halaman mana pun tempat tag kepala dimuat, sedangkan gaya sebaris hanya berlaku untuk halaman tertentu tempat mereka berada, biasanya elemen yang mereka targetkan di halaman itu.
Metode terakhir, CSS eksternal, menggunakan lembar gaya khusus untuk menentukan gaya visual Anda. Secara umum, sebaiknya gunakan lembar gaya eksternal untuk menyimpan semua gaya Anda di satu tempat, dari tempat yang mudah diedit. Ini juga memisahkan presentasi dan desain, sehingga kode mudah dikelola dan dipelihara.
Ingatlah bahwa gaya sebaris dan tersemat dapat menggantikan gaya yang diatur dalam lembar gaya eksternal.
Tag Font atau Gaya CSS: Pro dan Kontra
Dua metode utama untuk mengubah warna font HTML adalah dengan menggunakan tag font atau gaya CSS. Kedua metode ini memiliki pro dan kontra.
Tag Font HTML Pro Dan Kontra
Tag font HTML mudah digunakan, jadi itu adalah keunggulannya. Biasanya, CSS lebih rumit dan membutuhkan waktu lebih lama untuk dipelajari daripada mengetik <font color="purple"> . Jika Anda memiliki situs web lama yang tidak menggunakan HTML5, tag font adalah metode yang layak untuk mengubah warna font.
Meskipun tag font mudah digunakan, Anda tidak boleh menggunakannya jika situs web Anda menggunakan HTML. Seperti disebutkan sebelumnya, tag font tidak digunakan lagi di HTML5. Penggunaan kode usang harus dihindari karena browser dapat berhenti mendukungnya kapan saja. Ini dapat menyebabkan situs web Anda rusak dan tidak berfungsi dengan benar, atau lebih buruk lagi, tidak ditampilkan sama sekali untuk pengunjung Anda.
Kelebihan dan Kekurangan CSS
CSS, seperti tag font, memiliki pro dan kontra. Keuntungan paling signifikan menggunakan CSS adalah cara yang tepat untuk mengubah warna font dan menentukan semua gaya lain untuk situs web Anda.
Seperti disebutkan sebelumnya, ini memisahkan presentasi dari desain yang membuat kode Anda lebih mudah untuk dikelola dan dipelihara.
Sisi negatifnya, CSS dan HTML5 membutuhkan waktu untuk belajar dan menulis dengan benar dibandingkan dengan cara lama menulis kode.
Ingatlah bahwa dengan CSS, Anda memiliki cara berbeda untuk mengubah warna font, dan masing-masing metode tersebut memiliki kelebihan dan kekurangannya sendiri, seperti yang telah dibahas sebelumnya.
Tips Mengubah Warna Font HTML
Sekarang setelah Anda mengetahui cara mengubah warna font HTML, berikut adalah beberapa tip yang akan membantu Anda.
Gunakan Pemilih Warna
Alih-alih memilih warna secara acak, gunakan pemilih warna untuk memilih warna yang tepat. Manfaat color picker adalah ia akan memberi Anda nama warna dan nilai hex, RGB, dan HSL yang benar yang perlu Anda gunakan dalam kode Anda.
Periksa Kontras
Teks gelap dengan latar belakang gelap serta teks terang dengan latar belakang terang tidak bekerja sama dengan baik. Mereka akan membuat teks di situs Anda sulit dibaca. Namun, Anda dapat menggunakan pemeriksa kontras untuk memastikan warna situs Anda dapat diakses dan teksnya mudah dibaca.
Temukan Warna Menggunakan Metode Inspeksi
Jika Anda melihat warna yang Anda sukai di situs web, Anda dapat memeriksa kode untuk mendapatkan nilai hex, RGB, atau HSL warna tersebut. Di Chrome, yang harus Anda lakukan adalah mengarahkan kursor ke bagian halaman web yang ingin Anda periksa, klik kanan dan pilih Inspect . Ini akan membuka panel pemeriksaan kode, tempat Anda dapat melihat kode HTML situs web dan gaya yang sesuai.
Ringkasan
Mengubah warna font HTML dapat membantu meningkatkan keterbacaan dan aksesibilitas situs web Anda. Ini juga dapat membantu Anda membangun konsistensi merek dalam gaya situs web Anda.
Dalam panduan ini, Anda telah mempelajari tentang empat cara berbeda untuk mengubah warna font HTML: dengan nama warna, kode hex, RGB, dan nilai HSL.
Kami juga telah membahas bagaimana Anda dapat mengubah warna font dengan CSS sebaris, tersemat, dan eksternal dan menggunakan tag font serta pro dan kontra dari setiap metode. Sekarang, Anda harus memiliki pemahaman yang baik tentang metode mana yang harus Anda gunakan untuk mengubah warna font HTML, jadi satu-satunya yang tersisa untuk dilakukan sekarang adalah menerapkan tips ini di situs Anda.
Apa pendapat Anda tentang mengubah warna font dengan CSS dan tag font? Beri tahu kami di bagian komentar!