Contoh Kode Warna di CSS dan Hasilnya

Kode Warna di CSS

Berikut ini merupakan beberapa contoh kode yang ada di CSS dan support di semua browser :

• Warna Basic

• Warna Merah

• Warna Oranye

• Warna Kuning

• Warna Hijau

• Warna Cyan

• Warna Biru

• Warna Ungu

• Warna Pink

• Warna Putih

• Warna Abu-Abu

• Warna Coklat

Cara menggunakan Warna-Warna ini

Setiap warna dapat direpresentasikan dengan berbagai cara. Misalnya, biru dapat direpresentasikan sebagai #0000ff, #00f, rgb (0,0,255) dan banyak cara lainnya. Tidak masalah yang mana yang kita pilih selama warnanya valid.

Kita bisa menerapkan salah satu warna ini ke situs web atau blog dengan menggunakan kode CSS yang relevan.

1. Untuk mengatur warna latar belakang, gunakan background-color.
2. Untuk mengatur warna teks, gunakan color
3. Untuk mengatur warna bingkai, gunakan border-color.

Mari kita ambil contoh menggunakan warna biru :

Di bawah ini adalah contoh kode CSS cepat untuk menerapkan warna ini ke berbagai elemen HTML.

/* Set a background color to the 'body' element */
body { 
    background-color: blue;
    }
    
/* Same as above, but using the CSS 'background' property instead */
body { 
    background: blue;
    }
    
/* Setting the text color for the 'h1' element */    
h1 { 
    color: blue;
    }
​
/* Setting a border color on the 'article' element */
article { 
    border-color: blue;
    }
​
/* Same as previous, but using the 'border' property instead (also sets border width and style) */    
article { 
    border: 1px solid blue;
    }

Lihat beberapa contoh kode warna dasar menggunakan nama warna di editor online.

Catatan : Nama warna tidak peka huruf besar / kecil (tidak masalah apakah Anda menggunakan UPPERCASE atau huruf kecil).

Jadi biru, Biru, dan BIRU semuanya menampilkan warna yang sama.

Daftar Properti Color

Berikut adalah daftar properti terkait warna yang dapat kita gunakan dengan CSS.

• background-color
• background
• border
• border-bottom-color
• border-color
• border-left-color
• border-right-color
• border-top-color
• box-shadow
• caret-color
• color
• column-rule
• column-rule-color
• filter
• opacity
• outline-color
• outline
• text-decoration
• text-decoration-color
• text-shadow