TR

HTML renk kodları

Bu HTML renk kodları tablosu, 148 adlandırılmış CSS rengini adı, HEX kodu ile RGB ve HSL değerleriyle gösterir. Ada ya da koda göre arayın, renk ailesine göre süzün, ada, tona veya açıklığa göre sıralayın ve tek tıkla değeri kopyalayın: hepsi hemen görünür, telefonda da.

Kaynak: W3C – CSS Color Module Level 4: Named Colors (148 renk adı ve değerleri). Güncelleme: .

148 renkten 148 tanesi

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

Adların ve değerlerin kaynağı: CSS Color Module Level 4 (W3C). Renk aileleri göz atmaya yardımcı bir düzenlemedir, belirtimin parçası değildir.

Araçlarım

Sonuç

Nasıl hesaplanır?

Kısaca: HTML ve CSS’te renkler yalnızca kodla değil, İngilizce adlarla da verilebilir; örneğin #FF6347 yerine color: tomato. Böyle 148 ad vardır. Yukarıdaki tablo her birini HEX kodu, RGB bileşenleri ve HSL değeriyle gösterir.

Tablo nasıl kullanılır

  1. Arama kutusu: bir adın ya da HEX kodunun bir parçasını yazın (“blue”, “green”, “6495ED”).
  2. Yalnızca kırmızıları, yeşilleri vb. görmek için bir renk ailesi seçin.
  3. Ada, tona (gökkuşağı sırası, griler sonda) veya açıklığa göre sıralayın.
  4. HEX, Ad veya RGB’ye tıklayın: değer panonuza kopyalanır.

HEX, RGB ve HSL

Yazı kontrastı

Her rengin altında, üzerinde siyah ya da beyaz yazının hangisinin daha okunaklı olduğu, WCAG 2.2’ye göre kontrast oranıyla birlikte görünür. Normal yazı için WCAG en az 4,5 : 1, büyük yazı için 3 : 1 ister. aqua ile cyan ya da gray ile grey gibi eşdeğer adlar aynı değerde takma adlardır.

Sıkça sorulan sorular

HTML ve CSS’te kaç renk adı var?

148 adlandırılmış renk vardır; aqua ile cyan, magenta ile fuchsia, gray ile grey gibi takma adlar da bunun içindedir. Ayrıca transparent ve currentcolor anahtar sözcükleri bulunur.

CSS’te renk adını nasıl yazarım?

Doğrudan değer olarak, örneğin color: tomato; ya da background: cornflowerblue;. Adlar İngilizcedir ve büyük/küçük harf ayrımı yapmaz.

Kırmızı, yeşil ve mavinin HEX kodları nedir?

red #FF0000, lime (saf yeşil) #00FF00 ve blue #0000FF’dir. CSS’te green sözcüğü daha koyu bir yeşili, #008000’i belirtir.

Bir HEX koduna ait renk adını nasıl bulurum?

Kodu arama kutusuna # ile ya da # olmadan yazın. Tam bu değere sahip bir ad varsa listede görünür.

Bir renge hangi yazı rengi yakışır?

Rengin altındaki bilgi, siyahın mı beyazın mı daha fazla kontrast verdiğini söyler. Okunaklı yazı için oran en az 4,5 : 1 olmalıdır.

Kaynaklar ve yasal dayanak

Güncelleme: · Editoryal ilkeler

Benzer araçlar