алты қырлы сұр. HTML оқулығы

Өкінішке орай, сайтта дәм сезімін көрсету әлі мүмкін емес. Бірақ бұл түстердің көмегімен толығымен өтелуі мүмкін. Өйткені, html түстері миллиондаған реңктердің кез келгенін көрсетуге мүмкіндік береді. Сондықтан » түрлі-түсті қарындаштар” оның жиынтығында жетіден әлдеқайда көп.

html-дегі түс схемасы

html-де түсті бірнеше пішімде көрсетуге болады:

1. Он алтылық мән ретінде – он алтылық жүйеде көрсетілген код қолданылады. HTML тіліндегі мұндай түс кодтары он алтылық санның үш жұбынан тұрады. Әрбір жұп реңктің негізгі түсімен қанықтылығына жауап береді:

• Бірінші сандық жұп қызыл түске жауапты;
• Екінші жұп жасыл түстің мазмұнына арналған;
• Соңғысы көк түстің мазмұнына арналған.

Кодтың басында (сандардың алдында) хэш белгісі қойылады. Бұл он алтылық түс коды. Бұл санау жүйесінде 1-ден 9-ға дейінгі сандардан басқа латын әліпбиінің (A, B, C, D, E, F) әріптері қолданылады.

Мысалы, код ақ түс html-де #FFFFFF сияқты болады:

2. Түйінді сөз - Дәл қазір html шамамен 147 кілт сөзді қолдайды. Бірақ бұл сөздердің бәрі бірегей емес. Олардың кейбіреулері бірдей түсті реңкке сілтеме жасайды.

Сұр екі кілт сөзбен берілген: сұр және сұр . Олардың он алтылық коды (HEX ) #808080 бірдей мәнмен берілген.

Мысал:

#808080

3. RGB пішімінде - html-дегі бұл түсті кодтау 0-ден 255-ке дейінгі аралықта орнатылған үш мәнді пайдалануға негізделген. Олардың әрқайсысы негізгі түстердің бірімен реңктің қанықтылығын анықтайды:

• R - қызыл (қызыл);
• G - жасыл (жасыл);
• B - көк (көк).

RGB пішіміндегі түс нөмірі келесідей жазылады: rgb(0, 210, 100).

фон түсі:rgb(100,186,43)

4. RGBA пішімінде – бұл кеңейтілген RGB пішімі, мұнда төртінші мән 0-ден 1-ге дейінгі ондық бөлшек түріндегі түстің мөлдірлігін көрсетеді.

Қолдану мысалы:

фон түсі:rgba(100,86,143,0,2)

фон түсі:rgba(100,86,143,0,5)

фон түсі:rgba(100,86,143,0,8)

фон түсі:rgba(100,86,143,1)

html түс кестелері және түс генераторлары

Түс параметрінің пішімдерінің осындай кең ауқымымен шатастыру оңай. Сондықтан ол ойлап табылды арнайы үстелтүстер. Онда түс реңктерінің 147 негізгі атауына сәйкестік кодтары түсті көрсетудің барлық негізгі стандарттарында берілген. Сонымен қатар, әр өріс түсті визуалды сәйкестендіру үшін жолақпен жабдықталған. Осы кестелердің бірі colorscheme.ru сайтында ұсынылған:

Бірақ корреспонденцияны осындай құрылымдау арқылы да қажетті реңкті таңдау қиын болуы мүмкін. Түс кодтары кестесінде дұрысы бар екені шындық емес.

Бұл кедергіні айналып өту және дұрыс реңкті таңдауды барынша жеңілдету үшін интерактивті веб-қызметтері әзірленді. Олардың пайдаланушы интерфейсібіршама ерекшеленуі мүмкін.

html-color-codes.info сайтында түс генераторы келесідей көрінеді:

Ал color-picker.appsmaster.co қызметінде бұл құрал сәл басқаша жүзеге асырылады:

Генератордағы әрбір түстің қанықтылығы арнайы жүгірткілердің көмегімен орнатылады. Көрнекі түрде реңк жақтаудың және сол жақтағы тіктөртбұрыштың түсі арқылы көрсетіледі. Төменгі жағында 3 өріс негізгі форматтардағы түс кодын көрсетеді.

Бірақ түс генераторы тек мамандандырылған сайттарда ғана емес. Барлық дерлік графикалық редакторлар ұқсас құралмен жабдықталған. Мысалы, Photoshop:

Түс қауіпсіздігі

Және бұл ұзақ уақыт бұрын, тек 256 түсті қолдайтын видеокарталар дәуірінде болды. Сол алыс заманда ОЖсегіз разрядты реңктердің белгілі бір санын ғана бұрмалаусыз көрсете алады.

Содан кейін қауіпсіз түстердің керемет үстелі өсірілді. Ол сол кездегі браузерлердің кез келгенінде бұрмаланбай көрсетуге болатын 216 реңкті көрсетті. Және осы күнге дейін тамаша қолжазба» әлі де кейбір ресурстарда қолжетімді:

Біздің уақытта бәрі өзгерді. Сондықтан html-де түстермен жұмыс істеу кезінде барлық қауіпсіздік ережелері толығымен жойылады. Өйткені, заманауи компьютердің аппараттық құралдары 16 миллионнан астам түрлі реңктерді қолдайды. Ал 216 қауіпсіз түс ұмытылды.

Бұл деректер толығымен статистикамен расталады. Оған сүйенсек, 2014 жылы пайдаланушылардың тек 0,5% ғана 256 реңкті қолдайтын компьютерлерге ие.

Түс гармониясының негіздері

Барлығымызға табиғи үйлесімді дәм сезімі берілмейді. Сондықтан дұрыс түсті таңдау нағыз қиыншылық болуы мүмкін. Бірақ, ғылымға да шүкір түс үйлесімділігіОл бірнеше схемалар түрінде сипаттай алды. Олардың барлығы түсті дөңгелекті пайдалануға негізделген. html-де түстерді үйлесімді таңдау схемалары.

CSS-тегі түс кодтары түстерді анықтау үшін қолданылады. Әдетте түс кодтары немесе түс мәндері элементтің алдыңғы жоспары (мысалы, мәтін, сілтеме түсі) немесе элементтің фоны (фон, блок түсі) үшін түсті орнату үшін пайдаланылады. Оларды түйме түсін, жиектерді, маркерді, меңзерді және басқа сәндік әсерлерді өзгерту үшін де пайдалануға болады.

Түс мәндерін әртүрлі пішімдерде орнатуға болады. Келесі кестеде барлық ықтимал пішімдердің тізімі берілген:

Бұл форматтар төменде толығырақ сипатталған.

CSS түстері - алтылық кодтар

Он алтылық түс кодыалты таңбалы түстің көрінісі болып табылады. Алғашқы екі сан (RR) қызыл мән, келесі екеуі жасыл мән (GG) және соңғы екеуі көк мән (BB) болып табылады.

CSS түстері - қысқа алтылық кодтар

Қысқа он алтылық түс кодыалты таңбалы белгілердің қысқаша түрі. Бұл пішімде әр сан баламалы алты таңбалы түс мәнін шығару үшін қайталанады. Мысалы: #0F0 #00FF00 болады.

Оналтылық мәнді кез келген графикадан алуға болады бағдарламалық қамтамасыз ету, сияқты Adobe Photoshop, Core Draw және т.б.

CSS-тегі әрбір он алтылық түс кодының алдында "#" хэш белгісі болады. Төменде он алтылық белгілерді қолдану мысалдары берілген.

CSS түстері - RGB мәндері

RGB мәні rgb() қасиеті арқылы орнатылатын түс коды болып табылады. Бұл сипат үш мәнді қабылдайды: қызыл, жасыл және көк үшін әрқайсысы бір. Мән 0-ден 255-ке дейінгі бүтін сан немесе пайыз болуы мүмкін.

Ескерту:Барлық браузерлер rgb() түс сипатын қолдамайды, сондықтан оны пайдалану ұсынылмайды.

Төменде RGB мәндерін қолданатын бірнеше түстерді көрсететін мысал келтірілген.

Түс кодының генераторы

Біздің қызметімізбен миллиондаған түс кодтарын жасай аласыз.

Қауіпсіз шолғыш түстері

Төменде ең қауіпсіз және компьютерден тәуелсіз 216 түсті кесте берілген. CSS-тегі бұл түстер 000000-нан FFFFFF он алтылық кодына дейін ауытқиды. Оларды пайдалану қауіпсіз, өйткені олар 256 түстер палитрасымен жұмыс істегенде барлық компьютерлердің түстерді дұрыс көрсетуін қамтамасыз етеді.

HTML тілінде түсті үш жолмен көрсетуге болады:

HTML тіліндегі түсті оның аты бойынша орнату

Кейбір түстерді беттегі түс атауын пайдаланып, олардың атымен көрсетуге болады ағылшын тілі. Ең ортақ түйінді сөздер: қара (қара), ақ (ақ), қызыл (қызыл), жасыл (жасыл), көк (көк), т.б.:

Мәтін түсі – қызыл

Консорциум стандартының ең танымал түстері Дүниежүзілік өрмек(Ағылшын дүниежүзілік тор консорциумы, W3C):

Түрлі түс атауларын пайдалану мысалы:

Мысалы: оның аты бойынша түсті орнату

• Өзіңіз көріңіз »

Қызыл фонда тақырып

Қызғылт сары фонда тақырып

Әк фондағы тақырып

Көк фонда ақ мәтін

Қызыл фонда тақырып

Қызғылт сары фонда тақырып

Әк фондағы тақырып

Көк фонда ақ мәтін

Түсті RGB көмегімен анықтау

Мониторда әртүрлі түстерді көрсету кезінде RGB палитрасы негізге алынады. Кез келген түс үш негізгі түсті араластыру арқылы алынады: R - қызыл, G - жасыл (жасыл), B - көк (көк). Әрбір түстің жарықтығы бір байтпен беріледі, сондықтан 0-ден 255-ке дейінгі мәндерді қабылдай алады. Мысалы, RGB (255,0,0) қызыл болып көрсетіледі, себебі қызыл ең жоғары мәнге (255) орнатылған және қалғаны 0 мәніне орнатылған Түсті пайыз ретінде де орнатуға болады. Параметрлердің әрқайсысы сәйкес түстің жарықтық деңгейін көрсетеді. Мысалы: rgb(127, 255, 127) және rgb(50%, 100%, 50%) мәндері бірдей орташа қаныққан жасыл түсті орнатады:

Мысал: RGB көмегімен түсті көрсету

• Өзіңіз көріңіз »

rgb(127, 255, 127)

rgb(50%, 100%, 50%)

rgb(127, 255, 127)

rgb(50%, 100%, 50%)

Түсті он алтылық мән бойынша орнатыңыз

Құндылықтар Р Г Бсондай-ақ пішіндегі он алтылық (HEX) түс мәндерін пайдаланып көрсетуге болады: #RRGGBB мұнда RR (қызыл), GG (жасыл) және BB (көк) 00-ден FF-ге дейінгі он алтылық мәндер (ондық 0- сияқты) 255) . Он алтылық жүйе ондық жүйеден айырмашылығы, аты айтып тұрғандай, 16 санына негізделген. Он алтылық жүйе келесі белгілер: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Мұнда 10-нан 15-ке дейінгі сандар латын әріптерімен ауыстырылады. Он алтылық жүйедегі 15-тен үлкен сандар екі таңбаның бір мәнге қосылуы болып табылады. Мысалы, ондық жүйедегі ең жоғары 255 саны он алтылықтағы ең жоғары FF-ге сәйкес келеді. Ондық жүйеден айырмашылығы, он алтылық санның алдында фунт белгісі қойылады. # , мысалы, #FF0000 қызыл болып көрсетіледі, себебі қызыл ең жоғары мәнге (FF) орнатылған, ал басқа түстер олардың ең төменгі мәніне (00) орнатылған. Хэш белгісінен кейінгі таңбалар # бас әріппен де, кіші әріппен де теруге болады. Он алтылық жүйе қысқартылған #rgb түрін пайдалануға мүмкіндік береді, мұнда әрбір таңба екі есеге тең. Осылайша, #f7O жазбасы #ff7700 ретінде қарастырылуы керек.

Мысал: HEX түсі

• Өзіңіз көріңіз »

қызыл: #FF0000

жасыл: #00FF00

көк: #0000FF

қызыл: #FF0000

жасыл: #00FF00

көк: #0000FF

қызыл+жасыл=сары: #FFFF00

қызыл+көк=күлгін: #FF00FF

жасыл+көк=көгілдір: #00FFFF

Жиі қолданылатын түстер тізімі (аты, HEX және RGB):

Қанықтығы мен реңк бойынша түс кодтары (фон).

HTML түстерінің кестесі (палитрасы).қажетті тонды өз бетінше таңдауға мүмкіндік береді. Түс мәні үш пішімде көрсетіледі: Hex, RGB және HSV.

• Он алтылық он алтылық белгілеудегі үш екі таңбалық мәннен тұрады. Мысалы: #ff00b3, мұнда сандардың бірінші жұбы қызыл, екіншісі жасыл және үшінші көк.
• RGB (RedGreenBlue) "200,100,255" пішімі бар, нәтижесінде алынған түстегі сәйкес тонның (қызыл, жасыл, көк) мөлшерін көрсетеді.
• HSV (Hue, Saturation, Value - тон, қанықтылық, мән) - координаталары болатын түс үлгісі:
  • Реңк - түс тоны, 0°-тан 360°-қа дейін өзгеруі мүмкін.
  • Saturation - қанықтылық, 0-100 немесе 0-1 аралығында өзгереді. Бұл параметр неғұрлым үлкен болса, түс соғұрлым «таза» болады, сондықтан бұл параметр кейде түс тазалығы деп аталады. Және бұл параметр нөлге жақын болған сайын, түс бейтарап сұрға жақын болады.
  • Мән (түс мәні) - жарықтықты орнатады, мән де 0-100 немесе 0-1 арасында өзгеруі мүмкін.

Түс кодын енгізіңіз: ӨТ

Аты бар түстер тізімі

Кестеде барлық браузерлер қолдайтын ағылшын түс атаулары (мәндер ретінде пайдалануға болады) және олардың он алтылық мәндері берілген. Тізімдегі барлық түстер «қауіпсіз», яғни олар барлық браузерлерде бірдей көрсетіледі.

Үшін html беттерітүстер негізінен он алтылық жүйеде белгіленеді. Ол үшін кодты жазудың екі түрі қолданылады - толық немесе қысқартылған. Толық жазбамен html түсін дұрыс көрсету үшін тордан кейін алты таңбаны (сандар және/немесе ағылшын әріптері) жазу керек, мысалы, қара келесідей жазылады: #000000. Html түстерін көрсетуге арналған қысқартылған белгі тордан және оның артында үш саннан және/немесе әріптен тұрады. Сонымен бірге бұл түррезервтер болған жағдайда ғана пайдалануға болады толық жазбаберілген түс тордан кейінгі бірдей белгілерден тұрады. Мысалы, бірдей қара түсті былай жазуға болады: #000. html түстерін үлкен және кіші таңбалармен көрсетуге болады, себебі олар регистрге сезімтал емес.

«#» белгісінен кейін жазылған әрбір таңба қызыл, жасыл және көк түстердің белгілі бір үлесіне сәйкес келеді. Өз кезегінде, барлық мониторлар көптеген пикселдерден (микроскопиялық нүктелерден) тұрады, олардың әрқайсысында 3 деп аталатын «шамдар» (жарық көздері): қызыл, жасыл және көк. Содан кейін осы «шамдар» арқылы шығарылатын жарықтың қарқындылығын реттеу арқылы монитор бізге қажетті түсті көрсетеді.

Қызыл, көк және жасыл жарық қарқындылығын (0-ден 256-ға дейін) біріктіру арқылы мониторлар 16 000 000 түрлі түстерді көрсете алады.

Сондай-ақ сайттардың түстері ауызша немесе RGB кодында көрсетілуі мүмкін.

Бүгінгі күні ауызша, сіз 147 түсті тағайындай аласыз. Кейбір әртүрлі атаулар бірдей түстерге сілтеме жасай алатынын білу маңызды, мысалы, Сұр және Сұр сұр (#808080).

Веб-сайттар үшін қауіпсіз түстер.

Әрбір монитор мен браузер барлық 16 миллион html түсін дұрыс көрсете алмайды.

Мысалы, браузер дұрыс көрсете алмайтын түс пайда болса, онда:

1. Браузер оны өзіне ең ұқсас және сәтті қайта шығаруға болатынымен ауыстырады;
2. Дұрыс көрсету үшін браузер бірнеше түстерді араластырып, нәтижені шығара алады.

Кез келген браузердегі және кез келген монитордағы шығыс кодта көрсетілген түс болуын қамтамасыз ету үшін «Қауіпсіз түстерді» пайдалану ұсынылады. Олар қолмен немесе біреудің қалауымен емес, математикалық жолмен анықталған. Мұндай 100% қауіпсіз түстер html құжаттары 216. Бүгінгі технология қазіргі заманғы мониторлар мен браузерлер миллиондаған реңктерді танитын деңгейге жеткенімен, түстердің шығуын қамтамасыз ету үшін осы қауіпсіз түстерді пайдалануды ұсынамыз.

Бұл кестеде 216 қауіпсіз HTML түс коды бар. Әр түстің түсін анықтау үшін RGB мәні бар графикалық редакторларжәне html беттеріндегі түстерді анықтауға арналған HEX.