ID

Kode warna HTML

Tabel kode warna HTML ini menampilkan 148 warna CSS bernama lengkap dengan nama, kode HEX, serta nilai RGB dan HSL. Cari berdasarkan nama atau kode, saring menurut keluarga warna, urutkan menurut nama, rona, atau kecerahan, lalu salin nilainya dengan satu klik: semuanya langsung terlihat, juga di ponsel.

Sumber: W3C – CSS Color Module Level 4: Named Colors (148 nama warna beserta nilainya). Diperbarui: .

148 dari 148 warna

  • aliceblue#F0F8FFrgb(240, 248, 255)hsl(208, 100%, 97%)Kontras teks dengan hitam: 19,6 : 1
  • antiquewhite#FAEBD7rgb(250, 235, 215)hsl(34, 78%, 91%)Kontras teks dengan hitam: 17,9 : 1
  • aqua#00FFFFrgb(0, 255, 255)hsl(180, 100%, 50%)Kontras teks dengan hitam: 16,7 : 1
  • aquamarine#7FFFD4rgb(127, 255, 212)hsl(160, 100%, 75%)Kontras teks dengan hitam: 17,2 : 1
  • azure#F0FFFFrgb(240, 255, 255)hsl(180, 100%, 97%)Kontras teks dengan hitam: 20,5 : 1
  • beige#F5F5DCrgb(245, 245, 220)hsl(60, 56%, 91%)Kontras teks dengan hitam: 19,0 : 1
  • bisque#FFE4C4rgb(255, 228, 196)hsl(33, 100%, 88%)Kontras teks dengan hitam: 17,1 : 1
  • black#000000rgb(0, 0, 0)hsl(0, 0%, 0%)Kontras teks dengan putih: 21,0 : 1
  • blanchedalmond#FFEBCDrgb(255, 235, 205)hsl(36, 100%, 90%)Kontras teks dengan hitam: 18,0 : 1
  • blue#0000FFrgb(0, 0, 255)hsl(240, 100%, 50%)Kontras teks dengan putih: 8,6 : 1
  • blueviolet#8A2BE2rgb(138, 43, 226)hsl(271, 76%, 53%)Kontras teks dengan putih: 6,0 : 1
  • brown#A52A2Argb(165, 42, 42)hsl(0, 59%, 41%)Kontras teks dengan putih: 7,1 : 1
  • burlywood#DEB887rgb(222, 184, 135)hsl(34, 57%, 70%)Kontras teks dengan hitam: 11,3 : 1
  • cadetblue#5F9EA0rgb(95, 158, 160)hsl(182, 25%, 50%)Kontras teks dengan hitam: 6,9 : 1
  • chartreuse#7FFF00rgb(127, 255, 0)hsl(90, 100%, 50%)Kontras teks dengan hitam: 16,2 : 1
  • chocolate#D2691Ergb(210, 105, 30)hsl(25, 75%, 47%)Kontras teks dengan hitam: 5,8 : 1
  • coral#FF7F50rgb(255, 127, 80)hsl(16, 100%, 66%)Kontras teks dengan hitam: 8,4 : 1
  • cornflowerblue#6495EDrgb(100, 149, 237)hsl(219, 79%, 66%)Kontras teks dengan hitam: 7,1 : 1
  • cornsilk#FFF8DCrgb(255, 248, 220)hsl(48, 100%, 93%)Kontras teks dengan hitam: 19,7 : 1
  • crimson#DC143Crgb(220, 20, 60)hsl(348, 83%, 47%)Kontras teks dengan putih: 5,0 : 1
  • cyan#00FFFFrgb(0, 255, 255)hsl(180, 100%, 50%)Kontras teks dengan hitam: 16,7 : 1
  • darkblue#00008Brgb(0, 0, 139)hsl(240, 100%, 27%)Kontras teks dengan putih: 15,3 : 1
  • darkcyan#008B8Brgb(0, 139, 139)hsl(180, 100%, 27%)Kontras teks dengan hitam: 5,1 : 1
  • darkgoldenrod#B8860Brgb(184, 134, 11)hsl(43, 89%, 38%)Kontras teks dengan hitam: 6,5 : 1
  • darkgray#A9A9A9rgb(169, 169, 169)hsl(0, 0%, 66%)Kontras teks dengan hitam: 8,9 : 1
  • darkgreen#006400rgb(0, 100, 0)hsl(120, 100%, 20%)Kontras teks dengan putih: 7,4 : 1
  • darkgrey#A9A9A9rgb(169, 169, 169)hsl(0, 0%, 66%)Kontras teks dengan hitam: 8,9 : 1
  • darkkhaki#BDB76Brgb(189, 183, 107)hsl(56, 38%, 58%)Kontras teks dengan hitam: 10,1 : 1
  • darkmagenta#8B008Brgb(139, 0, 139)hsl(300, 100%, 27%)Kontras teks dengan putih: 8,5 : 1
  • darkolivegreen#556B2Frgb(85, 107, 47)hsl(82, 39%, 30%)Kontras teks dengan putih: 5,9 : 1
  • darkorange#FF8C00rgb(255, 140, 0)hsl(33, 100%, 50%)Kontras teks dengan hitam: 9,0 : 1
  • darkorchid#9932CCrgb(153, 50, 204)hsl(280, 61%, 50%)Kontras teks dengan putih: 5,7 : 1
  • darkred#8B0000rgb(139, 0, 0)hsl(0, 100%, 27%)Kontras teks dengan putih: 10,0 : 1
  • darksalmon#E9967Argb(233, 150, 122)hsl(15, 72%, 70%)Kontras teks dengan hitam: 9,1 : 1
  • darkseagreen#8FBC8Frgb(143, 188, 143)hsl(120, 25%, 65%)Kontras teks dengan hitam: 9,8 : 1
  • darkslateblue#483D8Brgb(72, 61, 139)hsl(248, 39%, 39%)Kontras teks dengan putih: 9,1 : 1
  • darkslategray#2F4F4Frgb(47, 79, 79)hsl(180, 25%, 25%)Kontras teks dengan putih: 8,9 : 1
  • darkslategrey#2F4F4Frgb(47, 79, 79)hsl(180, 25%, 25%)Kontras teks dengan putih: 8,9 : 1
  • darkturquoise#00CED1rgb(0, 206, 209)hsl(181, 100%, 41%)Kontras teks dengan hitam: 10,7 : 1
  • darkviolet#9400D3rgb(148, 0, 211)hsl(282, 100%, 41%)Kontras teks dengan putih: 6,6 : 1
  • deeppink#FF1493rgb(255, 20, 147)hsl(328, 100%, 54%)Kontras teks dengan hitam: 5,8 : 1
  • deepskyblue#00BFFFrgb(0, 191, 255)hsl(195, 100%, 50%)Kontras teks dengan hitam: 9,9 : 1
  • dimgray#696969rgb(105, 105, 105)hsl(0, 0%, 41%)Kontras teks dengan putih: 5,5 : 1
  • dimgrey#696969rgb(105, 105, 105)hsl(0, 0%, 41%)Kontras teks dengan putih: 5,5 : 1
  • dodgerblue#1E90FFrgb(30, 144, 255)hsl(210, 100%, 56%)Kontras teks dengan hitam: 6,5 : 1
  • firebrick#B22222rgb(178, 34, 34)hsl(0, 68%, 42%)Kontras teks dengan putih: 6,7 : 1
  • floralwhite#FFFAF0rgb(255, 250, 240)hsl(40, 100%, 97%)Kontras teks dengan hitam: 20,2 : 1
  • forestgreen#228B22rgb(34, 139, 34)hsl(120, 61%, 34%)Kontras teks dengan hitam: 4,8 : 1
  • fuchsia#FF00FFrgb(255, 0, 255)hsl(300, 100%, 50%)Kontras teks dengan hitam: 6,7 : 1
  • gainsboro#DCDCDCrgb(220, 220, 220)hsl(0, 0%, 86%)Kontras teks dengan hitam: 15,3 : 1
  • ghostwhite#F8F8FFrgb(248, 248, 255)hsl(240, 100%, 99%)Kontras teks dengan hitam: 19,9 : 1
  • gold#FFD700rgb(255, 215, 0)hsl(51, 100%, 50%)Kontras teks dengan hitam: 15,0 : 1
  • goldenrod#DAA520rgb(218, 165, 32)hsl(43, 74%, 49%)Kontras teks dengan hitam: 9,4 : 1
  • gray#808080rgb(128, 128, 128)hsl(0, 0%, 50%)Kontras teks dengan hitam: 5,3 : 1
  • green#008000rgb(0, 128, 0)hsl(120, 100%, 25%)Kontras teks dengan putih: 5,1 : 1
  • greenyellow#ADFF2Frgb(173, 255, 47)hsl(84, 100%, 59%)Kontras teks dengan hitam: 17,1 : 1
  • grey#808080rgb(128, 128, 128)hsl(0, 0%, 50%)Kontras teks dengan hitam: 5,3 : 1
  • honeydew#F0FFF0rgb(240, 255, 240)hsl(120, 100%, 97%)Kontras teks dengan hitam: 20,3 : 1
  • hotpink#FF69B4rgb(255, 105, 180)hsl(330, 100%, 71%)Kontras teks dengan hitam: 7,9 : 1
  • indianred#CD5C5Crgb(205, 92, 92)hsl(0, 53%, 58%)Kontras teks dengan hitam: 5,3 : 1
  • indigo#4B0082rgb(75, 0, 130)hsl(275, 100%, 25%)Kontras teks dengan putih: 13,0 : 1
  • ivory#FFFFF0rgb(255, 255, 240)hsl(60, 100%, 97%)Kontras teks dengan hitam: 20,8 : 1
  • khaki#F0E68Crgb(240, 230, 140)hsl(54, 77%, 75%)Kontras teks dengan hitam: 16,4 : 1
  • lavender#E6E6FArgb(230, 230, 250)hsl(240, 67%, 94%)Kontras teks dengan hitam: 17,1 : 1
  • lavenderblush#FFF0F5rgb(255, 240, 245)hsl(340, 100%, 97%)Kontras teks dengan hitam: 19,0 : 1
  • lawngreen#7CFC00rgb(124, 252, 0)hsl(90, 100%, 49%)Kontras teks dengan hitam: 15,8 : 1
  • lemonchiffon#FFFACDrgb(255, 250, 205)hsl(54, 100%, 90%)Kontras teks dengan hitam: 19,8 : 1
  • lightblue#ADD8E6rgb(173, 216, 230)hsl(195, 53%, 79%)Kontras teks dengan hitam: 13,7 : 1
  • lightcoral#F08080rgb(240, 128, 128)hsl(0, 79%, 72%)Kontras teks dengan hitam: 8,1 : 1
  • lightcyan#E0FFFFrgb(224, 255, 255)hsl(180, 100%, 94%)Kontras teks dengan hitam: 19,9 : 1
  • lightgoldenrodyellow#FAFAD2rgb(250, 250, 210)hsl(60, 80%, 90%)Kontras teks dengan hitam: 19,7 : 1
  • lightgray#D3D3D3rgb(211, 211, 211)hsl(0, 0%, 83%)Kontras teks dengan hitam: 14,0 : 1
  • lightgreen#90EE90rgb(144, 238, 144)hsl(120, 73%, 75%)Kontras teks dengan hitam: 14,8 : 1
  • lightgrey#D3D3D3rgb(211, 211, 211)hsl(0, 0%, 83%)Kontras teks dengan hitam: 14,0 : 1
  • lightpink#FFB6C1rgb(255, 182, 193)hsl(351, 100%, 86%)Kontras teks dengan hitam: 12,7 : 1
  • lightsalmon#FFA07Argb(255, 160, 122)hsl(17, 100%, 74%)Kontras teks dengan hitam: 10,6 : 1
  • lightseagreen#20B2AArgb(32, 178, 170)hsl(177, 70%, 41%)Kontras teks dengan hitam: 8,0 : 1
  • lightskyblue#87CEFArgb(135, 206, 250)hsl(203, 92%, 75%)Kontras teks dengan hitam: 12,2 : 1
  • lightslategray#778899rgb(119, 136, 153)hsl(210, 14%, 53%)Kontras teks dengan hitam: 5,8 : 1
  • lightslategrey#778899rgb(119, 136, 153)hsl(210, 14%, 53%)Kontras teks dengan hitam: 5,8 : 1
  • lightsteelblue#B0C4DErgb(176, 196, 222)hsl(214, 41%, 78%)Kontras teks dengan hitam: 11,8 : 1
  • lightyellow#FFFFE0rgb(255, 255, 224)hsl(60, 100%, 94%)Kontras teks dengan hitam: 20,6 : 1
  • lime#00FF00rgb(0, 255, 0)hsl(120, 100%, 50%)Kontras teks dengan hitam: 15,3 : 1
  • limegreen#32CD32rgb(50, 205, 50)hsl(120, 61%, 50%)Kontras teks dengan hitam: 9,9 : 1
  • linen#FAF0E6rgb(250, 240, 230)hsl(30, 67%, 94%)Kontras teks dengan hitam: 18,7 : 1
  • magenta#FF00FFrgb(255, 0, 255)hsl(300, 100%, 50%)Kontras teks dengan hitam: 6,7 : 1
  • maroon#800000rgb(128, 0, 0)hsl(0, 100%, 25%)Kontras teks dengan putih: 10,9 : 1
  • mediumaquamarine#66CDAArgb(102, 205, 170)hsl(160, 51%, 60%)Kontras teks dengan hitam: 10,9 : 1
  • mediumblue#0000CDrgb(0, 0, 205)hsl(240, 100%, 40%)Kontras teks dengan putih: 11,2 : 1
  • mediumorchid#BA55D3rgb(186, 85, 211)hsl(288, 59%, 58%)Kontras teks dengan hitam: 5,3 : 1
  • mediumpurple#9370DBrgb(147, 112, 219)hsl(260, 60%, 65%)Kontras teks dengan hitam: 5,6 : 1
  • mediumseagreen#3CB371rgb(60, 179, 113)hsl(147, 50%, 47%)Kontras teks dengan hitam: 7,9 : 1
  • mediumslateblue#7B68EErgb(123, 104, 238)hsl(249, 80%, 67%)Kontras teks dengan hitam: 5,1 : 1
  • mediumspringgreen#00FA9Argb(0, 250, 154)hsl(157, 100%, 49%)Kontras teks dengan hitam: 15,1 : 1
  • mediumturquoise#48D1CCrgb(72, 209, 204)hsl(178, 60%, 55%)Kontras teks dengan hitam: 11,3 : 1
  • mediumvioletred#C71585rgb(199, 21, 133)hsl(322, 81%, 43%)Kontras teks dengan putih: 5,4 : 1
  • midnightblue#191970rgb(25, 25, 112)hsl(240, 64%, 27%)Kontras teks dengan putih: 14,8 : 1
  • mintcream#F5FFFArgb(245, 255, 250)hsl(150, 100%, 98%)Kontras teks dengan hitam: 20,6 : 1
  • mistyrose#FFE4E1rgb(255, 228, 225)hsl(6, 100%, 94%)Kontras teks dengan hitam: 17,4 : 1
  • moccasin#FFE4B5rgb(255, 228, 181)hsl(38, 100%, 85%)Kontras teks dengan hitam: 17,0 : 1
  • navajowhite#FFDEADrgb(255, 222, 173)hsl(36, 100%, 84%)Kontras teks dengan hitam: 16,3 : 1
  • navy#000080rgb(0, 0, 128)hsl(240, 100%, 25%)Kontras teks dengan putih: 16,0 : 1
  • oldlace#FDF5E6rgb(253, 245, 230)hsl(39, 85%, 95%)Kontras teks dengan hitam: 19,4 : 1
  • olive#808000rgb(128, 128, 0)hsl(60, 100%, 25%)Kontras teks dengan hitam: 5,0 : 1
  • olivedrab#6B8E23rgb(107, 142, 35)hsl(80, 60%, 35%)Kontras teks dengan hitam: 5,5 : 1
  • orange#FFA500rgb(255, 165, 0)hsl(39, 100%, 50%)Kontras teks dengan hitam: 10,6 : 1
  • orangered#FF4500rgb(255, 69, 0)hsl(16, 100%, 50%)Kontras teks dengan hitam: 6,1 : 1
  • orchid#DA70D6rgb(218, 112, 214)hsl(302, 59%, 65%)Kontras teks dengan hitam: 7,3 : 1
  • palegoldenrod#EEE8AArgb(238, 232, 170)hsl(55, 67%, 80%)Kontras teks dengan hitam: 16,8 : 1
  • palegreen#98FB98rgb(152, 251, 152)hsl(120, 93%, 79%)Kontras teks dengan hitam: 16,6 : 1
  • paleturquoise#AFEEEErgb(175, 238, 238)hsl(180, 65%, 81%)Kontras teks dengan hitam: 16,3 : 1
  • palevioletred#DB7093rgb(219, 112, 147)hsl(340, 60%, 65%)Kontras teks dengan hitam: 6,8 : 1
  • papayawhip#FFEFD5rgb(255, 239, 213)hsl(37, 100%, 92%)Kontras teks dengan hitam: 18,6 : 1
  • peachpuff#FFDAB9rgb(255, 218, 185)hsl(28, 100%, 86%)Kontras teks dengan hitam: 16,0 : 1
  • peru#CD853Frgb(205, 133, 63)hsl(30, 59%, 53%)Kontras teks dengan hitam: 7,0 : 1
  • pink#FFC0CBrgb(255, 192, 203)hsl(350, 100%, 88%)Kontras teks dengan hitam: 13,7 : 1
  • plum#DDA0DDrgb(221, 160, 221)hsl(300, 47%, 75%)Kontras teks dengan hitam: 10,1 : 1
  • powderblue#B0E0E6rgb(176, 224, 230)hsl(187, 52%, 80%)Kontras teks dengan hitam: 14,7 : 1
  • purple#800080rgb(128, 0, 128)hsl(300, 100%, 25%)Kontras teks dengan putih: 9,4 : 1
  • rebeccapurple#663399rgb(102, 51, 153)hsl(270, 50%, 40%)Kontras teks dengan putih: 8,4 : 1
  • red#FF0000rgb(255, 0, 0)hsl(0, 100%, 50%)Kontras teks dengan hitam: 5,3 : 1
  • rosybrown#BC8F8Frgb(188, 143, 143)hsl(0, 25%, 65%)Kontras teks dengan hitam: 7,5 : 1
  • royalblue#4169E1rgb(65, 105, 225)hsl(225, 73%, 57%)Kontras teks dengan putih: 4,8 : 1
  • saddlebrown#8B4513rgb(139, 69, 19)hsl(25, 76%, 31%)Kontras teks dengan putih: 7,1 : 1
  • salmon#FA8072rgb(250, 128, 114)hsl(6, 93%, 71%)Kontras teks dengan hitam: 8,4 : 1
  • sandybrown#F4A460rgb(244, 164, 96)hsl(28, 87%, 67%)Kontras teks dengan hitam: 10,3 : 1
  • seagreen#2E8B57rgb(46, 139, 87)hsl(146, 50%, 36%)Kontras teks dengan hitam: 4,9 : 1
  • seashell#FFF5EErgb(255, 245, 238)hsl(25, 100%, 97%)Kontras teks dengan hitam: 19,5 : 1
  • sienna#A0522Drgb(160, 82, 45)hsl(19, 56%, 40%)Kontras teks dengan putih: 5,6 : 1
  • silver#C0C0C0rgb(192, 192, 192)hsl(0, 0%, 75%)Kontras teks dengan hitam: 11,5 : 1
  • skyblue#87CEEBrgb(135, 206, 235)hsl(197, 71%, 73%)Kontras teks dengan hitam: 12,1 : 1
  • slateblue#6A5ACDrgb(106, 90, 205)hsl(248, 53%, 58%)Kontras teks dengan putih: 5,3 : 1
  • slategray#708090rgb(112, 128, 144)hsl(210, 13%, 50%)Kontras teks dengan hitam: 5,2 : 1
  • slategrey#708090rgb(112, 128, 144)hsl(210, 13%, 50%)Kontras teks dengan hitam: 5,2 : 1
  • snow#FFFAFArgb(255, 250, 250)hsl(0, 100%, 99%)Kontras teks dengan hitam: 20,3 : 1
  • springgreen#00FF7Frgb(0, 255, 127)hsl(150, 100%, 50%)Kontras teks dengan hitam: 15,6 : 1
  • steelblue#4682B4rgb(70, 130, 180)hsl(207, 44%, 49%)Kontras teks dengan hitam: 5,1 : 1
  • tan#D2B48Crgb(210, 180, 140)hsl(34, 44%, 69%)Kontras teks dengan hitam: 10,6 : 1
  • teal#008080rgb(0, 128, 128)hsl(180, 100%, 25%)Kontras teks dengan putih: 4,8 : 1
  • thistle#D8BFD8rgb(216, 191, 216)hsl(300, 24%, 80%)Kontras teks dengan hitam: 12,4 : 1
  • tomato#FF6347rgb(255, 99, 71)hsl(9, 100%, 64%)Kontras teks dengan hitam: 7,1 : 1
  • turquoise#40E0D0rgb(64, 224, 208)hsl(174, 72%, 56%)Kontras teks dengan hitam: 12,8 : 1
  • violet#EE82EErgb(238, 130, 238)hsl(300, 76%, 72%)Kontras teks dengan hitam: 9,1 : 1
  • wheat#F5DEB3rgb(245, 222, 179)hsl(39, 77%, 83%)Kontras teks dengan hitam: 16,0 : 1
  • white#FFFFFFrgb(255, 255, 255)hsl(0, 0%, 100%)Kontras teks dengan hitam: 21,0 : 1
  • whitesmoke#F5F5F5rgb(245, 245, 245)hsl(0, 0%, 96%)Kontras teks dengan hitam: 19,3 : 1
  • yellow#FFFF00rgb(255, 255, 0)hsl(60, 100%, 50%)Kontras teks dengan hitam: 19,6 : 1
  • yellowgreen#9ACD32rgb(154, 205, 50)hsl(80, 61%, 50%)Kontras teks dengan hitam: 11,2 : 1

Sumber nama dan nilai: CSS Color Module Level 4 (W3C). Keluarga warna hanyalah alat bantu menelusuri dan bukan bagian dari spesifikasi.

Kotak Alat Saya

Hasil

Cara menghitung

Singkatnya: di HTML dan CSS, warna bisa ditulis bukan hanya dengan kode, tetapi juga dengan nama bahasa Inggris, misalnya color: tomato sebagai pengganti #FF6347. Ada 148 nama seperti itu. Tabel di atas menunjukkan masing-masing dengan kode HEX, komponen RGB, dan nilai HSL.

Cara memakai tabel

  1. Kolom pencarian: ketik sebagian nama atau kode HEX (“blue”, “green”, “6495ED”).
  2. Pilih keluarga warna untuk melihat hanya warna merah, hijau, dan seterusnya.
  3. Urutkan menurut nama, rona (urutan pelangi, abu-abu di akhir), atau kecerahan.
  4. Klik HEX, Nama, atau RGB: nilainya masuk ke papan klip.

HEX, RGB, dan HSL

Kontras teks

Di bawah setiap warna terlihat apakah teks hitam atau putih lebih mudah dibaca di atasnya, lengkap dengan rasio kontras menurut WCAG 2.2. Untuk teks normal WCAG mensyaratkan minimal 4,5 : 1, untuk teks besar 3 : 1. Nama yang setara seperti aqua dan cyan atau gray dan grey adalah alias dengan nilai yang sama.

Pertanyaan umum

Berapa banyak nama warna di HTML dan CSS?

Ada 148 warna bernama, termasuk alias seperti aqua dan cyan, magenta dan fuchsia, serta gray dan grey. Ditambah kata kunci transparent dan currentcolor.

Bagaimana menulis nama warna di CSS?

Langsung sebagai nilai, misalnya color: tomato; atau background: cornflowerblue;. Namanya berbahasa Inggris dan tidak membedakan huruf besar-kecil.

Apa kode HEX merah, hijau, dan biru?

red adalah #FF0000, lime (hijau murni) adalah #00FF00, dan blue adalah #0000FF. Kata green di CSS berarti hijau yang lebih gelap, #008000.

Bagaimana mencari nama warna dari kode HEX?

Ketik kodenya di kolom pencarian, dengan atau tanpa #. Jika ada nama dengan nilai persis itu, namanya muncul di daftar.

Warna teks apa yang cocok di atas suatu warna?

Keterangan di bawah warna menyebutkan apakah hitam atau putih memberi kontras lebih besar. Untuk teks yang mudah dibaca, rasionya minimal 4,5 : 1.

Sumber dan dasar hukum

Diperbarui: · Kebijakan editorial

Alat terkait