Kleurcodes in CSS worden gebruikt om kleuren te specificeren. Meestal worden kleurcodes of kleurwaarden gebruikt om de kleur in te stellen voor de voorgrondkleur van een element (bijvoorbeeld tekstkleur, linkkleur) of de achtergrondkleur van een element (achtergrondkleur, blokkleur). Ze kunnen ook worden gebruikt om de kleur van een knop, rand, markering, hover en andere decoratieve effecten te wijzigen.
U kunt uw kleurwaarden in verschillende formaten opgeven. In de volgende tabel staan alle mogelijke formaten vermeld:
De vermelde formaten worden hieronder in meer detail beschreven.
CSS-kleuren - Hex-codes
Hexadecimale kleurcode is een zescijferige weergave van kleur. De eerste twee cijfers (RR) vertegenwoordigen de rode waarde, de volgende twee vertegenwoordigen de groene waarde (GG) en de laatste twee vertegenwoordigen de blauwe waarde (BB).
CSS-kleuren - korte hexadecimale codes
Korte hex-kleurcode is een kortere vorm van notatie van zes tekens. In dit formaat wordt elk cijfer herhaald om een equivalente kleurwaarde van zes cijfers te produceren. Bijvoorbeeld: #0F0 wordt #00FF00.
De hexadecimale waarde kan worden overgenomen uit elke grafische software zoals Adobe Photoshop, Core Draw, enz.
Elke hexadecimale kleurcode in CSS wordt voorafgegaan door een hekje "#". Hieronder vindt u voorbeelden van het gebruik van hexadecimale notaties.
CSS-kleuren - RGB-waarden
RGB-waarde is een kleurcode die wordt ingesteld met behulp van de eigenschap rgb(). Deze eigenschap heeft drie waarden: één voor rood, groen en blauw. De waarde kan een geheel getal zijn, van 0 tot 255, of een percentage.
Opmerking: Niet alle browsers ondersteunen de eigenschap rgb() color, dus het wordt niet aanbevolen om deze te gebruiken.
Hieronder ziet u een voorbeeld waarin meerdere kleuren worden weergegeven met behulp van RGB-waarden.
Kleurcodegenerator
Met onze service kunt u miljoenen kleurcodes maken.
Browserveilige kleuren
Hieronder vindt u een tabel met 216 kleuren die het veiligst en computeronafhankelijk zijn. Deze kleuren in CSS variëren van 000000 tot FFFFFF hexadecimale code. Ze zijn veilig in gebruik omdat ze ervoor zorgen dat alle computers kleuren correct weergeven wanneer ze met het 256 kleurenpalet werken.
Tabel met "veilige" kleuren in CSS | |||||
#000000 | #000033 | #000066 | #000099 | #0000CC | #0000FF |
#003300 | #003333 | #003366 | #003399 | #0033CC | #0033FF |
#006600 | #006633 | #006666 | #006699 | #0066CC | #0066FF |
#009900 | #009933 | #009966 | #009999 | #0099CC | #0099FF |
#00CC00 | #00CC33 | #00CC66 | #00CC99 | #00CCCC | #00CCFF |
#00FF00 | #00FF33 | #00FF66 | #00FF99 | #00FFCC | #00FFFF |
#330000 | #330033 | #330066 | #330099 | #3300CC | #3300FF |
#333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF |
#336600 | #336633 | #336666 | #336699 | #3366CC | #3366FF |
#339900 | #339933 | #339966 | #339999 | #3399CC | #3399FF |
#33CC00 | #33CC33 | #33CC66 | #33CC99 | #33CCCC | #33CCFF |
#33FF00 | #33FF33 | #33FF66 | #33FF99 | #33FFCC | #33FFFF |
#660000 | #660033 | #660066 | #660099 | #6600CC | #6600FF |
#663300 | #663333 | #663366 | #663399 | #6633CC | #6633FF |
#666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF |
#669900 | #669933 | #669966 | #669999 | #6699CC | #6699FF |
#66CC00 | #66CC33 | #66CC66 | #66CC99 | #66CCCC | #66CCFF |
#66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF |
#990000 | #990033 | #990066 | #990099 | #9900CC | #9900FF |
#993300 | #993333 | #993366 | #993399 | #9933CC | #9933FF |
#996600 | #996633 | #996666 | #996699 | #9966CC | #9966FF |
#999900 | #999933 | #999966 | #999999 | #9999CC | #9999FF |
#99CC00 | #99CC33 | #99CC66 | #99CC99 | #99CCCC | #99CCFF |
#99FF00 | #99FF33 | #99FF66 | #99FF99 | #99FFCC | #99FFFF |
#CC0000 | #CC0033 | #CC0066 | #CC0099 | #CC00CC | #CC00FF |
#CC3300 | #CC3333 | #CC3366 | #CC3399 | #CC33CC | #CC33FF |
#CC6600 | #CC6633 | #CC6666 | #CC6699 | #CC66CC | #CC66FF |
#CC9900 | #CC9933 | #CC9966 | #CC9999 | #CC99CC | #CC99FF |
#CCCC00 | #CCCC33 | #CCCC66 | #CCCC99 | #CCCCCC | #CCCCFF |
#CCFF00 | #CCFF33 | #CCFF66 | #CCFF99 | #CCFFCC | #CCFFFF |
#FF0000 | #FF0033 | #FF0066 | #FF0099 | #FF00CC | #FF00FF |
#FF3300 | #FF3333 | #FF3366 | #FF3399 | #FF33CC | #FF33FF |
#FF6600 | #FF6633 | #FF6666 | #FF6699 | #FF66CC | #FF66FF |
#FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC | #FF99FF |
#FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF |
#FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF |
Minecraft-codes kleuren of Minecraft codes opmaak, zodat elke speler bloemen kan toevoegen en tekst op elke mogelijke manier rechtstreeks in Minecraft kan opmaken. Kleurcodes van &0-9 - tot &a-f. Voeg ze toe vóór uw tekst. Berichten van spelers kunnen kleurcodes bevatten waarmee je kleur aan je zinnen kunt toevoegen.
Kleuren en opmaakcodes
Het ampersand-teken (&), gevolgd door een hexadecimaal getal in berichten, geeft aan dat de client van kleur moet wisselen bij het weergeven van tekst. Bovendien kan tekst worden opgemaakt met een & gevolgd door een letter. U kunt verschillende kleuren toevoegen aan boeken, opdrachtblokken, servernaam, serverbeschrijving (motd), wereldnamen, tekens en zelfs spelersnamen.
Het is heel eenvoudig om uw tekst in configuraties of in het spel op te maken met behulp van de onderstaande kleurenkaart. &r wordt gebruikt om alle codes te resetten, d.w.z. &mAAA&rBBB wordt weergegeven als AAA BBB.
Voor uw gemak presenteren we een tabel met bestaande kleurcodes in Minecraft:
Code | Naam | Technische naam | Symbool kleur | Symbool schaduwkleur | ||||||
---|---|---|---|---|---|---|---|---|---|---|
R | G | B | Hex | R | G | B | Hex | |||
&0 | Zwart | zwart | 0 | 0 | 0 | 000000 | 0 | 0 | 0 | 000000 |
&1 | Donkerblauw | donkerblauw | 0 | 0 | 170 | 0000AA | 0 | 0 | 42 | 00002A |
&2 | Donkergroen | donkergroen | 0 | 170 | 0 | 00AA00 | 0 | 42 | 0 | 002A00 |
&3 | Donker blauwgroen | donker_aqua | 0 | 170 | 170 | 00AAA | 0 | 42 | 42 | 002A2A |
&4 | Donkerrood | donkerrood | 170 | 0 | 0 | AA0000 | 42 | 0 | 0 | 2A0000 |
&5 | Donkerpaars | donkerpaars | 170 | 0 | 170 | AA00AA | 42 | 0 | 42 | 2A002A |
&6 | Goud | goud | 255 | 170 | 0 | FFAA00 | 42 | 42 | 0 | 2A2A00 |
&7 | Grijs | grijs | 170 | 170 | 170 | AAAAAA | 42 | 42 | 42 | 2A2A2A |
&8 | Donker grijs | donkergrijs | 85 | 85 | 85 | 555555 | 21 | 21 | 21 | 151515 |
&9 | Blauw | blauw | 85 | 85 | 255 | 5555FF | 21 | 21 | 63 | 15153F |
&A | Groente | groente | 85 | 255 | 85 | 55FF55 | 21 | 63 | 21 | 153F15 |
&B | Blauw groen | aquatisch | 85 | 255 | 255 | 55FFFF | 21 | 63 | 63 | 153F3F |
&C | Rood | rood | 255 | 85 | 85 | FF5555 | 63 | 21 | 21 | 3F1515 |
&D | Lichtpaars | lichtpaars | 255 | 85 | 255 | FF55FF | 63 | 21 | 63 | 3F153F |
&e | Geel | geel | 255 | 255 | 85 | FFFF55 | 63 | 63 | 21 | 3F3F15 |
&F | Wit | wit | 255 | 255 | 255 | FFFFFF | 63 | 63 | 63 | 3F3F3F |
Soms is het nodig onderstrepen, doorhalen, hoogtepunt welke tekst dan ook. Dit gebeurt met behulp van tekstopmaak. Het wordt op precies dezelfde manier gebruikt als kleuren (we plaatsen het vóór de tekst code, bijvoorbeeld &lMinecraft = Minecraft.
Voor uw gemak vindt u hieronder een tabel met opmaakcodes:
Code | Naam |
---|---|
&k | Magische tekst |
&l | Miniatuur |
&M | Doorgestreepte tekst |
&N | Onderstreepte tekst |
&O | Cursieve tekst |
&R | Tekst zonder opmaak |
Hexadecimale getallen worden gebruikt om kleuren te specificeren. Het hexadecimale systeem is, in tegenstelling tot het decimale systeem, gebaseerd, zoals de naam al doet vermoeden, op het getal 16. De getallen zijn als volgt: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Cijfers van 10 tot 15 worden vervangen door Latijnse letters. Getallen groter dan 15 in het hexadecimale systeem worden gevormd door twee getallen tot één te combineren. Het getal 255 in decimalen komt bijvoorbeeld overeen met het getal FF in hexadecimaal. Om verwarring bij het bepalen van het getallenstelsel te voorkomen, wordt vóór het hexadecimale getal een hash-symbool # geplaatst, bijvoorbeeld #666999. Elk van de drie kleuren – rood, groen en blauw – kan waarden aannemen van 00 tot FF. Het kleursymbool is dus verdeeld in drie componenten #rrggbb, waarbij de eerste twee symbolen de rode component van de kleur aangeven, de middelste twee - groen en de laatste twee - blauw. Het is toegestaan om de afgekorte vorm #rgb te gebruiken, waarbij elk teken verdubbeld moet worden. De invoer #fe0 moet dus worden beschouwd als #ffee00.
Bij naam
Internet Explorer | Chroom | Opera | Safari | Firefox | Android | iOS |
4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Browsers ondersteunen sommige kleuren op basis van hun naam. In tafel 1 toont de namen, hexadecimale code, RGB, HSL-waarden en beschrijving.
Naam | Kleur | Code | RGB | HSL | Beschrijving |
---|---|---|---|---|---|
wit | #ffffff of #fff | rgb(255.255.255) | hsl(0,0%,100%) | Wit | |
zilver | #c0c0c0 | rgb(192.192.192) | hsl(0,0%,75%) | Grijs | |
grijs | #808080 | rgb(128.128.128) | hsl(0,0%,50%) | Donker grijs | |
zwart | #000000 of #000 | rgb(0,0,0) | hsl(0,0%,0%) | Zwart | |
kastanjebruin | #800000 | rgb(128,0,0) | hsl(0,100%,25%) | Donkerrood | |
rood | #ff0000 of #f00 | rgb(255,0,0) | hsl(0,100%,50%) | Rood | |
oranje | #ffa500 | rgb(255.165,0) | hsl(38,8,100%,50%) | Oranje | |
geel | #ffff00 of #ff0 | rgb(255.255,0) | hsl(60,100%,50%) | Geel | |
olijf | #808000 | rgb(128.128,0) | hsl(60,100%,25%) | Olijf | |
limoen | #00ff00 of #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | Licht groen | |
groente | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | Groente | |
aquatisch | #00ffff of #0ff | rgb(0,255,255) | hsl(180,100%,50%) | Blauw | |
blauw | #0000ff of #00f | rgb(0,0,255) | hsl(240,100%,50%) | Blauw | |
marine | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | Donkerblauw | |
wintertaling | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | Blauw groen | |
fuchsia | #ff00ff of #f0f | rgb(255,0,255) | hsl(300,100%,50%) | Roze | |
paars | #800080 | rgb(128,0,128) | hsl(300,100%,25%) | paars |
RGB gebruiken
Internet Explorer | Chroom | Opera | Safari | Firefox | Android | iOS |
5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
U kunt de kleur definiëren met behulp van de rode, groene en blauwe waarden in decimale termen. Elk van de drie kleurcomponenten heeft een waarde van 0 tot 255. Het is ook toegestaan om de kleur als een percentage op te geven, waarbij 100% overeenkomt met het getal 255. Geef eerst het rgb-trefwoord op en specificeer vervolgens de kleurcomponenten tussen haakjes. , gescheiden door komma's, bijvoorbeeld rgb(255, 128, 128) of rgb(100%, 50%, 50%).
RGBA
Internet Explorer | Chroom | Opera | Safari | Firefox | Android | iOS |
9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Het RGBA-formaat is qua syntaxis vergelijkbaar met RGB, maar bevat een alfakanaal dat de transparantie van het element specificeert. Een waarde van 0 is volledig transparant, 1 is ondoorzichtig en een tussenliggende waarde zoals 0,5 is semi-transparant.
RGBA is toegevoegd aan CSS3, dus CSS-code moet worden gevalideerd tegen deze versie. Opgemerkt moet worden dat de CSS3-standaard nog in ontwikkeling is en dat sommige functies kunnen veranderen. Een kleur in RGB-indeling die aan de eigenschap background-color is toegevoegd, wordt bijvoorbeeld gevalideerd, maar een kleur die aan de eigenschap background wordt toegevoegd, is niet langer geldig. Tegelijkertijd begrijpen browsers de kleur voor beide eigenschappen volkomen correct.
HSL
Internet Explorer | Chroom | Opera | Safari | Firefox | Android | iOS |
9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
De naam van het HSL-formaat is afgeleid van de combinatie van de eerste letters Hue (tint), Saturate (verzadiging) en Lightness (lichtheid). Tint is de kleurwaarde op het kleurenwiel (Fig. 1) en wordt weergegeven in graden. 0° komt overeen met rood, 120° met groen en 240° met blauw. De tintwaarde kan variëren van 0 tot 359.
Rijst. 1. Kleurenwiel
Verzadiging is de intensiteit van een kleur en wordt gemeten als een percentage van 0% tot 100%. Een waarde van 0% duidt op geen kleur en een grijstint, 100% is de maximale waarde voor verzadiging.
Lichtheid geeft aan hoe helder de kleur is en wordt gespecificeerd als een percentage van 0% tot 100%. Lage waarden maken de kleur donkerder, en hoge waarden maken deze lichter; extreme waarden van 0% en 100% komen overeen met zwart en wit.
HSLA
Internet Explorer | Chroom | Opera | Safari | Firefox | Android | iOS |
9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Het HSLA-formaat is qua syntaxis vergelijkbaar met HSL, maar bevat een alfakanaal om de transparantie van het element te specificeren. Een waarde van 0 is volledig transparant, 1 is ondoorzichtig en een tussenliggende waarde zoals 0,5 is semi-transparant.
RGBA-, HSL- en HSLA-kleurwaarden zijn toegevoegd aan CSS3, dus controleer uw code op versiegeldigheid wanneer u deze formaten gebruikt.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Waarschuwing
Alle leeuwenvangmethoden die op de site worden vermeld, zijn theoretisch en gebaseerd op computationele methoden. De auteurs garanderen uw veiligheid bij het gebruik ervan niet en wijzen elke verantwoordelijkheid voor de resultaten af. Vergeet niet dat een leeuw een roofdier en een gevaarlijk dier is!
Het resultaat van dit voorbeeld wordt getoond in Fig. 2.
Rijst. 2. Kleuren op de webpagina
In HTML kan kleur op drie manieren worden opgegeven:
Een kleur in HTML instellen op basis van de naam
Sommige kleuren kunnen worden gespecificeerd met hun naam, waarbij de kleurnaam in het Engels als waarde wordt gebruikt. De meest voorkomende trefwoorden: zwart, wit, rood, groen, blauw, etc.:
Tekstkleur – rood
De meest populaire kleuren van de World Wide Web Consortium (W3C) standaard:
Kleur | Naam | Kleur | Naam | Kleur | Naam | Kleur | Naam |
---|---|---|---|---|---|---|---|
Zwart | Grijs | Zilver | Wit | ||||
Geel | Limoen | Aqua | Fuchsia | ||||
Rood | Groente | Blauw | Paars | ||||
Kastanjebruin | Olijf | Marine | Wintertaling |
Voorbeeld van het gebruik van verschillende kleurnamen:
Voorbeeld: een kleur opgeven op basis van de naam
- Probeer het zelf "
Koptekst op rode achtergrond
Koptekst op oranje achtergrond
Rubriek op kalkachtergrond
Witte tekst op blauwe achtergrond
Koptekst op rode achtergrond
Koptekst op oranje achtergrond
Rubriek op kalkachtergrond
Witte tekst op blauwe achtergrond
Kleur opgeven met RGB
Bij de weergave van verschillende kleuren op een monitor wordt het RGB-palet als basis gebruikt. Elke kleur wordt verkregen door drie basiskleuren te mengen: R-rood, G-groen, B-blauw. De helderheid van elke kleur wordt gegeven door één byte en kan daarom waarden aannemen van 0 tot 255. RGB(255,0,0) wordt bijvoorbeeld weergegeven als rood omdat rood is ingesteld op de hoogste waarde (255) en de rest staan op 0. Je kunt de kleur ook als percentage instellen. Elke parameter geeft het helderheidsniveau van de overeenkomstige kleur aan. Bijvoorbeeld: de waarden rgb(127, 255, 127) en rgb(50%, 100%, 50%) zullen dezelfde middengroene kleur instellen:
Voorbeeld: kleur opgeven met RGB
- Probeer het zelf "
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
Kleur instellen op hexadecimale waarde
Waarden R G B kan ook worden opgegeven met behulp van hexadecimale (HEX) kleurwaarden in de vorm: #RRGGBB waarbij RR (rood), GG (groen) en BB (blauw) hexadecimale waarden zijn van 00 tot FF (hetzelfde als decimaal 0-255 ). Het hexadecimale systeem is, in tegenstelling tot het decimale systeem, gebaseerd, zoals de naam al doet vermoeden, op het getal 16. Het hexadecimale systeem gebruikt de volgende tekens: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Hier worden de cijfers van 10 tot 15 vervangen door Latijnse letters. Getallen groter dan 15 in het hexadecimale systeem worden weergegeven door twee tekens te combineren tot één waarde. Het hoogste getal 255 in decimalen komt bijvoorbeeld overeen met de hoogste FF-waarde in hexadecimaal. In tegenstelling tot het decimale systeem wordt een hexadecimaal getal voorafgegaan door een hash-symbool. # #FF0000 wordt bijvoorbeeld weergegeven als rood omdat rood is ingesteld op de hoogste waarde (FF) en de rest van de kleuren is ingesteld op de minimumwaarde (00). Borden na het hekje-symbool # U kunt zowel hoofdletters als kleine letters typen. Met het hexadecimale systeem kunt u de afgekorte vorm #rgb gebruiken, waarbij elk teken gelijk staat aan dubbel. De invoer #f7O moet dus worden beschouwd als #ff7700.
Voorbeeld: HEX-kleur
- Probeer het zelf "
rood: #FF0000
groen: #00FF00
blauw: #0000FF
rood: #FF0000
groen: #00FF00
blauw: #0000FF
rood+groen=geel: #FFFF00
rood+blauw=paars: #FF00FF
groen+blauw=cyaan: #00FFFF
Lijst met veelgebruikte kleuren (naam, HEX en RGB):
Engelse naam | Russische naam | Steekproef | HEX | RGB | ||
---|---|---|---|---|---|---|
Amarant | Amarant | #E52B50 | 229 | 43 | 80 | |
Amber | Amber | #FFBF00 | 255 | 191 | 0 | |
Aqua | Blauw groen | #00FFFF | 0 | 255 | 255 | |
Azuur | Azuur | #007FFF | 0 | 127 | 255 | |
Zwart | Zwart | #000000 | 0 | 0 | 0 | |
Blauw | Blauw | #0000FF | 0 | 0 | 255 | |
Bondi Blauw | Bondi-strandwater | #0095B6 | 0 | 149 | 182 | |
Messing | Messing | #B5A642 | 181 | 166 | 66 | |
Bruin | Bruin | #964B00 | 150 | 75 | 0 | |
Ceruleaans | Azuur | #007BA7 | 0 | 123 | 167 | |
Donker lentegroen | Donker lentegroen | #177245 | 23 | 114 | 69 | |
Smaragd | Smaragd | #50C878 | 80 | 200 | 120 | |
Aubergine | Aubergine | #990066 | 153 | 0 | 102 | |
Fuchsia | Fuchsia | #FF00FF | 255 | 0 | 255 | |
Goud | Goud | #FFD700 | 250 | 215 | 0 | |
Grijs | Grijs | #808080 | 128 | 128 | 128 | |
Groente | Groente | #00FF00 | 0 | 255 | 0 | |
Indigo | Indigo | #4B0082 | 75 | 0 | 130 | |
Jade | Jade | #00A86B | 0 | 168 | 107 | |
Limoen | Limoen | #CCFF00 | 204 | 255 | 0 | |
Malachiet | Malachiet | #0BDA51 | 11 | 218 | 81 | |
Marine | Donkerblauw | #000080 | 0 | 0 | 128 | |
Oker | Oker | #CC7722 | 204 | 119 | 34 | |
Olijf | Olijf | #808000 | 128 | 128 | 0 | |
Oranje | Oranje | #FFA500 | 255 | 165 | 0 | |
Perzik | Perzik | #FFE5B4 | 255 | 229 | 180 | |
Pompoen | Pompoen | #FF7518 | 255 | 117 | 24 | |
Paars | paars | #800080 | 128 | 0 | 128 | |
Rood | Rood | #FF0000 | 255 | 0 | 0 | |
Saffraan | Saffraan | #F4C430 | 244 | 196 | 48 | |
Zee groen | Groene zee | #2E8B57 | 46 | 139 | 87 | |
Moeras groen | Bolotny | #ACB78E | 172 | 183 | 142 | |
Wintertaling | Blauw groen | #008080 | 0 | 128 | 128 | |
Ultramarijn | Ultramarijn | #120A8F | 18 | 10 | 143 | |
paars | paars | #8B00FF | 139 | 0 | 255 | |
Geel | Geel | #FFFF00 | 255 | 255 | 0 |
Kleurcodes (achtergrond) op basis van verzadiging en tint.