CSS
kleuren

Syntaxis

• kleur: #rgb
• kleur: #rrggbb
• kleur: rgb [a] (<red>, <green>, <blue> [, <alpha>])
• kleur: hsl [a] (<hue>, <saturation%>, <lightness%> [, <alpha>])
• kleur: colorkeyword / * groen, blauw, geel, oranje, rood, ..etc * /

Kleur zoekwoorden

De meeste browsers ondersteunen het gebruik van kleurzoekwoorden om een kleur op te geven. Gebruik bijvoorbeeld het blue sleutelwoord om de color van een element in te stellen op blauw:

.some-class {
    color: blue;
}

CSS-trefwoorden zijn niet hoofdlettergevoelig - blue , Blue en BLUE resulteren allemaal in #0000FF .

Kleur zoekwoorden

Kleurnaam	Hex waarde	RGB waarden	Kleur
AliceBlue	# F0F8FF	rgb (240.248.255)
Antiek wit	# FAEBD7	rgb (250.235.215)
Aqua	# 00FFFF	RGB (0255255)
Aquamarijn	# 7FFFD4	rgb (127.255.212)
azuur	# F0FFFF	rgb (240.255.255)
Beige	# F5F5DC	rgb (245.245.220)
biscuit	# FFE4C4	rgb (255.228.196)
Zwart	# 000000	RGB (0,0,0)
BlanchedAlmond	#FFEBCD	rgb (255.235.205)
Blauw	# 0000FF	RGB (0,0,255)
Blauw Violet	# 8A2BE2	RGB (138,43,226)
Bruin	# A52A2A	RGB (165,42,42)
Knoestig hout	# deb887	rgb (222.184.135)
CadetBlue	# 5F9EA0	RGB (95158160)
Chartreuse	# 7FFF00	RGB (127,255,0)
Chocola	# D2691E	RGB (210,105,30)
Koraal	# FF7F50	RGB (255,127,80)
Korenblauw	# 6495ED	rgb (100.149.237)
Cornsilk	# FFF8DC	rgb (255.248.220)
karmozijn	# DC143C	RGB (220,20,60)
Cyan	# 00FFFF	RGB (0255255)
Donkerblauw	# 00008B	RGB (0,0,139)
DarkCyan	# 008B8B	RGB (0139139)
DarkGoldenRod	# B8860B	RGB (184,134,11)
Donkergrijs	# A9A9A9	rgb (169.169.169)
Donker grijs	# A9A9A9	rgb (169.169.169)
Donkergroen	# 006400	rgb (0,100,0)
DarkKhaki	# BDB76B	rgb (189.183.107)
DarkMagenta	# 8B008B	RGB (139,0,139)
DarkOliveGreen	# 556B2F	RGB (85,107,47)
Donker oranje	# FF8C00	RGB (255,140,0)
DarkOrchid	# 9932CC	RGB (153,50,204)
Donkerrood	# 8B0000	RGB (139,0,0)
DarkSalmon	# E9967A	rgb (233.150.122)
DarkSeaGreen	# 8FBC8F	rgb (143.188.143)
DarkSlateBlue	# 483D8B	RGB (72,61,139)
DarkSlateGray	# 2F4F4F	RGB (47,79,79)
DarkSlateGrey	# 2F4F4F	RGB (47,79,79)
DarkTurquoise	# 00CED1	RGB (0206209)
DarkViolet	# 9400D3	RGB (148,0,211)
Donker roze	# FF1493	RGB (255,20,147)
DeepSkyBlue	# 00BFFF	RGB (0191255)
DimGray	# 696969	rgb (105.105.105)
DimGrey	# 696969	rgb (105.105.105)
DodgerBlue	# 1E90FF	RGB (30144255)
Firebrick	# B22222	RGB (178,34,34)
FloralWhite	# FFFAF0	rgb (255.250.240)
Bos Groen	# 228B22	RGB (34,139,34)
fuchsia	# FF00FF	RGB (255.0.255)
Gainsboro	#DCDCDC	rgb (220.220.220)
GhostWhite	# F8F8FF	rgb (248.248.255)
Goud	# FFD700	RGB (255,215,0)
GOLDENROD	# DAA520	RGB (218,165,32)
Grijs	# 808080	rgb (128.128.128)
Grijs	# 808080	rgb (128.128.128)
Groen	# 008000	rgb (0,128,0)
Groen Geel	# ADFF2F	RGB (173,255,47)
HoneyDew	# F0FFF0	rgb (240.255.240)
Felroze	# FF69B4	rgb (255.105.180)
IndianRed	# CD5C5C	RGB (205,92,92)
Indigo	# 4B0082	RGB (75,0,130)
ivoor	# fffff0	rgb (255.255.240)
Khaki	# F0E68C	rgb (240.230.140)
Lavendel	# E6E6FA	rgb (230.230.250)
LavenderBlush	# FFF0F5	rgb (255.240.245)
lawngreen	# 7CFC00	RGB (124,252,0)
LemonChiffon	#FFFACD	rgb (255.250.205)
Lichtblauw	# ADD8E6	rgb (173.216.230)
LightCoral	# F08080	rgb (240.128.128)
Lichtcyaan	# E0FFFF	rgb (224.255.255)
LightGoldenRodYellow	# FAFAD2	rgb (250.250.210)
Lichtgrijs	# D3D3D3	rgb (211.211.211)
Lichtgrijs	# D3D3D3	rgb (211.211.211)
Licht groen	# 90EE90	rgb (144.238.144)
Lichtroze	# FFB6C1	rgb (255.182.193)
LightSalmon	# FFA07A	rgb (255.160.122)
LightSeaGreen	# 20B2AA	RGB (32178170)
LightSkyBlue	# 87CEFA	rgb (135.206.250)
LightSlateGray	# 778899	rgb (119.136.153)
LightSlateGrey	# 778899	rgb (119.136.153)
LightSteelBlue	# B0C4DE	rgb (176.196.222)
Licht geel	# FFFFE0	rgb (255.255.224)
Limoen	# 00FF00	rgb (0,255,0)
Limoen groen	# 32CD32	RGB (50,205,50)
Linnen	# FAF0E6	rgb (250.240.230)
Magenta	# FF00FF	RGB (255.0.255)
Kastanjebruin	# 800000	RGB (128,0,0)
MediumAquaMarine	# 66CDAA	rgb (102.205.170)
mediumblue	# 0000CD	RGB (0,0,205)
MediumOrchid	# BA55D3	RGB (186,85,211)
MediumPurple	# 9370DB	rgb (147.112.219)
MediumSeaGreen	# 3CB371	RGB (60179113)
MediumSlateBlue	# 7B68EE	rgb (123.104.238)
MediumSpringGreen	# 00FA9A	RGB (0250154)
MediumTurquoise	# 48D1CC	RGB (72209204)
MediumVioletRed	# C71585	RGB (199,21,133)
Middernacht blauw	# 191970	RGB (25,25,112)
MintCream	# F5FFFA	rgb (245.255.250)
MistyRose	# FFE4E1	rgb (255.228.225)
Mocassin	# FFE4B5	rgb (255.228.181)
NavajoWhite	#FFDEAD	rgb (255.222.173)
Marine	# 000080	RGB (0,0,128)
OldLace	# FDF5E6	rgb (253.245.230)
Olijf	# 808000	RGB (128,128,0)
Olijf olie	# 6B8E23	RGB (107,142,35)
Oranje	# FFA500	RGB (255,165,0)
Oranje rood	# FF4500	RGB (255,69,0)
Orchidee	# DA70D6	rgb (218.112.214)
PaleGoldenRod	# EEE8AA	rgb (238.232.170)
Lichtgroen	# 98FB98	rgb (152.251.152)
PaleTurquoise	#AFEEEE	rgb (175.238.238)
PaleVioletRed	# DB7093	rgb (219.112.147)
PapayaWhip	# FFEFD5	rgb (255.239.213)
Peachpuff	# FFDAB9	rgb (255.218.185)
Peru	# CD853F	RGB (205,133,63)
Roze	# FFC0CB	rgb (255.192.203)
Pruim	# DDA0DD	rgb (221.160.221)
Powderblue	# B0E0E6	rgb (176.224.230)
Purper	# 800080	RGB (128,0,128)
RebeccaPurple	# 663399	RGB (102,51,153)
Rood	# FF0000	RGB (255,0,0)
RosyBrown	# BC8F8F	rgb (188.143.143)
Koningsblauw	# 4169E1	RGB (65105225)
Zadelbruin	# 8B4513	RGB (139,69,19)
Zalm	# FA8072	rgb (250.128.114)
Sandybrown	# F4A460	RGB (244,164,96)
Zee groen	# 2E8B57	RGB (46,139,87)
Zeeschelp	# FFF5EE	rgb (255.245.238)
Sienna	# A0522D	RGB (160,82,45)
Zilver	# C0C0C0	rgb (192.192.192)
Hemelsblauw	# 87CEEB	rgb (135.206.235)
SlateBlue	# 6A5ACD	RGB (106,90,205)
SlateGray	# 708090	rgb (112.128.144)
slategrey	# 708090	rgb (112.128.144)
Sneeuw	#FFFAFA	rgb (255.250.250)
Lente groen	# 00FF7F	RGB (0255127)
Staal blauw	# 4682B4	RGB (70130180)
Bruinen	# D2B48C	rgb (210.180.140)
taling	# 008080	RGB (0128128)
Distel	# D8BFD8	rgb (216.191.216)
Tomaat	# FF6347	RGB (255,99,71)
Turkoois	# 40E0D0	RGB (64224208)
paars	# EE82EE	RGB (238130238)
Tarwe	# F5DEB3	rgb (245.222.179)
Wit	#FFFFFF	rgb (255,255,255)
Witte rook	# f5f5f5	rgb (245.245.245)
Geel	# FFFF00	RGB (255,255,0)
Geel groen	# 9ACD32	RGB (154,205,50)

Naast de genoemde kleuren is er ook het sleutelwoord transparent , dat een volledig transparant zwart vertegenwoordigt: rgba(0,0,0,0)

Hexadecimale waarde

Achtergrond

CSS-kleuren kunnen ook worden weergegeven als een hex-triplet, waarbij de leden de rode, groene en blauwe componenten van een kleur voorstellen. Elk van deze waarden vertegenwoordigt een getal in het bereik van 00 tot FF of 0 tot 255 in decimale notatie. Hoofdletters en / of kleine hexidecimale waarden kunnen worden gebruikt (bijv. #3fc = #3FC = #33ffCC ). De browser interpreteert #369 als #336699 . Als dat niet is wat je bedoelde maar eerder wilde #306090 , moet je dat expliciet specificeren.

Het totale aantal kleuren dat kan worden weergegeven met hex-notatie is 256 ^ 3 of 16.777.216.

Syntaxis

color: #rrggbb;
color: #rgb

.some-class {
    /* This is equivalent to using the color keyword 'blue' */
    color: #0000FF;
}

.also-blue {
    /* If you want to specify each range value with a single number, you can!
       This is equivalent to '#0000FF' (and 'blue') */
    color: #00F;
}

Hexadecimale notatie wordt gebruikt om kleurwaarden op te geven in het RGB-kleurformaat, volgens de 'Numerieke kleurwaarden' van de W3C .

Er zijn op internet veel tools beschikbaar om hexadecimale (of eenvoudigweg hex) kleurwaarden op te zoeken.

Zoek naar " hex-kleurenpalet " of " hex-kleurenkiezer " met uw favoriete webbrowser om een heleboel opties te vinden!

Hex-waarden beginnen altijd met een hekje (#), zijn maximaal zes "cijfers" lang en zijn niet hoofdlettergevoelig: dat wil zeggen, ze geven niet om hoofdletters. #FFC125 en #ffc125 hebben dezelfde kleur.

rgb () Notatie

RGB is een additief kleurenmodel dat kleuren weergeeft als mengsels van rood, groen en blauw licht. In wezen is de RGB-weergave het decimale equivalent van de hexadecimale notatie. In Hexadecimaal varieert elk getal van 00-FF, wat overeenkomt met 0-255 in decimaal en 0% -100% in percentages.

.some-class {
    /* Scalar RGB, equivalent to 'blue'*/
    color: rgb(0, 0, 255);
}

.also-blue {
    /* Percentile RGB values*/
    color: rgb(0%, 0%, 100%);
}

Syntaxis

rgb(<red>, <green>, <blue>)

hsl () Notatie

HSL staat voor tint ("welke kleur"), verzadiging ("hoeveel kleur") en lichtheid ("hoeveel wit").

Tint wordt weergegeven als een hoek van 0 ° tot 360 ° (zonder eenheden), terwijl verzadiging en lichtheid worden weergegeven als percentages.

p {
    color: hsl(240, 100%, 50%); /* Blue */
}

Syntaxis

color: hsl(<hue>, <saturation>%, <lightness>%);

Notes

• Een verzadiging van 0% produceert altijd een grijswaardenkleur; het veranderen van de tint heeft geen effect.

• Een lichtheid van 0% produceert altijd zwart en 100% produceert altijd wit; het veranderen van de tint of verzadiging heeft geen effect.

currentcolor

currentColor retourneert de berekende kleurwaarde van het huidige element.

Gebruik in hetzelfde element

Hier evalueert currentColor naar rood omdat de eigenschap color op red is ingesteld:

div {
   color: red;     
   border: 5px solid currentColor;
   box-shadow: 0 0 5px currentColor;
}

In dit geval is het meest waarschijnlijk overbodig om currentColor op te geven voor de grens, omdat het weglaten identieke resultaten zou moeten opleveren. Gebruik currentColor alleen binnen de border-eigenschap binnen hetzelfde element als het anders zou worden overschreven vanwege een specifiekere selector.

Omdat dit de berekende kleur is, is de rand in het volgende voorbeeld groen omdat de tweede regel de eerste overschrijft:

div {
   color: blue;
   border: 3px solid currentColor; 
   color: green;
}

Overgenomen van bovenliggend element

De kleur van de ouder is geërfd, hier evalueert currentColor naar 'blauw', waardoor de randkleur van het onderliggende element blauw wordt.

.parent-class {
    color: blue;
}

.parent-class .child-class {
    border-color: currentColor;
}

currentColor kan ook worden gebruikt door andere regels die normaal niet zouden erven van de eigenschap color, zoals achtergrondkleur. In het onderstaande voorbeeld worden de kinderen getoond met de kleurset in het bovenliggende element als achtergrond:

.parent-class {
    color: blue;
}

.parent-class .child-class {
    background-color: currentColor;
}

Mogelijk resultaat:

rgba () Notatie

Gelijk aan de notatie rgb () , maar met een extra alfa-waarde (dekking).

.red {
    /* Opaque red */
    color: rgba(255, 0, 0, 1);
}

.red-50p {
    /* Half-translucent red. */
    color: rgba(255, 0, 0, .5);
}

Syntaxis

rgba(<red>, <green>, <blue>, <alpha>);

hsla () Notatie

Gelijk aan hsl () notatie , maar met een toegevoegde alfa (opaciteit) waarde.

hsla(240, 100%, 50%, 0)     /* transparent */
hsla(240, 100%, 50%, 0.5)   /* half-translucent blue */
hsla(240, 100%, 50%, 1)     /* fully opaque blue */

Syntaxis

hsla(<hue>, <saturation>%, <lightness>%, <alpha>);