CSS kleureigenschappen. kleurcodes

Een van de instrumenten om de webpagina stijlen te veranderen - CSS kleur. Er zijn verschillende manieren om deze instelling te wijzigen. Elk heeft zowel voor- als nadelen.

naam

De kleur eigenschap bepaalt de kleur van het item. 145 tinten van titels opgenomen in de CSS. Onder hen zijn er eenvoudige (zoals zwart, blauw) en complexe (zoals karmozijn, lawngreen).

Omdat de hele lijst van moeilijk te onthouden, worden de naam van de style sheet zelden gebruikt.

RGB

De meeste van de tv's, smartphones, monitors werken met RGB-kleurmodel. Dat wil zeggen, elke kleur kan worden ingesteld op een combinatie van primaire kleuren, die rood, groen en blauw zijn. . Een soortgelijke benadering wordt gebruikt in beide apparaten, en in de CSS. основного состава принимают значения от 0 до 255. А количество возможных оттенков равно 16777216. Kleuren basissamenstelling neemt waarden tussen 0 en 255. Een aantal mogelijke kleuren gelijk is aan 16777216.

Aangezien het RGB-model is direct gerelateerd aan de fysische wetten van kleuren weergave, wordt zwart daarin gespecificeerd als RGB (0, 0, 0), wit - RGB (255, 255, 255). RGBA systeem volledig vergelijkbaar met RGB, met de toevoeging van de alfakanaal. Het beïnvloedt de transparantie, die past bij de achtergrond schaduw. In deze vorm van het element zal variëren volgens het "substraat".

HSL

Om te begrijpen hoe het HLS systeem, moet u een kleurenwiel te dienen. In het midden is rood, dan (met de klok mee) alle andere kleuren van de regenboog. цвета при помощи системы HLS требуется задать три параметра: Om de kleuren in de CSS met behulp van de HLS systeem te bepalen vereist drie parameters:

• tint (in graden) - de richting van het cirkelmiddelpunt;
• verzadiging (percentage) - hoeveel kleur die je nodig hebt;
• helderheid (in procenten).

Bijvoorbeeld kan paars worden bepaald zodanig: hsl (315, 100%, 45%). HSL is het meest geschikt voor experimenten. Na bestudering van de kleurencirkel, kunt u tijdens het kijken naar de stylesheet ongeveer vertegenwoordigen wat kleur in te stellen specifiek element. HSLA - zelfde HLS, alleen alpha: hsl (0, 100%, 50, 0.6) - rood, transparant iets meer dan de helft.

HEX

CSS цвета можно задать, используя шестнадцатеричное представление, например оранжевый определяется значением #FF4500 . In CSS, kunt u de kleur in te stellen met behulp van de hexadecimale representatie, zoals oranje bepaald door de waarde # FF4500.

Voor een beter begrip van wat de hexadecimale representatie, moet verder rekening houden met de decimale stelsel. Het is een getal van 0 tot 9. Wanneer de noodzaak het tellen getal groter dan 9, één bit wordt toegevoegd, en het blijkt 10 dan 100, enz. E. alle precies hetzelfde in hexadecimale notatie, maar nadat 9 A, dan B, en zo verder tot F - hetzelfde als 15 in het decimale systeem. Voeg vervolgens een cijfer, en het blijkt dat 10 van de 16 in de gebruikelijke voorwaarden.

Net als in RGB, HEX kleuren om aan te geven in welke verhouding tot de primaire kleuren te gebruiken. In dit geval zijn ze niet van elkaar gescheiden door komma's (color: # FFD500). Om de twee karakters geef het aantal rood, groen en blauw.

CSS. In de regel wordt HEX systeem niet gebruikt tijdens de experimenten, want het is onmogelijk om de juiste CSS kleur te vinden. может помочь в этом деле, но если постоянно сверяться с ней, работа затянется. De tabel kan helpen in deze zaak, maar als je constant naar verwijzen, zal het werk worden uitgesteld. Hexadecimale representatie is vooral handig wanneer de sjabloon wordt overgebracht van de grafische editor. Het is veel gemakkelijker om te kopiëren van dat slechts één cijfer dan drie slagen.

Welke manier is het beste?

Op deze rekening kunnen we niet zeggen niets concreets. Als de elementen van de interface transparantie nodig hebben, kiezen tussen RGBA en HSLA. Als u wilt experimenteren in de browser HLS kleurenwiel zal de meest geschikte is. Als u gebruik maakt van een palet of het ontwerp te brengen van Photoshop, moet CSS hexadecimale kleurcodes verkiezen.