ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄

ΠšΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€ Ρ†Π²Π΅Ρ‚ΠΎΠ²

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€ Ρ†Π²Π΅Ρ‚ΠΎΠ² Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ пСрСвСсти Ρ†Π²Π΅Ρ‚ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠΉ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ Π² ряд Π΄Ρ€ΡƒΠ³ΠΈΡ….

Π’ ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ, ΠΊΠ°Π»ΡŒΠΊΡƒΠ»ΡΡ‚ΠΎΡ€ слуТит для ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с соврСмСнными Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°ΠΌΠΈ CSS3-Ρ†Π²Π΅Ρ‚ΠΎΠ². ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ΡΡ конвСртация ΠΈΠ· HEX Π² RGB/RGBA ΠΈ HSL/HSLA, RGB Π² CMYK, XYZ, LAB, ΠΈ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎ.

А Ρ‚Π°ΠΊΠΆΠ΅ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π» для замСщСния Π°Π»ΡŒΡ„Π°-ΠΊΠ°Π½Π°Π»Π° ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄Π΅ Ρ†Π²Π΅Ρ‚Π° ΠΈΠ· RGBA Π² RGB (ΠΈ HSLA Π² HSL).

Π‘ΠΏΡ€Π°Π²ΠΊΠ° ΠΏΠΎ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹ΠΌ модСлям

Π”Π°Π»Π΅Π΅ приводится ΠΊΡ€Π°Ρ‚ΠΊΠΎΠ΅ описаниС Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Ρ… систСм с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€, Ρ€Π°Π·ΡŠΡΡΠ½Π΅Π½ΠΈΠ΅ ΠΏΠΎ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°ΠΌ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ использования ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹Ρ… Ρ†Π²Π΅Ρ‚ΠΎΠ² Π² CSS/HTML.

HEX / HTML

Π¦Π²Π΅Ρ‚ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ HEX β€” это Π½ΠΈ Ρ‡Ρ‚ΠΎ ΠΈΠ½ΠΎΠ΅, ΠΊΠ°ΠΊ ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½ΠΎΠ΅ прСдставлСниС RGB.

Π¦Π²Π΅Ρ‚Π° ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ΡΡ Π² Π²ΠΈΠ΄Π΅ Ρ‚Ρ€Ρ‘Ρ… Π³Ρ€ΡƒΠΏΠΏ ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½Ρ‹Ρ… Ρ†ΠΈΡ„Ρ€, Π³Π΄Π΅ каТдая Π³Ρ€ΡƒΠΏΠΏΠ° ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π·Π° свой Ρ†Π²Π΅Ρ‚: #112233, Π³Π΄Π΅ 11 β€” красный, 22 β€” Π·Π΅Π»Ρ‘Π½Ρ‹ΠΉ, 33 β€” синий. ВсС значСния Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΌΠ΅ΠΆΠ΄Ρƒ 00 ΠΈ FF.

Π’ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ… прилоТСниях допускаСтся сокращённая Ρ„ΠΎΡ€ΠΌΠ° записи ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½Ρ‹Ρ… Ρ†Π²Π΅Ρ‚ΠΎΠ². Если каТдая ΠΈΠ· Ρ‚Ρ€Ρ‘Ρ… Π³Ρ€ΡƒΠΏΠΏ содСрТит ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Π΅ символы, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ #112233, Ρ‚ΠΎ ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠ°ΠΊ #123.

Π¦Π²Π΅Ρ‚ΠΎΠ²ΠΎΠ΅ пространство RGB (Red, Green, Blue) состоит ΠΈΠ· всСх Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… Ρ†Π²Π΅Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Ρ‹ ΠΏΡƒΡ‚Ρ‘ΠΌ смСшивания красного, Π·Π΅Π»Ρ‘Π½ΠΎΠ³ΠΎ, ΠΈ синСго. Π­Ρ‚Π° модСль популярна Π² Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ, Ρ‚Π΅Π»Π΅Π²ΠΈΠ΄Π΅Π½ΠΈΠΈ, ΠΈ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠ΅.

ЗначСния RGB Π·Π°Π΄Π°ΡŽΡ‚ΡΡ Ρ†Π΅Π»Ρ‹ΠΌ числом ΠΎΡ‚ 0 Π΄ΠΎ 255. НапримСр, rgb(0,0,255) отобраТаСтся ΠΊΠ°ΠΊ синий, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ синий ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ установлСн Π² Π΅Π³ΠΎ самоС высокоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ (255), Π° ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ установлСны Π² 0.

НСкоторыС прилоТСния (Π² частности Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹) ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π½ΡƒΡŽ запись Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ RGB (ΠΎΡ‚ 0% Π΄ΠΎ 100%).

Π¦Π²Π΅Ρ‚ΠΎΠ²Ρ‹Π΅ значСния RGB ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ Π²ΠΎ всСх основных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….

Π‘ Π½Π΅Π΄Π°Π²Π½ΠΈΡ… ΠΏΠΎΡ€ соврСмСнныС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Π½Π°ΡƒΡ‡ΠΈΠ»ΠΈΡΡŒ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ модСлью RGBA β€” Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ΠΌ RGB с ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ Π°Π»ΡŒΡ„Π°-ΠΊΠ°Π½Π°Π»Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ опрСдСляСт Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° RGBA задаСтся Π² Π²ΠΈΠ΄Π΅: rgba(red, green, blue, alpha). ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ alpha β€” это число Π² Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅ ΠΎΡ‚ 0.0 (ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ) Π΄ΠΎ 1.0 (ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ).

RGBA поддСрТиваСтся Π² IE9+, Firefox 3+, Chrome, Safari, ΠΈ Π² Opera 10+.

ЦвСтовая модСль HSL являСтся прСдставлСниСм ΠΌΠΎΠ΄Π΅Π»ΠΈ RGB Π² цилиндричСской систСмС ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚. HSL прСдставляСт Ρ†Π²Π΅Ρ‚Π° Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½Ρ‹ΠΌ ΠΈ понятным для восприятия ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Π΅ΠΌ Ρ‚ΠΈΠΏΠΈΡ‡Π½ΠΎΠ΅ RGB. МодСль часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² графичСских прилоТСниях, Π² ΠΏΠ°Π»ΠΈΡ‚Ρ€Π°Ρ… Ρ†Π²Π΅Ρ‚ΠΎΠ², ΠΈ для Π°Π½Π°Π»ΠΈΠ·Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

HSL Ρ€Π°ΡΡˆΠΈΡ„Ρ€ΠΎΠ²Ρ‹Π²Π°Π΅Ρ‚ΡΡ ΠΊΠ°ΠΊ Hue (Ρ†Π²Π΅Ρ‚/ΠΎΡ‚Ρ‚Π΅Π½ΠΎΠΊ), Saturation (Π½Π°ΡΡ‹Ρ‰Π΅Π½Π½ΠΎΡΡ‚ΡŒ), Lightness/Luminance (свСтлота/ΡΠ²Π΅Ρ‚Π»ΠΎΡΡ‚ΡŒ/ΡΠ²Π΅Ρ‚ΠΈΠΌΠΎΡΡ‚ΡŒ, Π½Π΅ ΠΏΡƒΡ‚Π°Ρ‚ΡŒ с ΡΡ€ΠΊΠΎΡΡ‚ΡŒΡŽ).

Hue Π·Π°Π΄Π°Ρ‘Ρ‚ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° Π½Π° Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΌ ΠΊΡ€ΡƒΠ³Π΅ (ΠΎΡ‚ 0 Π΄ΠΎ 360). Saturation являСтся ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π½Ρ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ насыщСнности (ΠΎΡ‚ 0% Π΄ΠΎ 100%). Lightness являСтся ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π½Ρ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ свСтлости (ΠΎΡ‚ 0% Π΄ΠΎ 100%).

HSL поддСрТиваСтся Π² IE9+, Firefox, Chrome, Safari, ΠΈ Π² Opera 10+.

По Π°Π½Π°Π»ΠΎΠ³ΠΈΠΈ с RGB/RGBA, для HSL имССтся Ρ€Π΅ΠΆΠΈΠΌ HSLA с ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ Π°Π»ΡŒΡ„Π°-ΠΊΠ°Π½Π°Π»Π° для указания нСпрозрачности ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° HSLA задаСтся Π² Π²ΠΈΠ΄Π΅: hsla(hue, saturation, lightness, alpha). ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ alpha β€” это число Π² Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅ ΠΎΡ‚ 0.0 (ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ) Π΄ΠΎ 1.0 (ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ).

ЦвСтовая модСль CMYK часто ассоциируСтся с Ρ†Π²Π΅Ρ‚Π½ΠΎΠΉ ΠΏΠ΅Ρ‡Π°Ρ‚ΡŒΡŽ, с ΠΏΠΎΠ»ΠΈΠ³Ρ€Π°Ρ„ΠΈΠ΅ΠΉ. CMYK (Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ RGB) являСтся субтрактивной модСлью, это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Ρ‡Ρ‚ΠΎ Π±ΠΎΠ»Π΅Π΅ высокиС значСния связаны с Π±ΠΎΠ»Π΅Π΅ Ρ‚Ρ‘ΠΌΠ½Ρ‹ΠΌΠΈ Ρ†Π²Π΅Ρ‚Π°ΠΌΠΈ.

Π¦Π²Π΅Ρ‚Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ΡΡ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ΠΌ Π³ΠΎΠ»ΡƒΠ±ΠΎΠ³ΠΎ (Cyan), ΠΏΡƒΡ€ΠΏΡƒΡ€Π½ΠΎΠ³ΠΎ (Magenta), ΠΆΡ‘Π»Ρ‚ΠΎΠ³ΠΎ (Yellow), с Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ Ρ‡Ρ‘Ρ€Π½ΠΎΠ³ΠΎ (Key/blacK).

КаТдоС ΠΈΠ· чисСл, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‰Π΅Π΅ Ρ†Π²Π΅Ρ‚ Π² CMYK, прСдставляСт собой ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ краски Π΄Π°Π½Π½ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π°, ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰Π΅ΠΉ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΡƒΡŽ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΡŽ, Π° Ρ‚ΠΎΡ‡Π½Π΅Π΅, Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ‚ΠΎΡ‡ΠΊΠΈ растра, Π²Ρ‹Π²ΠΎΠ΄ΠΈΠΌΠΎΠΉ Π½Π° Ρ„ΠΎΡ‚ΠΎΠ½Π°Π±ΠΎΡ€Π½ΠΎΠΌ Π°ΠΏΠΏΠ°Ρ€Π°Ρ‚Π΅ Π½Π° ΠΏΠ»Ρ‘Π½ΠΊΠ΅ Π΄Π°Π½Π½ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π° (ΠΈΠ»ΠΈ прямо Π½Π° ΠΏΠ΅Ρ‡Π°Ρ‚Π½ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΠ΅ Π² случаС с CTP).

НапримСр, для получСния Ρ†Π²Π΅Ρ‚Π° Β«PANTONE 7526Β» слСдуСт ΡΠΌΠ΅ΡˆΠ°Ρ‚ΡŒ 9 частСй Π³ΠΎΠ»ΡƒΠ±ΠΎΠΉ краски, 83 частСй ΠΏΡƒΡ€ΠΏΡƒΡ€Π½ΠΎΠΉ краски, 100 β€” ΠΆΡ‘Π»Ρ‚ΠΎΠΉ краски, ΠΈ 46 β€” Ρ‡Ρ‘Ρ€Π½ΠΎΠΉ. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡ΠΈΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ: (9,83,100,46). Иногда ΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Ρ‚Π°ΠΊΠΈΠΌΠΈ обозначСниями: C9M83Y100K46, ΠΈΠ»ΠΈ (9%, 83%, 100%, 46%), ΠΈΠ»ΠΈ (0,09/0,83/1,0/0,46).

HSB / HSV

HSB (Ρ‚Π°ΠΊΠΆΠ΅ извСстна ΠΊΠ°ΠΊ HSV) ΠΏΠΎΡ…ΠΎΠΆΠ° Π½Π° HSL, Π½ΠΎ это Π΄Π²Π΅ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Π΅ ΠΌΠΎΠ΄Π΅Π»ΠΈ. Они ΠΎΠ±Π΅ основаны Π½Π° цилиндричСской Π³Π΅ΠΎΠΌΠ΅Ρ‚Ρ€ΠΈΠΈ, Π½ΠΎ HSB/HSV основана Π½Π° ΠΌΠΎΠ΄Π΅Π»ΠΈ Β«hexconeΒ», Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ HSL основана Π½Π° ΠΌΠΎΠ΄Π΅Π»ΠΈ Β«bi-hexconeΒ». Π₯ΡƒΠ΄ΠΎΠΆΠ½ΠΈΠΊΠΈ часто ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°ΡŽΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эту модСль, принято ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ устройство HSB/HSV Π±Π»ΠΈΠΆΠ΅ ΠΊ СстСствСнному Π²ΠΎΡΠΏΡ€ΠΈΡΡ‚ΠΈΡŽ Ρ†Π²Π΅Ρ‚ΠΎΠ². Π’ частности, цвСтовая модСль HSB примСняСтся Π² Adobe Photoshop.

HSB/HSV Ρ€Π°ΡΡˆΠΈΡ„Ρ€ΠΎΠ²Ρ‹Π²Π°Π΅Ρ‚ΡΡ ΠΊΠ°ΠΊ Hue (Ρ†Π²Π΅Ρ‚/ΠΎΡ‚Ρ‚Π΅Π½ΠΎΠΊ), Saturation (Π½Π°ΡΡ‹Ρ‰Π΅Π½Π½ΠΎΡΡ‚ΡŒ), Brightness/Value (ΡΡ€ΠΊΠΎΡΡ‚ΡŒ/Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅).

Hue Π·Π°Π΄Π°Ρ‘Ρ‚ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° Π½Π° Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΌ ΠΊΡ€ΡƒΠ³Π΅ (ΠΎΡ‚ 0 Π΄ΠΎ 360). Saturation являСтся ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π½Ρ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ насыщСнности (ΠΎΡ‚ 0% Π΄ΠΎ 100%). Brightness являСтся ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π½Ρ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ яркости (ΠΎΡ‚ 0% Π΄ΠΎ 100%).

ЦвСтовая модСль XYZ (CIE 1931 XYZ) являСтся чисто матСматичСским пространством. Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ RGB, CMYK, ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΌΠΎΠ΄Π΅Π»Π΅ΠΉ, Π² XYZ основныС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Β«ΠΌΠ½ΠΈΠΌΡ‹ΠΌΠΈΒ», Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ соотнСсти X, Y, ΠΈ Z с ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ Π½Π°Π±ΠΎΡ€ΠΎΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠ² для смСшивания. XYZ являСтся мастСр-модСлью практичСски всСх ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Ρ… ΠΌΠΎΠ΄Π΅Π»Π΅ΠΉ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… Π² тСхничСских областях.

ЦвСтовая модСль LAB (CIELAB, Β«CIE 1976 L*a*b*Β») вычисляСтся ΠΈΠ· пространства CIE XYZ. ΠŸΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Lab ΠΏΡ€Π΅ΡΠ»Π΅Π΄ΠΎΠ²Π°Π»Π°ΡΡŒ Ρ†Π΅Π»ΡŒ создания Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠ³ΠΎ пространства, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π±ΡƒΠ΄Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΌ с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния чСловСчСского восприятия (ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с XYZ), Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ с Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ Ρ†Π²Π΅Ρ‚Π° Π² Ρ€Π°Π·Π½Ρ‹Ρ… областях Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠ³ΠΎ пространства ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΠ»ΠΎ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ΅ ΠΎΡ‰ΡƒΡ‰Π΅Π½ΠΈΠ΅ измСнСния Ρ†Π²Π΅Ρ‚Π°.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Π’Π°Π±Π»ΠΈΡ†Π° Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Ρ… ΠΊΠΎΠ΄ΠΎΠ² RGB

ΠŸΠ°Π»ΠΈΡ‚Ρ€Π° Ρ†Π²Π΅Ρ‚ΠΎΠ² RGB

Π’Π°Π±Π»ΠΈΡ†Π° Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Ρ… ΠΊΠΎΠ΄ΠΎΠ² RGB

НавСдитС курсор Π½Π° Ρ†Π²Π΅Ρ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½Ρ‹ΠΉ ΠΈ дСсятичный Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Π΅ ΠΊΠΎΠ΄Ρ‹ Π½ΠΈΠΆΠ΅:

ШСстнадцатСричный: #
ΠšΡ€Π°ΡΠ½Ρ‹ΠΉ:
Π—Π΅Π»Π΅Π½Ρ‹ΠΉ:
Π‘ΠΈΠ½ΠΈΠΉ:

Π¦Π²Π΅Ρ‚ΠΎΠ²ΠΎΠ΅ пространство RGB

ΠšΡ€Π°ΡΠ½Ρ‹ΠΉ, Π·Π΅Π»Π΅Π½Ρ‹ΠΉ ΠΈ синий ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΏΠΎ 8 Π±ΠΈΡ‚ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ цСлочислСнныС значСния ΠΎΡ‚ 0 Π΄ΠΎ 255. Π­Ρ‚ΠΎ Π΄Π°Π΅Ρ‚ 256 * 256 * 256 = 16777216 Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… Ρ†Π²Π΅Ρ‚ΠΎΠ².

RGB ≑ красный, Π·Π΅Π»Π΅Π½Ρ‹ΠΉ, синий

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ пиксСль Π½Π° свСтодиодном ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ Ρ†Π²Π΅Ρ‚Π° Π·Π° счСт ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΠΈ красного, Π·Π΅Π»Π΅Π½ΠΎΠ³ΠΎ ΠΈ синСго свСтодиодов (ΡΠ²Π΅Ρ‚ΠΎΠΈΠ·Π»ΡƒΡ‡Π°ΡŽΡ‰ΠΈΡ… Π΄ΠΈΠΎΠ΄ΠΎΠ²).

Когда красный пиксСль установлСн Π½Π° 0, свСтодиод Π²Ρ‹ΠΊΠ»ΡŽΡ‡Π΅Π½. Когда красный пиксСль установлСн Π½Π° 255, свСтодиод Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½.

Π›ΡŽΠ±ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ устанавливаСт частичноС ΠΈΠ·Π»ΡƒΡ‡Π΅Π½ΠΈΠ΅ свСтодиода.

Π¦Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ ΠΈ расчСт RGB

Код RGB ΠΈΠΌΠ΅Π΅Ρ‚ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ 24 Π±ΠΈΡ‚Π° (Π±ΠΈΡ‚Ρ‹ 0..23):

ΠšΠ ΠΠ‘ΠΠ«Π™ [7: 0]ЗЕЛЕНЫЙ [7: 0]Π‘Π˜ΠΠ˜Π™ [7: 0]
231615870

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ расчСтов

Π‘Π΅Π»Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ RGB

White RGB code = 255*65536+255*256+255 = #FFFFFF

Π‘ΠΈΠ½ΠΈΠΉ Ρ†Π²Π΅Ρ‚ RGB

Blue RGB code = 0*65536+0*256+255 = #0000FF

ΠšΡ€Π°ΡΠ½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ RGB

Red RGB code = 255*65536+0*256+0 = #FF0000

Π—Π΅Π»Π΅Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ RGB

Green RGB code = 0*65536+255*256+0 = #00FF00

Π‘Π΅Ρ€Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ RGB

Gray RGB code = 128*65536+128*256+128 = #808080

Π–Π΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ RGB

Yellow RGB code = 255*65536+255*256+0 = #FFFF00

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

6. CSS β€” Π¦Π²Π΅Ρ‚Π°: Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ ΠΈ ΠΊΠΎΠ΄Ρ‹

ΠšΠΎΠ΄Ρ‹ Ρ†Π²Π΅Ρ‚ΠΎΠ² Π² CSS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для указания Ρ†Π²Π΅Ρ‚Π°. Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, ΠΊΠΎΠ΄Ρ‹ Ρ†Π²Π΅Ρ‚Π° ΠΈΠ»ΠΈ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Π΅ значСния ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для установки Ρ†Π²Π΅Ρ‚Π° Π»ΠΈΠ±ΠΎ для ΠΏΠ΅Ρ€Π΅Π΄Π½Π΅Π³ΠΎ ΠΏΠ»Π°Π½Π° элСмСнта (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ†Π²Π΅Ρ‚ тСкста, ссылки), Π»ΠΈΠ±ΠΎ для Ρ„ΠΎΠ½Π° элСмСнта (Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°, Π±Π»ΠΎΠΊΠ°). Они Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для измСнСния Ρ†Π²Π΅Ρ‚Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π³Ρ€Π°Π½ΠΈΡ†, ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°, ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… эффСктов.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°Π΄Π°Ρ‚ΡŒ свои значСния Ρ†Π²Π΅Ρ‚Π° Π² Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ…. Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ пСрСчислСны всС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹:

Π€ΠΎΡ€ΠΌΠ°Ρ‚Π‘ΠΈΠ½Ρ‚Π°ΠΊΡΠΈΡΠŸΡ€ΠΈΠΌΠ΅Ρ€
ШСстнадцатСричный ΠΊΠΎΠ΄#00FF00p
ΠšΠΎΡ€ΠΎΡ‚ΠΊΠΈΠΉ ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½Ρ‹ΠΉ ΠΊΠΎΠ΄#0F0p
RGB %rgb(rrr%,ggg%,bbb%)p
RGB Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΉrgb(rrr,ggg,bbb)p
ΠšΠ»ΡŽΡ‡Π΅Π²ΠΎΠ΅ словоgreen, white, black ΠΈ Ρ‚.Π΄.p

НиТС Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ описаны пСрСчислСнныС Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹.

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Π¦Π²Π΅Ρ‚Π° CSS β€” ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½Ρ‹Π΅ ΠΊΠΎΠ΄Ρ‹

ШСстнадцатСричный ΠΊΠΎΠ΄ Ρ†Π²Π΅Ρ‚Π° β€” это ΡˆΠ΅ΡΡ‚ΠΈΠ·Π½Π°Ρ‡Π½ΠΎΠ΅ прСдставлСниС Ρ†Π²Π΅Ρ‚Π°. ΠŸΠ΅Ρ€Π²Ρ‹Π΅ Π΄Π²Π΅ Ρ†ΠΈΡ„Ρ€Ρ‹ (RR) β€” ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ собой красноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π΄Π²Π΅ β€” это Π·Π΅Π»Π΅Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ (GG), Π° послСдниС β€” синСС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ (BB).

ШСстнадцатСричноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ взято ΠΈΠ· любого графичСского ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния, Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Adobe Photoshop, Core Draw ΠΈ Π΄Ρ€.

ΠšΠ°ΠΆΠ΄ΠΎΠΌΡƒ ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½ΠΎΠΌΡƒ ΠΊΠΎΠ΄Ρƒ Ρ†Π²Π΅Ρ‚Π° Π² CSS Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€Π΅Π΄ΡˆΠ΅ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π·Π½Π°ΠΊ Ρ…Π΅ΡˆΠ° Β«#Β». НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ использования ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½Ρ‹Ρ… ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ.

ЦвСтШСстнадцатСричный Ρ†Π²Π΅Ρ‚
Π‘Π΅Π»Ρ‹ΠΉ#FFFFFF
Π§Π΅Ρ€Π½Ρ‹ΠΉ#000000
ΠšΡ€Π°ΡΠ½Ρ‹ΠΉ#FF0000
Π›Π°ΠΉΠΌΠ°#00FF00
Π‘ΠΈΠ½ΠΈΠΉ#0000FF
Π–Π΅Π»Ρ‚Ρ‹ΠΉ#FFFF00
ΠœΠΎΡ€ΡΠΊΠ°Ρ Π²ΠΎΠ»Π½Π°#00FFFF
Ѐуксия#FF00FF

Π¦Π²Π΅Ρ‚Π° CSS β€” ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠ΅ ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½Ρ‹Π΅ ΠΊΠΎΠ΄Ρ‹

ΠšΠΎΡ€ΠΎΡ‚ΠΊΠΈΠΉ ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ Ρ†Π²Π΅Ρ‚Π° β€” это Π±ΠΎΠ»Π΅Π΅ короткая Ρ„ΠΎΡ€ΠΌΠ° ΡˆΠ΅ΡΡ‚ΠΈΠ·Π½Π°Ρ‡Π½ΠΎΠΉ Π½ΠΎΡ‚Π°Ρ†ΠΈΠΈ. Π’ этом Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ каТдая Ρ†ΠΈΡ„Ρ€Π° повторяСтся, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ эквивалСнтноС ΡˆΠ΅ΡΡ‚ΠΈΠ·Π½Π°Ρ‡Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π°. НапримСр: #0F0 становится #00FF00.

ШСстнадцатСричноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ взято ΠΈΠ· любого графичСского ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния, Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Adobe Photoshop, Core Draw ΠΈ Π΄Ρ€.

ΠšΠ°ΠΆΠ΄ΠΎΠΌΡƒ ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½ΠΎΠΌΡƒ ΠΊΠΎΠ΄Ρƒ Ρ†Π²Π΅Ρ‚Π° Π² CSS Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€Π΅Π΄ΡˆΠ΅ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π·Π½Π°ΠΊ Ρ…Π΅ΡˆΠ° Β«#Β». НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ использования ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½Ρ‹Ρ… ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ.

ЦвСтШСстнадцатСричный Ρ†Π²Π΅Ρ‚
Π‘Π΅Π»Ρ‹ΠΉ#FFF
Π§Π΅Ρ€Π½Ρ‹ΠΉ#000
ΠšΡ€Π°ΡΠ½Ρ‹ΠΉ#F00
Π›Π°ΠΉΠΌΠ°#0F0
Π‘ΠΈΠ½ΠΈΠΉ#00F
Π–Π΅Π»Ρ‚Ρ‹ΠΉ#FF0
ΠœΠΎΡ€ΡΠΊΠ°Ρ Π²ΠΎΠ»Π½Π°#0FF
Ѐуксия#F0F

Π¦Π²Π΅Ρ‚Π° CSS β€” RGB значСния

RGB Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ β€” это ΠΊΠΎΠ΄ Ρ†Π²Π΅Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ задаСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства rgb(). Π­Ρ‚ΠΎ свойство ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Ρ‚Ρ€ΠΈ значСния: ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΌΡƒ для красного, Π·Π΅Π»Π΅Π½ΠΎΠ³ΠΎ ΠΈ синСго. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ†Π΅Π»Ρ‹ΠΌ числом, ΠΎΡ‚ 0 Π΄ΠΎ 255, ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ΠΎΠΌ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π½Π΅ всС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ свойство rgb() Ρ†Π²Π΅Ρ‚Π°, поэтому Π½Π΅ рСкомСндуСтся Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.

НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ нСсколько Ρ†Π²Π΅Ρ‚ΠΎΠ² с использованиСм Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ RGB.

ЦвСтШСстнадцатСричный Ρ†Π²Π΅Ρ‚
Π‘Π΅Π»Ρ‹ΠΉrgb(255, 255, 255)
Π§Π΅Ρ€Π½Ρ‹ΠΉrgb(0, 0, 0)
ΠšΡ€Π°ΡΠ½Ρ‹ΠΉrgb(255, 0, 0)
Π›Π°ΠΉΠΌΠ°rgb(0, 255, 0)
Π‘ΠΈΠ½ΠΈΠΉrgb(0, 0, 255)
Π–Π΅Π»Ρ‚Ρ‹ΠΉrgb(255, 255, 0)
ΠœΠΎΡ€ΡΠΊΠ°Ρ Π²ΠΎΠ»Π½Π°rgb(0, 255, 255)
Ѐуксияrgb(255, 0, 255)

Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Ρ… ΠΊΠΎΠ΄ΠΎΠ²

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΌΠΈΠ»Π»ΠΈΠΎΠ½Ρ‹ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Ρ… ΠΊΠΎΠ΄ΠΎΠ² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ нашСго сСрвиса CSS Ρ†Π²Π΅Ρ‚Π° ΠΎΠ½Π»Π°ΠΉΠ½.

БСзопасныС Ρ†Π²Π΅Ρ‚Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°

НиТС прСдставлСна Ρ‚Π°Π±Π»ΠΈΡ†Π° ΠΈΠ· 216 Ρ†Π²Π΅Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ бСзопасныС ΠΈ нСзависимыС ΠΎΡ‚ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°. Π­Ρ‚ΠΈ Ρ†Π²Π΅Ρ‚Π° Π² CSS Π²Π°Ρ€ΡŒΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΎΡ‚ 000000 Π΄ΠΎ FFFFFF ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°. Они бСзопасны Π² использовании, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΡƒΡŽΡ‚, Ρ‡Ρ‚ΠΎ всС ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с 256 Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ ΠΏΠ°Π»ΠΈΡ‚Ρ€ΠΎΠΉ.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

ВСория Ρ†Π²Π΅Ρ‚Π° Π² Ρ†ΠΈΡ„Ρ€Π°Ρ…

Π Π°Π·Π½Ρ‹Π΅ люди ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅ Ρ†Π²Π΅Ρ‚ ΠΏΠΎ Π΅Π³ΠΎ названию. НапримСр Π³ΠΎΠ»ΡƒΠ±ΠΎΠΉ Ρ†Π²Π΅Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π° самом Π΄Π΅Π»Π΅ Π±Ρ‹Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ΠΎΠΌ морской Π²ΠΎΠ»Π½Ρ‹ ΠΈΠ»ΠΈ нСбСсным. Π“ΠΎΡ€Π°Π·Π΄ΠΎ Ρ‚ΠΎΡ‡Π½Π΅Π΅ Ρ†Π²Π΅Ρ‚ опрСдСляСтся ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½Ρ‹ΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, всСго сущСствуСт 16777216 ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΠΉ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρƒ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Ρ€Π°ΡΠΏΠΎΠ·Π½Π°Π²Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚, просто взглянув Π½Π° Π΅Π³ΠΎ hex-ΠΊΠΎΠ΄.

ΠžΡΠ½ΠΎΠ²Ρ‹

НачнСм с простого: рассмотрим ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ hex-ΠΊΠΎΠ΄, Π³Π΄Π΅ каТдая ΠΈΠ· Ρ‚Ρ€Π΅Ρ… ΠΏΠ°Ρ€ Ρ†ΠΈΡ„Ρ€ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Ρ†Π²Π΅Ρ‚ΠΎΠ² RGB β€” красный, Π·Π΅Π»Π΅Π½Ρ‹ΠΉ, синий. Числа ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ значСния Ρ†ΠΈΡ„Ρ€ ΠΎΡ‚ 0 Π΄ΠΎ 9 ΠΈ Π±ΡƒΠΊΠ² ΠΎΡ‚ A Π΄ΠΎ F.

ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄. image loader. ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€ Ρ†Π²Π΅Ρ‚ΠΎΠ² Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ пСрСвСсти Ρ†Π²Π΅Ρ‚ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠΉ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ Π² ряд Π΄Ρ€ΡƒΠ³ΠΈΡ….

ΠΠ°ΡΡ‹Ρ‰Π΅Π½Π½ΠΎΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚Π° зависит ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, насколько Ρ€Π°Π·Π½Ρ‹Π΅ Π² ΠΏΠ°Ρ€Π°Ρ… числа. Π§Π΅ΠΌ большС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠ°Ρ€, Ρ‚Π΅ΠΌ свСтлСС Ρ†Π²Π΅Ρ‚. Вторая Ρ†ΠΈΡ„Ρ€Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΏΠ°Ρ€Ρ‹ уточняСт ΠΎΡ‚Ρ‚Π΅Π½ΠΎΠΊ:

ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄. image loader. ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€ Ρ†Π²Π΅Ρ‚ΠΎΠ² Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ пСрСвСсти Ρ†Π²Π΅Ρ‚ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠΉ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ Π² ряд Π΄Ρ€ΡƒΠ³ΠΈΡ….

Π’ΠΎ Π΅ΡΡ‚ΡŒ Π²Π΅Π»ΠΈΡ‡ΠΈΠ½Π° чисСл Π² ΠΏΠ°Ρ€Π°Ρ… ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ количСство Ρ†Π²Π΅Ρ‚Π°, ΠΏΡ€ΠΎΡ‰Π΅ говоря, Ссли всС числа ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹Π΅, Ρ‚ΠΎ Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π±Π΅Π»Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ β€” #FFFFFF, Ссли числа ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹Π΅, Π½ΡƒΠ»ΠΈ, Ρ‚ΠΎ Ρ†Π²Π΅Ρ‚Π° Π½Π΅Ρ‚, получаСтся Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ β€” #000000. Если ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ ΠΏΠ°Ρ€Ρƒ, Ρ‚ΠΎ получаСтся: #FF0000 β€” самый яркий красный, #00FF00 β€” самый яркий Π·Π΅Π»Π΅Π½Ρ‹ΠΉ ΠΈ #0000FF β€” самый яркий синий. БоотвСтствСнно, #00FFFF β€” самый яркий Π³ΠΎΠ»ΡƒΠ±ΠΎΠΉ, #FF00FF β€” самый яркий ΠΏΡƒΡ€ΠΏΡƒΡ€Π½Ρ‹ΠΉ ΠΈ #FFFF00 β€” самый яркий ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ.

ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄. image loader. ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€ Ρ†Π²Π΅Ρ‚ΠΎΠ² Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ пСрСвСсти Ρ†Π²Π΅Ρ‚ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠΉ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ Π² ряд Π΄Ρ€ΡƒΠ³ΠΈΡ….

РаспознаваниС Ρ†Π²Π΅Ρ‚Π°

ШСстнадцатСричный ΠΊΠΎΠ΄ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ сокращСн с ΡˆΠ΅ΡΡ‚ΠΈ символов Π΄ΠΎ Ρ‚Ρ€Π΅Ρ…. НапримСр Ρ†Π²Π΅Ρ‚ #FAE ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ #FFAAEE. Вакая Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΈΠ½ΠΎΠ³Π΄Π° ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄, ΠΈ Ρ‡Ρ‚ΠΎ Π²Π°ΠΆΠ½Π΅Π΅, Π»Π΅Π³ΠΊΠΎ ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ количСство ΠΎΡ‚Ρ‚Π΅Π½ΠΊΠΎΠ², Ссли это трСбуСтся.

Π’ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв Ρ€Π°ΡΠΏΠΎΠ·Π½Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΏΠΎ hex-ΠΊΠΎΠ΄Ρƒ ΠΌΠΎΠΆΠ½ΠΎ, учитывая Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠ΅Ρ€Π²Ρ‹Π΅ Ρ†ΠΈΡ„Ρ€Ρ‹ ΠΏΠ°Ρ€. Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π½ΠΈΠΆΠ΅ понятно, Ρ‡Ρ‚ΠΎ Ρ†Π²Π΅Ρ‚ смСшан ΠΈΠ· большого количСства красного, Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ синСго, Π° Π·Π΅Π»Π΅Π½ΠΎΠ³ΠΎ совсСм Π½Π΅Ρ‚.

ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄. image loader. ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€ Ρ†Π²Π΅Ρ‚ΠΎΠ² Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ пСрСвСсти Ρ†Π²Π΅Ρ‚ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠΉ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ Π² ряд Π΄Ρ€ΡƒΠ³ΠΈΡ….

ПониманиС Ρ†Π²Π΅Ρ‚Π° ΠΏΠΎ hex-ΠΊΠΎΠ΄Ρƒ позволяСт Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρƒ быстрСС ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² ΠΊΠΎΠ΄Π΅ страницы, ΠΊΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ всСгда произвСсти Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅ Π½Π° ΠΊΠΎΠ»Π»Π΅Π³ ΠΈΠ»ΠΈ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ², сказав «Ах, ΠΊΠ°ΠΊΠΎΠΉ прСкрасный ΠΎΡ‚Ρ‚Π΅Π½ΠΎΠΊ Π±ΠΎΡ€Π΄ΠΎΠ²ΠΎΠ³ΠΎΒ».

МоТно Ρ‚Π°ΠΊΠΆΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΌΠ΅Π½ΡΡ‚ΡŒ ΡΡ€ΠΊΠΎΡΡ‚ΡŒ, ΠΎΡ‚Ρ‚Π΅Π½ΠΎΠΊ ΠΈΠ»ΠΈ Π½Π°ΡΡ‹Ρ‰Π΅Π½Π½ΠΎΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚Π°, ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π² лишь Π΅Π³ΠΎ ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½Ρ‹ΠΉ ΠΊΠΎΠ΄. Π’ ΠΏΠ΅Ρ€Π²ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π½ΠΈΠΆΠ΅ ΠΎΠ΄Π½Π° ΠΈΠ· ΠΏΠ°Ρ€ мСняСтся с шагом Π² 10%, ΠΏΡ€ΠΈ этом растСт ΡΡ€ΠΊΠΎΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚Π°. Π’ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΡΡ€ΠΊΠΎΡΡ‚ΡŒ растСт, Π½ΠΎ Π½Π°ΡΡ‹Ρ‰Π΅Π½Π½ΠΎΡΡ‚ΡŒ ΠΏΠ°Π΄Π°Π΅Ρ‚:

ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄. image loader. ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€ Ρ†Π²Π΅Ρ‚ΠΎΠ² Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ пСрСвСсти Ρ†Π²Π΅Ρ‚ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠΉ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ Π² ряд Π΄Ρ€ΡƒΠ³ΠΈΡ….

ΠŸΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ссылок

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°ΡŽΡ‚ гипСрссылки Π½Π° Π²Π΅Π±-страницах. ΠŸΡ€ΠΈ использовании Π½Π΅ слишком ΠΊΡ€ΡƒΠΏΠ½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΌΠ΅ΡˆΠΈΠ²Π°Ρ‚ΡŒΡΡ с Π±ΡƒΠΊΠ²Π°ΠΌΠΈ ссылки, ΠΈ выглядит такая конструкция Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ. Но ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΌΠ΅Π½Π΅Π΅ насыщСнным:

ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄. image loader. ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€ Ρ†Π²Π΅Ρ‚ΠΎΠ² Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ пСрСвСсти Ρ†Π²Π΅Ρ‚ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠΉ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ Π² ряд Π΄Ρ€ΡƒΠ³ΠΈΡ….

ΠŸΠΎΠ»ΡƒΡ‡ΠΈΠ²ΡˆΠΈΠ΅ΡΡ ссылки Π»Π΅Π³Ρ‡Π΅ Ρ‡ΠΈΡ‚Π°ΡŽΡ‚ΡΡ, Ρ‚.ΠΊ. ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Π½Π΅ ΡΠΌΠ΅ΡˆΠΈΠ²Π°Π΅Ρ‚ΡΡ с символами. Однако Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ span Π² ΠΊΠ°ΠΆΠ΄ΡƒΡŽ ссылку Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ Ρ€Π°Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ссылок, Π½ΠΎ ΠΏΡ€ΠΈ этом Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ border-bottom:

Π¦Π²Π΅Ρ‚Π° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°

Π—Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ Π½Π° сайтах ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅ Ρ†Π²Π΅Ρ‚ для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΈ основного тСкста. Но ΠΏΡ€ΠΈ Ρ‚Π°ΠΊΠΎΠΌ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π΅ сниТаСтся Ρ‡ΠΈΡ‚Π°Π±Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°: Ρ‡Π΅ΠΌ ΠΌΠ΅Π»ΡŒΡ‡Π΅ ΡˆΡ€ΠΈΡ„Ρ‚, Ρ‚Π΅ΠΌ контрастнСС ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ. ΠŸΡ€ΠΈΠΌΠ΅Ρ€:

ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄. image loader. ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€ Ρ†Π²Π΅Ρ‚ΠΎΠ² Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ пСрСвСсти Ρ†Π²Π΅Ρ‚ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠΉ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ Π² ряд Π΄Ρ€ΡƒΠ³ΠΈΡ….

УмСньшСниС ΠΏΠ΅Ρ€Π²Ρ‹Ρ… Ρ†ΠΈΡ„Ρ€ Π² ΠΏΠ°Ρ€Π°Ρ… hex-ΠΊΠΎΠ΄Π° повысит ΠΊΠΎΠ½Ρ‚Ρ€Π°ΡΡ‚Π½ΠΎΡΡ‚ΡŒ тСкста, Π° Π·Π½Π°Ρ‡ΠΈΡ‚ Ρ‡ΠΈΡ‚Π°Π±Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡΡ:

ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄. image loader. ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€ Ρ†Π²Π΅Ρ‚ΠΎΠ² Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ пСрСвСсти Ρ†Π²Π΅Ρ‚ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠΉ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ Π² ряд Π΄Ρ€ΡƒΠ³ΠΈΡ….

Π Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π°

Π›Π΅Π³ΠΊΠΎ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠΌ, измСняя hex-ΠΊΠΎΠ΄ Ρ†Π²Π΅Ρ‚Π°:

Π€ΠΎΠ½ страницы Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ Π±ΠΎΠ»Π΅Π΅ чувствитСлСн ΠΊ измСнСниям Ρ†Π²Π΅Ρ‚Π°, Ρ‡Π΅ΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ Ρ‚Π΅ΠΏΠ»Π΅Π΅ ΠΈΠ»ΠΈ Ρ…ΠΎΠ»ΠΎΠ΄Π½Π΅Π΅, коррСктируя ΠΈ Π²Ρ‚ΠΎΡ€ΡƒΡŽ Ρ†ΠΈΡ„Ρ€Ρƒ Π² ΠΏΠ°Ρ€Π°Ρ… hex-ΠΊΠΎΠ΄Π°. НапримСр:

ΠŸΠΎΠ΄Π±ΠΎΡ€ ΠΈ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚ΠΎΠ²

ПониманиС структуры ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° Ρ†Π²Π΅Ρ‚ΠΎΠ² Π΄Π°Π΅Ρ‚ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρƒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ‚ΠΎΡ‡Π½ΠΎ ΠΏΠΎΠ΄Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΠΈ Ρ†Π²Π΅Ρ‚ΠΎΠ² ΠΈ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Π΅ схСмы. Бамая простая Ρ‚Π΅Ρ…Π½ΠΈΠΊΠ° β€” это ΠΏΠ΅Ρ€Π΅ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΎΠ΄Π½Ρƒ ΠΏΠ°Ρ€Ρƒ Π² Ρ€Π°Π·Π½Ρ‹Π΅ мСста ΠΊΠΎΠ΄Π°. Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ способ β€” ΡƒΠ΄Π²ΠΎΠ΅Π½ΠΈΠ΅ ΠΏΠ΅Ρ€Π²ΠΎΠΉ Ρ†ΠΈΡ„Ρ€Ρ‹ Π² ΠΏΠ΅Ρ€Π²ΠΎΠΉ ΠΏΠ°Ρ€Π΅ ΠΈ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π½Π° Π΄Π²Π° ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΠ΅Ρ€Π²Ρ‹Ρ… Ρ†ΠΈΡ„Ρ€. Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚Π°, взятыС ΠΈΠ· Ρ„ΠΎΡ‚ΠΎ. ΠžΠΏΠΈΡΠ°Π½Π½Ρ‹Π΅ способы наглядно продСмонстрированы Π½Π° рисункС Π½ΠΈΠΆΠ΅:

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Π¦Π²Π΅Ρ‚Π° HTML

ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄. html colors. ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄-html colors. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ hex ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° html colors. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€ Ρ†Π²Π΅Ρ‚ΠΎΠ² Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ пСрСвСсти Ρ†Π²Π΅Ρ‚ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠΉ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ Π² ряд Π΄Ρ€ΡƒΠ³ΠΈΡ….

Одной ΠΈΠ· ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΡ… прСдставлСния Π²Π΅Π±-страниц Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ являСтся Ρ†Π²Π΅Ρ‚, соврСмСнныС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°ΡŽΡ‚ ΠΈ воспроизводят Π΅Π³ΠΎ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Π΅ ΠΌΠΎΠ΄Π΅Π»ΠΈ RGB, HSL, ΠΈΠ»ΠΈ ΠΆΠ΅ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова (названия).

ЗначСния Ρ†Π²Π΅Ρ‚Π° Π² HTML ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π·Π°Π΄Π°Π½ΠΎ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… способов.

ИмСна Ρ†Π²Π΅Ρ‚ΠΎΠ² CSS, SVG.

Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Html, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ стандартными ΡΠ²Π»ΡΡŽΡ‚ΡΡ 16 Ρ†Π²Π΅Ρ‚ΠΎΠ², спСцификации CSS ΠΈ SVG, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ Π±ΠΎΠ»Π΅Π΅ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹ΠΉ список ΠΈΠΌΠ΅Π½, состоящий ΠΈΠ· 147 Π½Π°Π·Π²Π°Π½ΠΈΠΉ. Однако, нСсмотря Π½Π° Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ Π² спискС сто сорока сСми Π½Π°ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΠΉ, ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ значСния ΠΈΠΌΠ΅ΡŽΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ 138, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ всС сСрыС Ρ†Π²Π΅Ρ‚Π° ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΡƒΠΊΠ°Π·Π°Π½Ρ‹ ΠΊΠ°ΠΊ Ρ‡Π΅Ρ€Π΅Π· «a», Ρ‚Π°ΠΊ ΠΈ Ρ‡Π΅Ρ€Π΅Π· «e» (grAy ΠΈΠ»ΠΈ grEy), Π° fuchsia ΠΈ aqua ΠΈΠΌΠ΅ΡŽΡ‚ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΈΠΌΠ΅Π½Π°: magenta ΠΈ cyan соотвСтствСнно (послСдниС Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ HTML 4.01).

ΠŸΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Π°Ρ Π½ΠΈΠΆΠ΅ Ρ‚Π°Π±Π»ΠΈΡ†Π° прСдставляСт ΠΈΠΌΠ΅Π½Π° Ρ†Π²Π΅Ρ‚ΠΎΠ² ΠΈ ΠΈΡ… значСния Π² HSL ΠΈ HEX. ΠŸΡ€ΠΈ использовании ΠΈΠΌΠ΅Π½, слСдуСт ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ синтаксис SVG отличаСтся ΠΎΡ‚ HTML ΠΈ CSS: Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ fill, ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, примСняСтся ΠΊΠ°ΠΊ ΠΊ Ρ†Π²Π΅Ρ‚Ρƒ тСкста (color), Ρ‚Π°ΠΊ ΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° (background-color), Π° stroke ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для задания ΠΊΠΎΠ½Ρ‚ΡƒΡ€Π° (ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ) элСмСнта.

ИмяR G BH S L
white#ffffffhex0Β°, 0%, 100%
ivory#fffff0hex60Β°, 100%, 97%
lightyellow#ffffe0hex60Β°, 100%, 94%
yellow#ffff00hex60Β°, 100%, 50%
snow#fffafahex0Β°, 100%, 99%
floralwhite#fffaf0hex40Β°, 100%, 97%
lemonchiffon#fffacdhex54Β°, 100%, 90%
cornsilk#fff8dchex48Β°, 100%, 93%
seashell#fff5eehex25Β°, 100%, 97%
lavenderblush#fff0f5hex340Β°, 100%, 97%
papayawhip#ffefd5hex37Β°, 100%, 92%
blanchedalmond#ffebcdhex36Β°, 100%, 90%
mistyrose#ffe4e1hex6Β°, 100%, 94%
bisque#ffe4c4hex33Β°, 100%, 88%
moccasin#ffe4b5hex38Β°, 100%, 86%
navajowhite#ffdeadhex36Β°, 100%, 84%
peachpuff#ffdab9hex28Β°, 27%, 100%
gold#ffd700hex51Β°, 100%, 50%
pink#ffc0cbhex350Β°, 100%, 88%
lightpink#ffb6c1hex351Β°, 100%, 86%
orange#ffa500hex39Β°, 100%, 50%
lightsalmon#ffa07ahex17Β°, 100%, 74%
darkorange#ff8c00hex33Β°, 100%, 50%
coral#ff7f50hex16Β°, 100%, 66%
hotpink#ff69b4hex330Β°, 100%, 71%
tomato#ff6347hex9Β°, 100%, 64%
orangered#ff4500hex16Β°, 100%, 50%
deeppink#ff1493hex328Β°, 100%, 54%
magenta, fuchsia#ff00ffhex300Β°, 100%, 50%
red#ff0000hex0Β°, 100%, 50%
oldlace#fdf5e6hex39Β°, 85%, 95%
lightgoldenrodyellow#fafad2hex60Β°, 80%, 90%
linen#faf0e6hex30Β°, 67%, 94%
antiquewhite#faebd7hex34Β°, 78%, 91%
salmon#fa8072hex6Β°, 93%, 71%
ghostwhite#f8f8ffhex240Β°, 100%, 99%
mintcream#f5fffahex150Β°, 100%, 98%
whitesmoke#f5f5f5hex0Β°, 0%, 96%
beige#f5f5dchex60Β°, 56%, 91%
wheat#f5deb3hex39Β°, 77%, 83%
sandybrown#f4a460hex28Β°, 87%, 67%
azure#f0ffffhex180Β°, 100%, 97%
honeydew#f0fff0hex120Β°, 100%, 97%
aliceblue#f0f8ffhex208Β°, 100%, 97%
khaki#f0e68chex54Β°, 77%, 75%
lightcoral#f08080hex0Β°, 79%, 72%
palegoldenrod#eee8aahex55Β°, 67%, 80%
violet#ee82eehex300Β°, 76%, 72%
darksalmon#e9967ahex15Β°, 72%, 70%
lavender#e6e6fahex240Β°, 67%, 94%
lightcyan#e0ffffhex180Β°, 100%, 94%
burlywood#deb887hex34Β°, 57%, 70%
plum#dda0ddhex300Β°, 47%, 75%
gainsboro#dcdcdchex0Β°, 0%, 86%
crimson#dc143chex348Β°, 83%, 47%
palevioletred#db7093hex340Β°, 60%, 65%
goldenrod#daa520hex43Β°, 74%, 49%
orchid#da70d6hex302Β°, 59%, 65%
thistle#d8bfd8hex300Β°, 24%, 80%
lightgray, lightgrey#d3d3d3hex0Β°, 0%, 83%
tan#d2b48chex34Β°, 44%, 67%
chocolate#d2691ehex25Β°, 75%, 47%
peru#cd853fhex30Β°, 59%, 53%
indianred#cd5c5chex0Β°, 53%, 58%
mediumvioletred#c71585hex322Β°, 81%, 43%
silver#c0c0c0hex0Β°, 0%, 75%
darkkhaki#bdb76bhex56Β°, 38%, 58%
rosybrown#bc8f8fhex0Β°, 25%, 65%
mediumorchid#ba55d3hex288Β°, 59%, 58%
darkgoldenrod#b8860bhex43Β°, 89%, 38%
firebrick#b22222hex0Β°, 68%, 42%
powderblue#b0e0e6hex187Β°, 52%, 80%
lightsteelblue#b0c4dehex214Β°, 41%, 78%
paleturquoise#afeeeehex180Β°, 65%, 81%
greenyellow#adff2fhex84Β°, 100%, 59%
lightblue#add8e6hex195Β°, 53%, 79%
darkgray, darkgrey#a9a9a9hex0Β°, 0%, 66%
brown#a52a2ahex0Β°, 59%, 41%
sienna#a0522dhex19Β°, 56%, 40%
yellowgreen#9acd32hex80Β°, 61%, 50%
darkorchid#9932cchex280Β°, 61%, 50%
palegreen#98fb98hex120Β°, 93%, 79%
darkviolet#9400d3hex282Β°, 100%, 41%
mediumpurple#9370dbhex260Β°, 60%, 65%
lightgreen#90ee90hex120Β°, 73%, 75%
darkseagreen#8fbc8fhex120Β°, 25%, 65%
saddlebrown#8b4513hex25Β°, 76%, 31%
darkmagenta#8b008bhex300Β°, 100%, 27%
darkred#8b0000hex0Β°, 100%, 27%
blueviolet#8a2be2hex271Β°, 76%, 53%
lightskyblue#87cefahex203Β°, 92%, 76%
skyblue#87ceebhex197Β°, 71%, 73%
gray, grey#808080hex0Β°, 0%, 50%
olive#808000hex60Β°, 100%, 25%
purple#800080hex300Β°, 100%, 25%
maroon#800000hex0Β°, 100%, 25%
aquamarine#7fffd4hex160Β°, 100%, 75%
chartreuse#7fff00hex90Β°, 100%, 50%
lawngreen#7cfc00hex91Β°, 100%, 4%
mediumslateblue#7b68eehex249Β°, 80%, 67%
lightslategray, lightslategrey#778899hex210Β°, 14%, 53%
slategray ΠΈΠ»ΠΈ slategrey#708090hex210Β°, 13%, 50%
olivedrab#6b8e23hex80Β°, 61%, 35%
slateblue#6a5acdhex248Β°, 54%, 58%
dimgray, dimgrey#696969hex0Β°, 0%, 41%
mediumaquamarine#66cdaahex160Β°, 51%, 60%
rebeccapurple#663399hex270Β°, 50%, 40%
cornflowerblue#6495edhex219Β°, 79%, 66%
cadetblue#5f9ea0hex182Β°, 26%, 50%
darkolivegreen#556b2fhex82Β°, 39%, 30%
indigo#4b0082hex275Β°, 100%, 26%
mediumturquoise#48d1cchex178Β°, 60%, 55%
darkslateblue#483d8bhex249Β°, 39%, 39%
steelblue#4682b4hex207Β°, 44%, 49%
royalblue#4169e1hex225Β°, 73%, 57%
turquoise#40e0d0hex174Β°, 72%, 57%
mediumseagreen#3cb371hex147Β°, 50%, 47%
limegreen#32cd32hex120Β°, 61%, 50%
darkslategray, darkslategrey#2f4f4fhex180Β°, 25%, 25%
seagreen#2e8b57hex147Β°, 50%, 36%
forestgreen#228b22hex120Β°, 61%, 34%
lightseagreen#20b2aahex177Β°, 70%, 41%
dodgerblue#1e90ffhex210Β°, 100%, 56%
midnightblue#191970hex240Β°, 64%, 27%
aqua, cyan#00ffffhex180Β°, 100%, 50%
springgreen#00ff7fhex150Β°, 100%, 50%
lime#00ff00hex120Β°, 100%, 50%
mediumspringgreen#00fa9ahex157Β°, 100%, 49%
darkturquoise#00ced1hex181Β°, 100%, 41%
deepskyblue#00bfffhex195Β°, 100%, 50%
darkcyan#008b8bhex180Β°, 100%, 27%
teal#008080hex180Β°, 100%, 25%
green#008000hex120Β°, 100%, 25%
darkgreen#006400hex120Β°, 100%, 20%
blue#0000ffhex240Β°, 100%, 50%
mediumblue#0000cdhex240Β°, 100%, 40%
darkblue#00008bhex240Β°, 100%, 27%
navy#000080hex240Β°, 100%, 25%
black#000000hex0Β°, 0%, 0%

Для получСния ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ†Π²Π΅Ρ‚Π°Ρ… ΠΈ значСниях Π² HEX, HEX8, RGB, RGB%, CMYK, HSL, HSV Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ΡΡŒ ΠΊΠ°Π»ΡŒΠΊΡƒΠ»ΡΡ‚ΠΎΡ€ΠΎΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠ².

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *