RGB мәнін HEX мәніне түрлендіргіш

RGB және HEX түрлендіру: негізгі принциптер

Бұл беттің міндеті – қызыл, жасыл және көк арналарының мәндерін (әрқайсысы 0 мен 255 аралығындағы бүтін сан) енгізіп, сол сәтте олардың баламалы алты таңбалы он алтылық (hexadecimal) түс кодын алу. Мысалы, 79, 70, 229 енгізсеңіз, #4F46E5 шығады. Бұл жай ғана конвертер емес: түсті көрнекі түрде де көрсетеді, әрі HSL, HSV, CMYK, LAB және түс таңдағыш сияқты басқа да форматтарды бірден жаңартып отырады. Ешқандай «түрлендіру» батырмасы жоқ – бір өрісті өзгерткен бойда қалғандары автоматты түрде жаңарады.

Бұл беттің ең маңызды ерекшелігі – RGB (ондық, 0–255) пен hex (он алтылық, алты таңба) бірдей түс кеңістігін – қазіргі мониторлардың көпшілігі қолданатын sRGB – қамтиды. Сондықтан ешқандай кеңістік қысқаруы (gamut clipping) немесе жуықтау болмайды. Түрлендіру дәл және қайтымды. HEX шығысы әрдайым # таңбасымен басталады және альфа-арнасы жоқ (сегіз таңбалы нұсқаны қолданбасаңыз). Кіріс ретінде үш сан үтір немесе бос орын арқылы бөлініп беріледі (мысалы, 79, 70, 229).

RGB түс үлгісі – қоспалы түс және 0–255 шкаласы

RGB – ағылшын тіліндегі Red, Green, Blue (қызыл, жасыл, көк) сөздерінің бас әріптерінен құралған аббревиатура. Бұл аддитивті (қоспалы) түс үлгісі: монитор экранында әр пиксель шағын қызыл, жасыл және көк жарық көздерін (сәуле шығарғыш диодтар немесе сұйық кристалл жасушалары) қажетті қарқындылықта жандыру арқылы барлық басқа түстерді жасайды. Үш арнаның да максимум қарқындылығы (255, 255, 255) ақ түсті, ал минимумы (0, 0, 0) қара түсті береді.

Неліктен әр арна 0–255 диапазонымен жұмыс істейді? Бұл сегіз биттік сандық бейнелеуге негізделген. Компьютер графикасында әр түс арнасына 8 бит бөлінеді: 2^8 = 256 мүмкін мән. 0 ең күңгірт (жарық жоқ), 255 ең жарық. Бұл стандарт – sRGB кеңістігіндегі көптеген дисплейлер мен бағдарламалардың ортақ келісімі. sRGB – 1996 жылы Microsoft пен Hewlett-Packard компаниялары әзірлеген, интернетте және қарапайым мониторларда кеңінен қолданылатын түс кеңістігі.

Біздің құрал sRGB кеңістігінде жұмыс істейтіндіктен, RGB-ден HEX-ке түрлендіру кезінде ешқандай түс жоғалмайды. Мысалы, CSS-те rgb(79, 70, 229) деп жазылған түс дәл #4F46E5 кодына тең. Керісінше де солай – кез келген алты таңбалы hex кодты RGB үштігіне дәл айналдыруға болады.

HEX кодының құрылымы және оның ерекшеліктері

HEX (Hexadecimal) – он алтылық санау жүйесіндегі түс коды. Ол әрқашан # таңбасымен басталып, одан кейін алты он алтылық цифр (0–9 және A–F) келеді. Мысалы: #4F46E5. Алғашқы екі цифр (4F) – қызыл арнаның мәні, келесі екі цифр (46) – жасыл арнаның мәні, соңғы екі цифр (E5) – көк арнаның мәні.

Он алтылық жүйеде 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F символдары бар, мұнда A=10, B=11, C=12, D=13, E=14, F=15. Әрбір 0–255 аралығындағы ондық сан екі он алтылық цифрға дәл сәйкес келеді. Мысалы, 0 ондық → 00 он алтылық, 255 → FF, 128 → 80.

Кейде CSS-те үш таңбалы қысқартылған жазуды көруге болады: #abc бұл #aabbcc дегенді білдіреді. Біздің беттегі кіріс өрісі мұндай қысқартуды қабылдайды және оны автоматты түрде алты таңбалы нұсқаға кеңейтеді. Алайда шығыс әрдайым алты таңбалы болып қалады – #AABBCC түрінде, #ABC емес. Неге? Себебі қысқартылған жазба 16 миллион түстің шамамен 4000 ғана түсін қамтиды (шекаралық түстер ғана), ал алты таңбалы жазба толық 256³ = 16 777 216 түсті бейнелейді.

HEX коды альфа-арнаны (мөлдірлік) сақтамайды. Егер альфа қажет болса, сегіз таңбалы нұсқаны (мысалы, #4F46E5FF) пайдалану керек, бірақ бұл бет стандартты алты таңбалы нұсқаға бағытталған. HEX коды регистрге сезімтал емес: #4f46e5, #4F46E5 және #4F46e5 бірдей түсті көрсетеді, бірақ әдетте жоғарғы регистрді (A–F) қолдану дәстүрге айналған.

Математикалық түрлендіру: 0–255 мәнін HEX-ке айналдыру

Түрлендіру өте қарапайым: 0–255 аралығындағы әрбір ондық санды 16-ға бөліп, бүтін бөлігін және қалдықты аламыз. Бүтін бөлік бірінші он алтылық цифрды, қалдық екіншісін береді.

Мысалы, 79 ондық санын алайық:

• 79 ÷ 16 = 4 (бүтін бөлігі), қалдық 15.
• 4 он алтылық жүйеде 4 болып жазылады (4 < 10).
• 15 он алтылық жүйеде F болып жазылады.
• Демек, 79 → 4F.

Келесі 70:

• 70 ÷ 16 = 4 (бүтін бөлігі), қалдық 6.
• 4 → 4, 6 → 6.
• 70 → 46.

Соңғы 229:

• 229 ÷ 16 = 14 (бүтін бөлігі), қалдық 5.
• 14 → E, 5 → 5.
• 229 → E5.

Нәтижесінде: #4F46E5.

Төмендегі кестеде жиі кездесетін ондық мәндердің он алтылық баламалары көрсетілген:

Маңызды ескерту: егер бүтін бөлік 0-ден 9-ға дейін болса, ол сан түрінде жазылады; 10-нан 15-ке дейін болса, A-дан F-ке дейінгі әріптер қолданылады. Қалдық үшін де дәл солай. Осылайша әрбір RGB компоненті үшін әрқашан екі он алтылық цифр шығады – біріншісі 0–F, екіншісі 0–F аралығында.

Енгізу ережелері және қателіктер

Беттегі енгізу өрісі RGB мәндерін бірнеше форматта қабылдайды: сандарды үтірмен (79, 70, 229), бос орынмен (79 70 229) немесе екеуін араластырып (79, 70 229) бөлуге болады. Сандардың реті маңызды: бірінші – қызыл, екінші – жасыл, үшінші – көк.

Егер енгізу дұрыс болмаса (мысалы, үш сан емес, екі сан, немесе бір сан 0–255 диапазонынан асып кетсе), бетте келесі қате хабары көрсетіледі:
«Enter RGB as three numbers 0–255, like 79, 70, 229.»

Бұл хабарлама тек енгізу дұрыс болмағанда ғана пайда болады және дереу өңдеуді тоқтатады. Қатені түзеткен бойда барлық өрістер қалпына келеді. Ешқандай басқа ескерту немесе жанама қате жоқ – тек осы бір хабарлама.

Тағы бір ерекшелік: беттегі кез келген өрісті (HEX, HSL, HSV, т.б.) өзгерту арқылы да басқа өрістер жаңартылады. Яғни, сіз HEX өрісіне #abc деп теруге болады, ол бірден #AABBCC болып кеңейтіліп, RGB өрісіне сәйкес мәндер енгізіледі. Барлық өңдеу веб-шолғышыңыздың ішінде, серверге ештеңе жіберілмейді.

Кімге бұл бет пайдалы?

• Front-end әзірлеушілер – CSS стильдерінде түстерді HEX кодымен жазу қажет болғанда. Көбінесе дизайн макеттері RGB мәндерінде беріледі, ал стильдер парағында # түрінде жазу керек.
• UI/UX дизайнерлері – графикалық редакторлардан (Photoshop, GIMP, Sketch) RGB үштіктерін алып, оларды кодқа немесе дизайн құжаттамасына енгізу керек болғанда.
• Веб-активтермен жұмыс істейтін график дизайнерлері – түс тұрақтылығын қамтамасыз ету үшін.
• Студенттер мен әуесқойлар – түстердің сандық бейнеленуін түсіну және ондық пен он алтылық арасындағы байланысты үйрену үшін.
• Түс таңдағыштан RGB мәнін алатын кез келген адам (мысалы, браузердің әзірлеуші құралдарынан) – сол түсті HEX кодына айналдыру үшін.

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

Жиі қойылатын сұрақтар (FAQ)

1. Неге алты цифрлы код шығады, үш цифрлы емес?
Үш таңбалы қысқартылған жазба (#ABC) тек екінші реттік түстердің шағын жиынын бейнелейді және css стандарты бойынша үлкенірек түс кеңістігін қамтымайды. Біздің бет шығысы әрдайым алты таңбалы, себебі ол толық 256³ түсті дәл көрсетеді. Қысқартуды енгізуге болады, бірақ ол автоматты түрде кеңейтіледі.

2. Енгізуде қате туралы хабарлама көрінсе не істеу керек?
Тексеріңіз: 1) үш сан енгізілген бе? 2) әр сан 0 мен 255 аралығында ма? 3) сандар үтір немесе бос орын арқылы дұрыс бөлінген бе? Егер бәрі дұрыс болса, хабарлама жоғалады.

3. HEX коды регистрге сезімтал ма?
Жоқ. #4F46E5 және #4f46e5 бірдей түсті көрсетеді. Дегенмен, CSS файлдарында көбінесе жоғарғы регистр (A–F) қолданылады.

4. Бұл түрлендіру дәл ме?
Иә, толығымен дәл. RGB және HEX бірдей sRGB түс кеңістігін пайдаланады. 0–255 аралығындағы әрбір санның дәл бір ғана екі таңбалы он алтылық баламасы бар. Ешқандай жуықтау немесе жоғалту болмайды.

5. Мен rgb(79 70 229) синтаксисін енгізе аламын ба?
Жоқ, бет тек үш санды күтеді, олардың арасында бөлгіш ретінде үтір немесе бос орын. rgb(...) функциясын енгізу дұрыс танылмайды.

6. Неге альфа-арнасы (мөлдірлік) жоқ?
Стандартты алты таңбалы HEX кодында альфа болмайды. Егер альфа қажет болса, сегіз таңбалы нұсқаны пайдалану керек (мысалы, #4F46E5FF). Біздің бет тек алты таңбалы нұсқамен жұмыс істейді.