Warna Huruf dan Background

Style CSS bisa digunakan untuk menentukan warna teks dan background. Properti yang bisa kalian gunakan untuk memberi warna teks adalah color. Untuk memberi warna background, kalian bisa menggunkan properti background atau background-color. Warna (tanpa transparansi) dalam CSS bisa ditentukan dan dituliskan dengan cara berikut:

  1. Konstanta nama warna
  2. Warna Hexadecimal
  3. Warna RGB (Red-Green-Blue)
  4. Warna HSL (Hue-Saturation-Lightness)

Warna RGB merupakan perpaduan tiga warna dasar cahaya. Warna HSL adalah warna berdasarkan "spektrum warna", tingkat kecerahan, dan saturasinya. Khusus untuk RGB, kalian bisa menuliskannya dengan 3 angka atau satu angka hexadesimal 6 digit. Jika kalian tidak tahu angka hexadesimal abaikan saja cara ini saat ini.
Untuk warna dengan transparansi, ada Fungsi RGBA dan HSLA. Tapi, sekarang kalian cukup fokus saja belajar cara menggunakan warna tanpa transparansi.

Konstanta Nama Warna

Untuk beberapa warna, kita bisa menuliskan warna tersebut dalam CSS sesuai dengan namanya. Tapi, tidak semua warna dikenali oleh semua browser. Berikut ini adalah nama warna-warna tersebut dan penulisannya dalam Hexadesimal.

  • Black => #000000
  • Navy => #000080
  • DarkBlue => #00008B
  • MediumBlue => #0000CD
  • Blue => #0000FF
  • DarkGreen => #006400
  • Green => #008000
  • Teal => #008080
  • DarkCyan => #008B8B
  • DeepSkyBlue => #00BFFF
  • DarkTurquoise => #00CED1
  • MediumSpringGreen => #00FA9A
  • Lime => #00FF00
  • SpringGreen => #00FF7F
  • Aqua => #00FFFF
  • Cyan => #00FFFF
  • MidnightBlue => #191970
  • DodgerBlue => #1E90FF
  • LightSeaGreen => #20B2AA
  • ForestGreen => #228B22
  • SeaGreen => #2E8B57
  • DarkSlateGray => #2F4F4F
  • DarkSlateGrey => #2F4F4F
  • LimeGreen => #32CD32
  • MediumSeaGreen => #3CB371
  • Turquoise => #40E0D0
  • RoyalBlue => #4169E1
  • SteelBlue => #4682B4
  • DarkSlateBlue => #483D8B
  • MediumTurquoise => #48D1CC
  • Indigo  => #4B0082
  • DarkOliveGreen => #556B2F
  • CadetBlue => #5F9EA0
  • CornflowerBlue => #6495ED
  • RebeccaPurple => #663399
  • MediumAquaMarine => #66CDAA
  • DimGray => #696969
  • DimGrey => #696969
  • SlateBlue => #6A5ACD
  • OliveDrab => #6B8E23
  • SlateGray => #708090
  • SlateGrey => #708090
  • LightSlateGray => #778899
  • LightSlateGrey => #778899
  • MediumSlateBlue => #7B68EE
  • LawnGreen => #7CFC00
  • Chartreuse => #7FFF00
  • Aquamarine => #7FFFD4
  • Maroon => #800000
  • Purple => #800080
  • Olive => #808000
  • Gray => #808080
  • Grey => #808080
  • SkyBlue => #87CEEB
  • LightSkyBlue => #87CEFA
  • BlueViolet => #8A2BE2
  • DarkRed => #8B0000
  • DarkMagenta => #8B008B
  • SaddleBrown => #8B4513
  • DarkSeaGreen => #8FBC8F
  • LightGreen => #90EE90
  • MediumPurple => #9370DB
  • DarkViolet => #9400D3
  • PaleGreen => #98FB98
  • DarkOrchid => #9932CC
  • YellowGreen => #9ACD32
  • Sienna => #A0522D
  • Brown => #A52A2A
  • DarkGray => #A9A9A9
  • DarkGrey => #A9A9A9
  • LightBlue => #ADD8E6
  • GreenYellow => #ADFF2F
  • PaleTurquoise => #AFEEEE
  • LightSteelBlue => #B0C4DE
  • PowderBlue => #B0E0E6
  • FireBrick => #B22222
  • DarkGoldenRod => #B8860B
  • MediumOrchid => #BA55D3
  • RosyBrown => #BC8F8F
  • DarkKhaki => #BDB76B
  • Silver => #C0C0C0
  • MediumVioletRed => #C71585
  • IndianRed  => #CD5C5C
  • Peru => #CD853F
  • Chocolate => #D2691E
  • Tan => #D2B48C
  • LightGray => #D3D3D3
  • LightGrey => #D3D3D3
  • Thistle => #D8BFD8
  • Orchid => #DA70D6
  • GoldenRod => #DAA520
  • PaleVioletRed => #DB7093
  • Crimson => #DC143C
  • Gainsboro => #DCDCDC
  • Plum => #DDA0DD
  • BurlyWood => #DEB887
  • LightCyan => #E0FFFF
  • Lavender => #E6E6FA
  • DarkSalmon => #E9967A
  • Violet => #EE82EE
  • PaleGoldenRod => #EEE8AA
  • LightCoral => #F08080
  • Khaki => #F0E68C
  • AliceBlue => #F0F8FF
  • HoneyDew => #F0FFF0
  • Azure => #F0FFFF
  • SandyBrown => #F4A460
  • Wheat => #F5DEB3
  • Beige => #F5F5DC
  • WhiteSmoke => #F5F5F5
  • MintCream => #F5FFFA
  • GhostWhite => #F8F8FF
  • Salmon => #FA8072
  • AntiqueWhite => #FAEBD7
  • Linen => #FAF0E6
  • LightGoldenRodYellow => #FAFAD2
  • OldLace => #FDF5E6
  • Red => #FF0000
  • Fuchsia => #FF00FF
  • Magenta => #FF00FF
  • DeepPink => #FF1493
  • OrangeRed => #FF4500
  • Tomato => #FF6347
  • HotPink => #FF69B4
  • Coral => #FF7F50
  • DarkOrange => #FF8C00
  • LightSalmon => #FFA07A
  • Orange => #FFA500
  • LightPink => #FFB6C1
  • Pink => #FFC0CB
  • Gold => #FFD700
  • PeachPuff => #FFDAB9
  • NavajoWhite => #FFDEAD
  • Moccasin => #FFE4B5
  • Bisque => #FFE4C4
  • MistyRose => #FFE4E1
  • BlanchedAlmond => #FFEBCD
  • PapayaWhip => #FFEFD5
  • LavenderBlush => #FFF0F5
  • SeaShell => #FFF5EE
  • Cornsilk => #FFF8DC
  • LemonChiffon => #FFFACD
  • FloralWhite => #FFFAF0
  • Snow => #FFFAFA
  • Yellow => #FFFF00
  • LightYellow => #FFFFE0
  • Ivory => #FFFFF0
  • White => #FFFFFF

Warna-warna di atas bisa digunakan dalam properti color, background, dan properti-properti lain yang memerlukan warna. Berikut ini adalah contoh penerapannya dalam HTML.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <link rel="stylesheet" href="cssku.css">
</HEAD>
<BODY>
    <h2 class="styleku">Judul</h2>
    <p>paragraf 1</p>     <p>paragraf 2</p>     <p>paragraf 3</p>     <p>paragraf 4</p>     <p>paragraf 5</p>     <p>paragraf 6</p>     <p id="styleku">paragraf 7</p> </BODY> </HTML>
Kode CSS-nya (cssku.css) :
.styleku{
    color : magenta;
}

#styleku{
    color: yellow;
    background : red;
}


Kode HTML di atas menggunakan CSS untuk mengubah warna yang dihasilkan elemen HTML yang tagnya memiliki class "styleku"; menjadi berwarna magenta. Elemen dengan tag yang memiliku id "styleku" warna latar belakangnya akan menjadi berwarna red atau merah dengan warna huruf kuning.

Hasilnya tidak sesuai atau malas ngetik? Download kode HTML dan CSS-nya di sini.