CSS-väriominaisuudet. Värikoodit

Yksi työkalu verkkosivujen tyylejen muuttamiseen on CSS-väri. Tätä asetusta voidaan muuttaa useilla tavoilla. Jokaisella on sekä etuja että haittoja.

nimi

Väriominaisuus määrittää elementin värin. CSS: ssä on 145 otsikkoa. Niistä on yksinkertaisia (esimerkiksi musta, sininen) ja monimutkaisia (esimerkiksi karmiininpunainen, lawngreen).

Koska koko luettelo on vaikea muistaa, tyyliarkin nimeä käytetään harvoin.

RGB

Useimmat televisiot, älypuhelimet ja näytöt toimivat RGB-värimallin kanssa. Eli mikä tahansa sävy voidaan asettaa ensisijaisten värien, kuten punaisen, vihreän ja sinisen, yhdistelmällä. . Tätä lähestymistapaa käytetään sekä laitteissa että CSS: ssä . основного состава принимают значения от 0 до 255. А количество возможных оттенков равно 16777216. Peruskoostumuksen värit ottavat arvot 0 - 255. Ja mahdollisten sävyjen määrä on 16777216.

Koska RGB-malli liittyy suoraan värin visualisoinnin fyysisiin lakeihin, musta määritellään siinä rgb (0, 0, 0), valkoinen on rgb (255, 255, 255). RGBA-järjestelmä on täysin analoginen RGB: lle, vain alfa-kanavan lisäämisen kanssa. Se vaikuttaa läpinäkyvyyteen, joka sekoittaa värisävyn taustalla. Tällöin tällainen elementti vaihtelee "substraatin" mukaan.

HSL

Jotta ymmärtäisit, miten HLS-järjestelmä toimii, sinun on annettava värirengas. Sen keskellä on punainen, sitten (myötäpäivään) kaikki muut sateenkaaren sävyt. цвета при помощи системы HLS требуется задать три параметра: Jos haluat määrittää CSS: n värin HLS-järjestelmän avulla, sinun on määritettävä kolme parametria:

• Sävy (asteina) - suunta ympyrän keskeltä;
• Kyllästys (prosentteina) on kuinka paljon väriä tarvitaan;
• Kirkkaus (prosentteina).

Esimerkiksi violetti voidaan määritellä seuraavasti: hsl (315, 100%, 45%). HSL sopii parhaiten kokeiluihin. Tutkittessasi värirenkaita voit karkeasti kuvitella, millainen väri on määritetty tietylle elementille katsellessasi tyyliarkkia. HSLA - sama HLS, vain alfa-kanavalla: hsl (0, 100%, 50, 0,6) - punainen, läpinäkyvä hieman yli puolet.

HEX

CSS цвета можно задать, используя шестнадцатеричное представление, например оранжевый определяется значением #FF4500 . CSS: ssä värit voidaan määrittää heksadesimaalisella esityksellä, esimerkiksi oranssi määräytyy arvo # FF4500 .

Paremman käsityksen siitä, mikä heksadesimaalinen esitys on, kannattaa mennä syvemmälle desimaalijärjestelmään. Se on numeroita 0 - 9. Jos tarvitset numeroa, joka on suurempi kuin 9, lisäät vielä yhden bitin ja saat 10: n, 100: n jne. Heksadesimaalijärjestelmässä kaikki on täsmälleen sama, mutta siinä 9 kulkee A, Sitten B ja niin edelleen F ovat samat kuin 15 desimaalijärjestelmässä. Sitten yksi bitti lisätään, ja saamme 10, yhtä suuri kuin 16 tavanomaisessa laskennassa.

Kuten RGB: ssä, HEX: n sävyt osoittavat, millä osuudella primääriset värit käyttävät. Niitä ei ole erotettu pilkulla (väri: # FFD500). Jokaisessa merkissä on punainen, vihreä ja sininen.

CSS. HEX-järjestelmää ei yleensä käytetä kokeiden aikana, koska haluttuja CSS- värejä ei voida valita . может помочь в этом деле, но если постоянно сверяться с ней, работа затянется. Taulukko voi auttaa tässä asiassa, mutta jos tarkkailet jatkuvasti sitä, työ viivästyy. Hexadecimal-esitys on helpointa siirtää mallia graafisesta editoriin. Loppujen lopuksi on paljon helpompaa kopioida vain yhdestä numerosta, kuin vuorotellen kolme.

Mikä on paras tapa?

Tälle tilalle ei voida sanoa mitään erityistä. Jos liitännän elementit tarvitsevat läpinäkyvyyden, valitse RGBA ja HSLA. Jos haluat kokeilla selaimen, HLS-värirengas on kätevä. Jos käytät palettia tai siirrät mallia Photoshopista, suosittelemme heksadesimaalisia CSS-värikoodeja.