Kode Warna

Kode Warna HTML dan CSS

Dirangkum dari HTML Color Codes, berikut beberapa kode warna HTML dan CSS:

Kelompok warna HTML - Merah

+------------+----------------+---------+
| Nama Warna | RGB            | HEX     |
+------------+----------------+---------+
| IndianRed  | rgb(205,92,92) | #CD5C5C |
| LightCoral | rgb(240,128,128)|#F08080 |
| Salmon     | rgb(250,128,114)|#FA8072 |
| DarkSalmon | rgb(233,150,122)|#E9967A |
| LightSalmon| rgb(255,160,122)|#FFA07A |
| Crimson    | rgb(220,20,60)  |#DC143C |
| Red (Merah murni)| rgb(255,0,0)|#FF0000|
| FireBrick  | rgb(178,34,34)  |#B22222 |
| DarkRed    | rgb(139,0,0)   | #8B0000|
| Ruby       | rgb(224,17,95) | #E0115F|
| Cherry     | rgb(222,49,99) | #DE3163|
+------------+----------------+---------+

Kelompok warna HTML - Kuning

+--------------+----------------+---------+
| Nama Warna   | RGB            | HEX     |
+--------------+----------------+---------+
| Yellow       | rgb(255,255,0) | #FFFF00 |
| LightYellow  | rgb(255,255,224)|#FFFFE0 |
| LemonChiffon | rgb(255,250,205)|#FFFACD |
| PaleGoldenrod| rgb(238,232,170)|#EEE8AA |
| Khaki        | rgb(240,230,140)|#F0E68C |
| Gold         | rgb(255,215,0) | #FFD700 |
| Goldenrod    | rgb(218,165,32) |#DAA520 |
+--------------+----------------+---------+

Kelompok warna HTML - Pink

+-----------------+----------------+---------+
| Nama Warna      | RGB            | HEX     |
+-----------------+----------------+---------+
| Pink            | rgb(255,192,203)| #FFC0CB |
| LightPink       | rgb(255,182,193)| #FFB6C1 |
| HotPink         | rgb(255,105,180)| #FF69B4 |
| DeepPink        | rgb(255,20,147) | #FF1493 |
| PaleVioletRed   | rgb(219,112,147)| #DB7093 |
| MediumVioletRed | rgb(199,21,133) | #C71585 |
+-----------------+----------------+---------+

Kelompok warna HTML - Orange

+-----------+----------------+---------+
| Nama Warna| RGB            | HEX     |
+-----------+----------------+---------+
| Orange    | rgb(255,165,0) | #FFA500 |
| DarkOrange| rgb(255,140,0) | #FF8C00 |
| Coral     | rgb(255,127,80)| #FF7F50 |
| Tomato    | rgb(255,99,71) | #FF6347 |
| OrangeRed | rgb(255,69,0)  | #FF4500 |
+-----------+----------------+---------+

Kelompok warna HTML - Hijau

+-------------------+----------------+---------+
| Nama Warna        | RGB            | HEX     |
+-------------------+----------------+---------+
| Green             | rgb(0,128,0)   | #008000 |
| Lime              | rgb(50,205,50) | #32CD32 |
| LimeGreen         | rgb(50,205,50) | #32CD32 |
| PaleGreen         | rgb(152,251,152)|#98FB98 |
| LightGreen        | rgb(144,238,144)|#90EE90 |
| MediumSpringGreen | rgb(0,250,154) | #00FA9A |
| SpringGreen       | rgb(0,255,127) | #00FF7F |
| MediumSeaGreen    | rgb(60,179,113)| #3CB371 |
| SeaGreen          | rgb(46,139,87) | #2E8B57 |
| ForestGreen       | rgb(34,139,34) | #228B22 |
| GreenYellow       | rgb(173,255,47)| #ADFF2F |
| DarkGreen         | rgb(0,100,0)   | #006400 |
+-------------------+----------------+---------+

Kelompok warna HTML - Biru

+----------------+----------------+---------+
| Nama Warna     | RGB            | HEX     |
+----------------+----------------+---------+
| Blue           | rgb(0,0,255)   | #0000FF |
| LightBlue      | rgb(173,216,230)| #ADD8E6 |
| SkyBlue        | rgb(135,206,235)| #87CEEB |
| DeepSkyBlue    | rgb(0,191,255) | #00BFFF |
| DodgerBlue     | rgb(30,144,255)| #1E90FF |
| CornflowerBlue | rgb(100,149,237)|#6495ED |
| SteelBlue      | rgb(70,130,180)| #4682B4 |
| RoyalBlue      | rgb(65,105,225)| #4169E1 |
| MediumBlue     | rgb(0,0,205)   | #0000CD |
| DarkBlue       | rgb(0,0,139)   | #00008B |
| MidnightBlue   | rgb(25,25,112) | #191970 |
| Navy           | rgb(0,0,128)   | #000080 |
+----------------+----------------+---------+

Kelompok warna HTML - Coklat

+---------------+----------------+---------+
| Nama Warna    | RGB            | HEX     |
+---------------+----------------+---------+
| Brown         | rgb(165,42,42) | #A52A2A |
| BurlyWood     | rgb(222,184,135)|#DEB887 |
| Beige         | rgb(245,245,220)|#F5F5DC |
| Wheat         | rgb(245,222,179)|#F5DEB3 |
| Tan           | rgb(210,180,140)|#D2B48C |
| RosyBrown     | rgb(188,143,143)|#BC8F8F |
| Goldenrod     | rgb(218,165,32) |#DAA520 |
| DarkGoldenrod | rgb(184,134,11) |#B8860B |
| Sienna        | rgb(160,82,45)  |#A0522D |
| SaddleBrown   | rgb(139,69,19)  |#8B4513 |
| Chocolate     | rgb(210,105,30) |#D2691E |
| Firebrick     | rgb(178,34,34)  |#B22222 |
+---------------+----------------+---------+

Kelompok warna HTML - Ungu

+--------------+----------------+---------+
| Nama Warna   | RGB            | HEX     |
+--------------+----------------+---------+
| Purple       | rgb(128,0,128) | #800080 |
| MediumPurple | rgb(147,112,219)|#9370DB |
| MediumOrchid | rgb(186,85,211)| #BA55D3 |
| Orchid       | rgb(218,112,214)|#DA70D6 |
| Violet       | rgb(238,130,238)|#EE82EE |
| Plum         | rgb(221,160,221)|#DDA0DD |
| Thistle      | rgb(216,191,216)|#D8BFD8 |
| Lavender     | rgb(230,230,250)|#E6E6FA |
+--------------+----------------+---------+

Kelompok warna HTML - Putih

+-------------+----------------+---------+
| Nama Warna  | RGB            | HEX     |
+-------------+----------------+---------+
| White       | rgb(255,255,255)|#FFFFFF |
| Snow        | rgb(255,250,250)|#FFFAFA |
| Honeydew    | rgb(240,255,240)|#F0FFF0 |
| MintCream   | rgb(245,255,250)|#F5FFFA |
| Azure       | rgb(240,255,255)|#F0FFFF |
| AliceBlue   | rgb(240,248,255)|#F0F8FF |
| GhostWhite  | rgb(248,248,255)|#F8F8FF |
| WhiteSmoke  | rgb(245,245,245)|#F5F5F5 |
| Seashell    | rgb(255,245,238)|#FFF5EE |
| Beige       | rgb(245,245,220)|#F5F5DC |
| OldLace     | rgb(253,245,230)|#FDF5E6 |
| FloralWhite | rgb(255,250,240)|#FFFAF0 |
+-------------+----------------+---------+

Cara Menggunakan Kode Warna HTML dan CSS

Warna teks dalam halaman web dapat diubah dengan mudah menggunakan kode warna di dalam CSS. Misalnya, kamu ingin mengubah warna teks menjadi merah, kamu bisa menggunakan nama warna, kode HEX, atau kode RGB.

Menggunakan nama warna:

p {
    color: red;
}

Menggunakan kode HEX:

p {
    color: #FF0000;
}

Menggunakan kode RGB:

p {
    color: rgb(255,0,0);
}

Selain teks, kamu juga bisa menerapkan warna pada latar belakang elemen web dengan kode warna. Misalkan, kamu ingin memberikan latar belakang biru pada suatu div, kamu bisa melakukannya dengan cara berikut.

Menggunakan nama warna:

div {
    background-color: blue;
}

Menggunakan kode HEX:

div {

    background-color: #0000FF;

}

Menggunakan kode RGB:

div {

    background-color: rgb(0,0,255);

}

FAQ (Frequently Asked Question)

Bagaimana cara menemukan kode warna untuk gambar atau logo?

Kamu bisa menggunakan alat seperti Color Picker yang tidak hanya tersedia di banyak software grafis, tetapi juga tersedia sebagai browser extension untuk Chrome dan Firefox.

Selain itu, Eyedropper Tool juga bisa menjadi pilihan lain yang tersedia di beberapa tool online. Dengan alat-alat ini, kamu dapat menunjuk bagian gambar yang kamu inginkan dan akan mendapatkan kode warnanya.

Apa itu gradient dan bagaimana cara menggunakannya dengan kode warna?

Gradient adalah peralihan warna dari satu warna ke warna lain. Dalam CSS, kamu bisa menggunakan properti background-image dengan value linear-gradient() atau radial-gradient() untuk membuat gradient.

Misalnya: background-image: linear-gradient(red, blue);.

Penutup

Kode warna HTML sangat penting dalam menciptakan tampilan yang menarik dan fungsional. Melalui kode-kode ini, kita bisa menerapkan palet warna yang spesifik, menciptakan harmoni visual, dan memastikan informasi disampaikan dengan jelas. Baik melalui kode RGB maupun Hexadecimal, kedua format ini memudahkan kita untuk memilih dan mengaplikasikan warna dengan presisi.