Inilah kumpulan kode warna HTML dan CSS Lengkap berdasarkan kode HEX dan kode RGB beserta tutorial cara penggunaannya pada CSS.
Berikut kode warna HTML lengkap berdasarkan kode hexadecimal dan kode RGB. Referensi kode warna html dibawah berdasarkan sumber dari w3schools yang aku tambahkan dengan kode warna RGB.
| | Nama Warna | HEX | RGB |
|---|
|
| Alice Blue
| #F0F8FF
| rgb(240, 248, 254)
|
|
| Antique White
| #FAEBD7
| rgb(251, 235, 217)
|
|
| Aqua
| #00FFFF
| rgb(0, 255, 254)
|
|
| Aquamarine
| #7FFFD4
| rgb(115, 255, 216)
|
|
| Azure
| #F0FFFF
| rgb(239, 255, 255)
|
|
| Beige
| #F5F5DC
| rgb(245, 245, 223)
|
|
| Bisque
| #FFE4C4
| rgb(255, 227, 200)
|
|
| Black
| #000000
| rgb(0, 0, 0)
|
|
| Blanched Almond
| #FFEBCD
| rgb(255, 234, 208)
|
|
| Blue
| #0000FF
| rgb(0, 0, 255)
|
|
| Blue Violet
| #8A2BE2
| rgb(138, 43, 226)
|
|
| Brown
| #A52A2A
| rgb(165, 42, 42)
|
|
| Burly Wood
| #DEB887
| rgb(222, 184, 135)
|
|
| Cadet Blue
| #5F9EA0
| rgb(95, 158, 160)
|
|
| Chartreuse
| #7FFF00
| rgb(127, 255, 1)
|
|
| Chocolate
| #D2691E
| rgb(210, 105, 30)
|
|
| Coral
| #FF7F50
| rgb(251, 127, 80)
|
|
| Cornflower Blue
| #6495ED
| rgb(100, 149, 237)
|
|
| Cornsilk
| #FFF8DC
| rgb(225, 248, 220)
|
|
| Crimson
| #DC143C
| rgb(220, 20, 60)
|
|
| Cyan
| #00FFFF
| rgb(62, 254, 255)
|
|
| Dark Blue
| #00008B
| rgb(0, 0, 139)
|
|
| Dark Cyan
| #008B8B
| rgb(29, 139, 139)
|
|
| Dark Golden Rod
| #B8860B
| rgb(184, 134, 11)
|
|
| Dark Gray
| #A9A9A9
| rgb(169, 169, 169)
|
|
| Dark Green
| #006400
| rgb(19, 100, 0)
|
|
| Dark Khaki
| #BDB76B
| rgb(189, 183, 107)
|
|
| Dark Magenta
| #8B008B
| rgb(139, 0, 140)
|
|
| Dark Olive Green
| #556B2F
| rgb(85, 107, 47)
|
|
| Dark Orange
| #FF8C00
| rgb(251, 140, 1)
|
|
| Dark Orchid
| #9932CC
| rgb(153, 50, 204)
|
|
| Dark Red
| #8B0000
| rgb(139, 5, 0)
|
|
| Dark Salmon
| #E9967A
| rgb(233, 150, 122)
|
|
| Dark Sea Green
| #8FBC8F
| rgb(143, 188, 144)
|
|
| Dark Slate Blue
| #483D8B
| rgb(72, 61, 139)
|
|
| Dark Slate Gray
| #2F4F4F
| rgb(47, 79, 79)
|
|
| Dark Turquoise
| #00CED1
| rgb(48, 206, 209)
|
|
| Dark Violet
| #9400D3
| rgb(148, 0, 211)
|
|
| Deep Pink
| #FF1493
| rgb(249, 19, 147)
|
|
| Deep Sky Blue
| #00BFFF
| rgb(43, 191, 254)
|
|
| Dim Gray
| #696969
| rgb(105, 105, 105)
|
|
| Dodger Blue
| #1E90FF
| rgb(30, 144, 255)
|
|
| Fire Brick
| #B22222
| rgb(178, 34, 33)
|
|
| Floral White
| #FFFAF0
| rgb(255, 250, 240)
|
|
| Forest Green
| #228B22
| rgb(34, 139, 35)
|
|
| Fuchsia
| #FF00FF
| rgb(249, 0, 255)
|
|
| Gainsboro
| #DCDCDC
| rgb(220, 220, 220)
|
|
| Ghost White
| #F8F8FF
| rgb(248, 248, 255)
|
|
| Gold
| #FFD700
| rgb(253, 215, 3)
|
|
| Golden Rod
| #DAA520
| rgb(218, 165, 32)
|
|
| Gray
| #808080
| rgb(128, 128, 128)
|
|
| Green
| #008000
| rgb(27, 128, 1)
|
|
| Green Yellow
| #ADFF2F
| rgb(173, 255, 48)
|
|
| Honey Dew
| #F0FFF0
| rgb(240, 255, 240)
|
|
| Hot Pink
| #FF69B4
| rgb(240, 255, 240)
|
|
| Indian Red
| #CD5C5C
| rgb(205, 92, 92)
|
|
| Indigo
| #4B0082
| rgb(75, 0, 130)
|
|
| Ivory
| #FFFFF0
| rgb(255, 255, 239)
|
|
| Khaki
| #F0E68C
| rgb(240, 230, 140)
|
|
| Lavender
| #E6E6FA
| rgb(230, 230, 250)
|
|
| Lavender Blush
| #FFF0F5
| rgb(254, 240, 245)
|
|
| Lawn Green
| #7CFC00
| rgb(124, 252, 2)
|
|
| Lemon Chiffon
| #FFFACD
| rgb(255, 250, 205)
|
|
| Light Blue
| #ADD8E6
| rgb(173, 216, 230)
|
|
| Light Coral
| #F08080
| rgb(240, 128, 128)
|
|
| Light Cyan
| #E0FFFF
| rgb(224, 255, 255)
|
|
| Light Golden Rod Yellow
| #FAFAD2
| rgb(250, 250, 210)
|
|
| Light Gray
| #D3D3D3
| rgb(211, 211, 211)
|
|
| Light Green
| #90EE90
| rgb(144, 238, 144)
|
|
| Light Pink
| #FFB6C1
| rgb(252, 182, 193)
|
|
| Light Salmon
| #FFA07A
| rgb(251, 160, 122)
|
|
| Light Sea Green
| #20B2AA
| rgb(40, 178, 170)
|
|
| Light Sky Blue
| #87CEFA
| rgb(135, 206, 250)
|
|
| Light Slate Gray
| #778899
| rgb(119, 136, 153)
|
|
| Light Steel Blue
| #B0C4DE
| rgb(176, 196, 222)
|
|
| Light Yellow
| #FFFFE0
| rgb(255, 255, 224)
|
|
| Lime
| #00FF00
| rgb(63, 255, 0)
|
|
| Lime Green
| #32CD32
| rgb(50, 205, 50)
|
|
| Linen
| #FAF0E6
| rgb(250, 240, 230)
|
|
| Magenta
| #FF00FF
| rgb(249, 0, 255)
|
|
| Maroon
| #800000
| rgb(128, 4, 0)
|
|
| Medium Aqua Marine
| #66CDAA
| rgb(102, 205, 170)
|
|
| Medium Blue
| #0000CD
| rgb(0, 0, 205)
|
|
| Medium Orchid
| #BA55D3
| rgb(186, 85, 211)
|
|
| Medium Purple
| #9370DB
| rgb(147, 112, 219)
|
|
| Medium Sea Green
| #3CB371
| rgb(60, 179, 113)
|
|
| Medium Slate Blue
| #7B68EE
| rgb(123, 103, 238)
|
|
| Medium Spring Green
| #00FA9A
| rgb(62, 250, 153)
|
|
| Medium Turquoise
| #48D1CC
| rgb(72, 209, 204)
|
|
| Medium Violet Red
| #C71585
| rgb(199, 21, 133)
|
|
| Midnight Blue
| #191970
| rgb(25, 25, 112)
|
|
| Mint Cream
| #F5FFFA
| rgb(245, 255, 250)
|
|
| Misty Rose
| #FFE4E1
| rgb(254, 228, 225)
|
|
| Moccasin
| #FFE4B5
| rgb(254, 228, 181)
|
|
| Navajo White
| #FFDEAD
| rgb(254, 222, 173)
|
|
| Navy
| #000080
| rgb(0, 0, 128)
|
|
| Old Lace
| #FDF5E6
| rgb(253, 245, 230)
|
|
| Olive
| #808000
| rgb(128, 128, 1)
|
|
| Olive Drab
| #6B8E23
| rgb(107, 142, 35)
|
|
| Orange
| #FFA500
| rgb(252, 165, 3)
|
|
| Orange Red
| #FF4500
| rgb(250, 69, 1)
|
|
| Orchid
| #DA70D6
| rgb(218, 112, 214)
|
|
| Pale Golden Rod
| #EEE8AA
| rgb(238, 232, 170)
|
|
| Pale Green
| #98FB98
| rgb(152, 251, 153)
|
|
| Pale Turquoise
| #AFEEEE
| rgb(175, 238, 239)
|
|
| Pale Violet Red
| #DB7093
| rgb(219, 112, 147)
|
|
| Papaya Whip
| #FFEFD5
| rgb(254, 239, 213)
|
|
| Peach Puff
| #FFDAB9
| rgb(253, 218, 185)
|
|
| Peru
| #CD853F
| rgb(205, 133, 63)
|
|
| Pink
| #FFC0CB
| rgb(252, 192, 203)
|
|
| Plum
| #DDA0DD
| rgb(221, 160, 221)
|
|
| Powder Blue
| #B0E0E6
| rgb(176, 224, 230)
|
|
| Purple
| #800080
| rgb(128, 0, 128)
|
|
| Rebecca Purple
| #663399
| rgb(102, 51, 153)
|
|
| Red
| #FF0000
| rgb(255, 0, 0)
|
|
| Rosy Brown
| #BC8F8F
| rgb(188, 143, 142)
|
|
| Royal Blue
| #4169E1
| rgb(65, 105, 225)
|
|
| Saddle Brown
| #8B4513
| rgb(139, 69, 19)
|
|
| Salmon
| #FA8072
| rgb(250, 128, 114)
|
|
| Sandy Brown
| #F4A460
| rgb(244, 164, 95)
|
|
| Sea Green
| #2E8B57
| rgb(46, 139, 87)
|
|
| Sea Shell
| #FFF5EE
| rgb(255, 245, 238)
|
|
| Sienna
| #A0522D
| rgb(160, 82, 45)
|
|
| Silver
| #C0C0C0
| rgb(192, 192, 192)
|
|
| Sky Blue
| #87CEEB
| rgb(135, 206, 235)
|
|
| Slate Blue
| #6A5ACD
| rgb(106, 90, 205)
|
|
| Slate Gray
| #708090
| rgb(112, 128, 145)
|
|
| Snow
| #FFFAFA
| rgb(255, 250, 250)
|
|
| Spring Green
| #00FF7F
| rgb(63, 255, 128)
|
|
| Steel Blue
| #4682B4
| rgb(70, 130, 180)
|
|
| Tan
| #D2B48C
| rgb(210, 180, 140)
|
|
| Teal
| #008080
| rgb(26, 128, 127)
|
|
| Thistle
| #D8BFD8
| rgb(216, 191, 216)
|
|
| Tomato
| #FF6347
| rgb(250, 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)
|
|
| White Smoke
| #F5F5F5
| rgb(245, 245, 245)
|
|
| Yellow
| #FFFF00
| rgb(255, 255, 0)
|
|
| Yellow Green
| #9ACD32
| rgb(154, 205, 49)
|
Contoh Cara Penggunaan Kode Warna HTML
Berikut cara penggunaan kode warna html yang benar pada sebuah kode CSS.
Kode CSS:
.warna-teks {
color: #FF6347; /* TOMATO */
}
Atau bisa penulisan kode warna dalam bentuk rgb seperti berikut.
Kode CSS:
.warna-teks {
color: rgb(250, 99, 71); /* TOMATO */
}
Kode HTML:
Kode Warna HTML
Teks ini berubah warna dengan kode warna rgb(250, 99, 71) atau kode warna #FF6347.
Hasil:
Teks ini berubah warna dengan kode warna rgb(250, 99, 71) atau kode warna #FF6347.
Kode warna tersebut juga dapat digunakan pada elemen HTML
Kode HTML:
Kode Warna HTML
Warna Teks Berubah
Hasilnya akan seperti berikut:
Warna Teks Berubah
Contoh Cara Penggunaan dengan Inline Style CSS
Kamu juga bisa menggunakan kode warna html dengan cara inline style css pada elemen yang mau diubah warnanya.
Kode HTML
Kode Warna HTML
Penggunaan kode warna html dengan inline style.
Hasil nya akan seperti berikut ini:
Penggunaan kode warna dengan inline style.
Nah, kita sudah belajar kode warna html dan juga penerapannya dengan css.
Kamu bisa berkreasikan kode warna tersebut pada elemen html seperti text, button, border,
table, link, dan lainnya.
Ohya, untuk kamu yang mau belajar html dari nol, saya sudah bikin materi tentang panduan belajar html untuk pemula disertai contoh kode dan gambar.
Isi materi belajar html antara lain:
- Struktur Dasar HTML
- Cara Memasukan Gambar di Web dengan HTML
- Cara Memasukan video youtube di web dengan HTML
- Cara Memasukan Musik dari Spotify di website
- Cara Memasukan
Twitter Timeline dan Instagram Posts di Website
- Cara Membuat Daftar List Item
- Cara Membuat Tabel
- dan materi lainnya
Materi nya bisa kamu lihat disini: Belajar HTML Gampang Banget! – HTML Warrior #1
Semoga bermanfaat dan jangan lupa share halaman ini di facebook, twitter ataupun blog kamu yah! Mari kita berbagi ilmu 😀
Baca Juga:
#FF0000 warna apa?
Contohnya adalah #FF0000 yang merupakan warna merah murni karena komponen warna merah memiliki nilai maksimal FF. Sementara itu, komponen warna hijau dan biru memiliki nilai terendah yaitu 00.
RGB 255 250 205 warna apakah ini?
Daftar Kode Wana HTML Lengkap Full Color & CSS.
#333333 kode warna apa?
Kode warna heksadesimal #333333 / #333 adalah gelap bayangan dari abu-abu. Dalam model warna RGB #333333 terdiri dari 20% merah, 20% hijau dan 20% biru. Di ruang warna HSL #333333 memiliki hue 0° (derajat), 0% saturasi dan 20% penerangan. Warna ini memiliki panjang gelombang sekitar 0 nm.
#ffffff warna apa?
Warna white / Putih dengan kode warna heksadesimal #ffffff / #fff adalah sangat ringan bayangan dari abu-abu. Dalam model warna RGB #ffffff terdiri dari 100% merah, 100% hijau dan 100% biru. Di ruang warna HSL #ffffff memiliki hue 0° (derajat), 0% saturasi dan 100% penerangan.
