NL

HTML kleuren

Dit overzicht van HTML kleuren toont alle 148 benoemde CSS-kleuren met naam, HEX-code en RGB- en HSL-waarde. Zoek op naam of code, filter op kleurfamilie, sorteer op naam, tint of helderheid en kopieer een waarde met één klik: alles is meteen zichtbaar, ook op je telefoon.

Bron: W3C – CSS Color Module Level 4: Named Colors (148 kleurnamen met waarden). Bijgewerkt: .

148 van 148 kleuren

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

Bron van de namen en waarden: CSS Color Module Level 4 (W3C). De kleurfamilies zijn een hulp bij het bladeren en geen onderdeel van de specificatie.

Mijn toolbox

Resultaat

Zo wordt het berekend

Kort gezegd: in HTML en CSS kun je kleuren niet alleen als code opgeven, maar ook met Engelse namen, bijvoorbeeld color: tomato in plaats van #FF6347. Er zijn 148 van zulke namen. De tabel hierboven toont elke naam met HEX-code, RGB-onderdelen en HSL-waarde.

Zo gebruik je de tabel

  1. Zoekveld: zoek op een deel van een naam of HEX-code (“blue”, “green”, “6495ED”).
  2. Kies een kleurfamilie om alleen rood, groen enzovoort te zien.
  3. Sorteer op naam, tint (regenboogvolgorde, grijs aan het eind) of helderheid.
  4. Klik op HEX, Naam of RGB: de waarde staat op je klembord.

HEX, RGB en HSL

Tekstcontrast

Onder elke kleur zie je of zwarte of witte tekst erop beter leesbaar is, met de contrastverhouding volgens WCAG 2.2. Voor normale tekst eist WCAG minstens 4,5 : 1, voor grote tekst 3 : 1. Gelijkwaardige namen zoals aqua en cyan of gray en grey zijn aliassen met dezelfde waarde.

Veelgestelde vragen

Hoeveel kleurnamen zijn er in HTML en CSS?

Er zijn 148 benoemde kleuren, inclusief aliassen zoals aqua en cyan, magenta en fuchsia, gray en grey. Daarbij komen de sleutelwoorden transparent en currentcolor.

Hoe schrijf ik een kleurnaam in CSS?

Direct als waarde, bijvoorbeeld color: tomato; of background: cornflowerblue;. De namen zijn Engels en hoofdletterongevoelig.

Wat zijn de HEX-codes van rood, groen en blauw?

red is #FF0000, lime (puur groen) is #00FF00 en blue is #0000FF. Het woord green staat in CSS voor een donkerder groen, #008000.

Hoe vind ik de kleurnaam bij een HEX-code?

Typ de code in het zoekveld, met of zonder #. Bestaat er een naam met precies die waarde, dan verschijnt die in de lijst.

Welke tekstkleur past op een kleur?

De aanduiding onder de kleur zegt of zwart of wit meer contrast geeft. Voor goed leesbare tekst moet de verhouding minstens 4,5 : 1 zijn.

Bronnen en wettelijke basis

Bijgewerkt op: · Redactioneel beleid

Vergelijkbare tools