I-convert ang HEX sa RGB Hexadecimal ↔ Red Green Blue Libre Online Ligtas

Bakit mo kino-convert ang HEX sa RGB

Ibinibigay sa iyo ng design tool ang kulay bilang #5A4632. Hinihingi naman ito ng stylesheet, canvas script, chart library o graphics program bilang rgb(90, 70, 50). Iisang kulay ang mga ito, at ang paghahanap ng daan mula sa isang baybay tungo sa isa pa ay madalas na kailangan: naglilista ng mga hex code ang brand guide at kailangan ng code mo ang mga numero para kalkulahin ang mas maliwanag na shade, nagpapadala ang kliyente ng kulay mula sa logo at kailangan mong punan ang rgba() na may transparency, o tumatanggap lang ang library ng tatlong magkakahiwalay na halaga. Maliit na gawain ang pag-convert ng HEX sa RGB, at iniiligtas ka ng maaasahang converter sa aritmetika sa base labing-anim sa isip na maaari mong magkamali.

Eksakto ang conversion, na hindi totoo sa bawat conversion ng kulay. Ang hex at rgb() ay dalawang baybay ng parehong tatlong numero, ang dami ng pula, berde at asul na liwanag na dapat ilabas ng screen, bawat isa mula 0 hanggang 255. Walang tinatantya, at ibinabalik ng round trip ang pinagsimulan. Ginagawa ito ng pahinang ito sa iyong browser, at walang ina-upload. Sa ibaba makikita mo kung paano nagma-map ang mga hex digit sa tatlong numero, paano dinadala ang transparency, ano ang ginagawa ng shorthand na anyo, ang mga limitasyon ng sRGB, at ang mga sitwasyong kailangan ng mga developer at designer na i-convert ang HEX sa RGB.

Paano gumagana ang conversion

Ang tatlong pares ng digit ay nagiging tatlong numero

Ang hex na kulay ay hash sign na sinusundan ng anim na hexadecimal digit, na binabasa nang magkakapares: ang unang pares ay pula, ang pangalawa ay berde, ang pangatlo ay asul. Ang bawat pares ay numero sa base labing-anim sa pagitan ng 00 at FF, na 0 hanggang 255 sa decimal system na ginagamit mo araw-araw. Kaya ang #5A4632 ay nahahati sa 5A, 46 at 32. Ang 5A ay 5 × 16 + 10 = 90, ang 46 ay 4 × 16 + 6 = 70, at ang 32 ay 3 × 16 + 2 = 50. Ang kulay ay rgb(90, 70, 50), na siyang halimbawang pinagsimulan ng pahina.

Bakit mula 0 hanggang F ang mga digit

Nangangailangan ang base labing-anim ng labing-anim na simbolo, kaya pagkatapos ng 9 ay dumarating ang mga letrang A hanggang F, na kumakatawan sa 10 hanggang 15. Ang pares ng ganoong mga digit ay nagbibigay ng 16 × 16 = 256 na halaga, eksaktong kayang hawakan ng isang byte. Ang kulay sa screen ay tatlong byte, at ang hex ay siksik na paraan lang ng pagsulat ng mga ito: anim na karakter sa halip na tatlong numerong may kuwit at panaklong.

Malaki at maliit na titik

Iisang kulay ang #5a4632 at #5A4632. Tinatanggap ng CSS ang alinman, at ganoon din ang converter na ito. Pumili ng isang kumbensyon para sa proyekto at manatili rito, dahil mas nagpapahirap sa paghahanap sa stylesheet ang halo-halong titik.

Ang pinananatili ng conversion at ang hindi nito kaya

Pinananatili nito ang kulay, nang eksakto

Ang hex at rgb() ay dalawang baybay ng parehong tatlong numero, 0 hanggang 255 para sa pula, berde at asul, kaya walang tinatantya at ibinabalik ng round trip ang pinagsimulan. I-convert ang HEX sa RGB at bumalik, at makukuha mo ang parehong code na sinimulan mo, maliban na lang sa posibleng mga malalaking titik.

Dinadala nito ang transparency

Dinadala rin ang ikaapat na halaga para sa transparency: ang #RRGGBBAA ay nagiging rgba(), at pabalik. Ang huling pares ang alpha channel, mula 00, ganap na transparent, hanggang FF, ganap na opaque. Kaya ang #5A463280 ay rgba(90, 70, 50, 0.5), dahil ang 80 sa hex ay 128, at ang 128 sa 255 ay halos kalahati. Tinatanggap ng lahat ng kasalukuyang browser ang walong digit.

Hindi nito mailalarawan ang mga kulay sa labas ng sRGB

Parehong inilalarawan ng dalawang baybay ang sRGB, ang color space na ginagamit ng screen sa loob ng tatlumpung taon. Hindi nila mailalarawan ang kulay sa labas nito, na dahilan kung bakit umiiral ang mas bagong mga notasyon ng CSS, ang lab(), oklch() at color(). Kaya ng mga modernong display na magpakita ng mas matingkad na kulay kaysa sa kaya ng sRGB, at ang designer na pumili ng ganoong kulay sa wide-gamut na tool ay makikitang pinutol ito sa sRGB kapag isinulat bilang hex.

Pinalalawak ang shorthand, hindi pinananatili

Pinalalawak ang shorthand sa halip na panatilihin: ang #abc ay bumabalik bilang #AABBCC, na iisang kulay na isinulat sa mahabang paraan. Dinodoble ang bawat digit. Nangangahulugan iyon na maaari kang mag-paste ng code na may tatlong digit at makuha ang tamang mga numero, ngunit hindi mo mababawi ang maikling baybay mula sa mahaba sa pagtingin lang, kundi sa pagsuri na umuulit ang bawat pares.

Mga karaniwang kulay at ang mga numero nila

Ilang dapat tandaan

Ang puti ay #FFFFFF, na rgb(255, 255, 255): lahat ng tatlong ilaw sa buong lakas. Ang itim ay #000000, rgb(0, 0, 0): walang liwanag. Ang purong pula ay #FF0000, ang berde ay #00FF00 at ang asul ay #0000FF. Ang katamtamang kulay-abo ay anumang code na may tatlong pantay na pares, gaya ng #808080, na rgb(128, 128, 128). Laging nangangahulugang kulay-abo ang pantay na pares, dahil ang pantay na dami ng tatlong ilaw ay walang hue.

Pagbasa ng code sa isang sulyap

Kapag alam mo na ang pattern, matatantya mo ang kulay mula sa mga hex digit nito. Ang code na nagsisimula sa mataas na unang pares ay mapula, ang mataas na gitnang pares ay maberde, ang mataas na huling pares ay maasul. Ang #FF8800 ay maraming pula, kaunting berde at walang asul, na kahel. Hindi mo kailangan ng tool para doon, ngunit kailangan mo ito para sa eksaktong mga numero.

Paano mag-convert ng HEX sa RGB dito

I-type o i-paste ang hex code

Ilagay ang kulay sa unang field, may hash sign man o wala. Tinatanggap ang mga anyong may tatlo, anim at walong digit.

Basahin ang rgb na halaga

Lumalabas agad ang sagot sa kabilang field, sa anyong rgb(90, 70, 50), o rgba() kung may dalang transparency ang code. Ipinapakita ng pahina ang pangungusap na #5A4632 = rgb(90, 70, 50) para masuri mo sa isang sulyap.

Kopyahin ito sa code mo

I-paste ang resulta sa stylesheet, sa script o sa tool na humingi nito. Kung kailangan mo ang tatlong numero nang magkakahiwalay, ang mga ito ang nasa loob ng panaklong.

Saan nagmula ang mga notasyong ito

Ang hex at RGB ay iisang bagay na isinulat nang dalawang beses

Ang kulay sa screen ay tatlong numero, kung gaano karaming pula, berde at asul na liwanag ang ilalabas, bawat isa mula 0 hanggang 255, na isang byte. Isinusulat lang ng hex ang mga byte na iyon sa base labing-anim, kaya ang #FF8800 at rgb(255, 136, 0) ay iisang utos para sa iisang pixel.

HSL at CMYK

Naimbento ang HSL dahil walang isa sa dalawa ang nababasa ng tao: ibinibigay nito ang hue bilang anggulo sa paligid ng color wheel, na may saturation at lightness bilang porsyento, kaya makakagawa ang designer ng mas maliwanag nang hindi muling kinakalkula ang tatlong bilang. Ibang mundo ang kinabibilangan ng CMYK, tinta sa halip na liwanag. Subtractive ito, binuo mula sa apat na printing plate, at hindi nito naaabot ang bawat kulay na kaya ng screen, dahil naglalabas ng liwanag ang screen habang sumasalamin lang ang papel. Para sa mga iyon, tingnan ang HEX sa HSL at HEX sa CMYK.

Saan mo ito makakaharap

Sa mga stylesheet

Ang hex ang tina-type mo sa stylesheet at ibinibigay ng design tool. Lumilitaw ang RGB saanman kailangan ng aritmetika ang kulay: mga gradient, transparency, code na kumakalkula ng shade. Bahagi ng pang-araw-araw na front-end na trabaho ang pagkaalam sa parehong baybay at ang kakayahang lumipat sa pagitan ng mga ito.

Sa mga script at canvas drawing

Madalas na gusto ng drawing code ang tatlong numero nang magkakahiwalay, para paghaluin ang dalawang kulay, padilimin ang isa nang takdang halaga o subukin kung tugma ang pixel sa target. Ang pag-convert ng HEX sa RGB ay direktang nagbibigay sa iyo ng mga numero.

Sa mga graphics at image tool

Karaniwang ipinapakita ng mga image editor ang kulay bilang tatlong numero o bilang hex code, at hinahayaan kang mag-type ng alinman. Ang paglipat sa pagitan ng dalawa ay nagbibigay-daan para ulitin ang kulay mula sa web page sa programang nangangailangan ng mga numero.

Sa dokumentasyon at brand guide

Maaaring ilista ng brand guide ang kulay sa hex para sa web, sa RGB para sa mga screen at sa CMYK para sa print. Usapin ng isang conversion ang pagtutugma ng unang dalawa, at ito ang uri ng pagsusuring humuhuli ng typo bago ito mailimbag sa isang libong leaflet.

Mga praktikal na gamit ng anyong RGB

Transparency nang walang pangalawang kulay

Sa rgba(90, 70, 50, 0.5) makukuha mo ang kulay sa kalahating lakas, para lumitaw ang nasa likod nito. Ito ang karaniwang paraan para gumawa ng mga overlay, anino at may tint na background mula sa kulay ng brand nang hindi nag-iimbento ng bago.

Pagkalkula ng mas maliwanag at mas madilim na shade

Para gawing bahagyang mas madilim ang hover state, maaaring magbawas ang script ng takdang halaga sa bawat isa sa tatlong numero. Nakakabagabag gawin ang gayon sa hex string; sa rgb, simpleng aritmetika ito. Kung kailangan mo ng pag-aayos na nakabatay sa hue, i-convert na lang ang HEX sa HSL.

Mga pagsusuri ng contrast

Kinakalkula ng mga accessibility tool ang contrast ng dalawang kulay mula sa mga halaga nilang pula, berde at asul. Ang pagkakaroon ng mga numero ay nagpapahintulot sa iyong gawin mismo ang kalkulasyon, o i-paste ang mga ito sa checker, para tiyaking nababasa ang teksto sa background.

Mga patibong kapag nagko-convert ka ng HEX sa RGB

Paglimot sa alpha na pares

Ang code na may walong digit ay may transparency sa huling dalawang digit. Kung tatanggalin mo ang mga ito, mawawala ito. Suriin ang haba ng code bago ka magpasya na ang resulta ang kulay.

Paghahalo ng pagkakasunod-sunod

Ang hex ay pula, berde, asul. Ilang format, at ilang lumang graphics API, ay gumagamit ng asul, berde, pula. Kung mali ang labas ng kulay sa partikular na programa, suriin ang pagkakasunod-sunod ng channel nito.

Pagkopya mula sa screenshot

Ang kulay na binasa mula sa screenshot ay ang kulay pagkatapos ng color management ng screen at anumang compression. Maaari itong bahagyang magkaiba sa kulay sa source file. Gamitin ang design file kung kaya mo.

Pag-aakalang nagkakasundo ang mga screen

Bahagyang magkaiba ang pagpapakita ng dalawang screen sa parehong code. Eksakto ang mga numero; ang nakikita mo ay nakadepende sa display at sa profile nito.

Mga tanong ng mga tao bago mag-convert

Ano ang #FF0000 sa RGB?

rgb(255, 0, 0), purong pula.

Ano ang #FFFFFF sa RGB?

rgb(255, 255, 255), puti.

Maaari ko bang i-convert ang code na may tatlong digit?

Oo. Dinodoble ang bawat digit: ang #09C ay nagiging #0099CC, na rgb(0, 153, 204).

Eksakto ba ang conversion?

Oo. Dalawang baybay ito ng parehong tatlong numero.

Ina-upload ba ang kulay ko?

Hindi. Tumatakbo sa iyong browser ang aritmetika at walang ipinapadala saanman.

Paano ako babalik?

Gamit ang RGB sa HEX, na isinusulat ang tatlong numero bilang hex code.

Matalinong pagpili kapag nagko-convert ka ng HEX sa RGB

Alamin kung ano ang kailangan mo sunod

Kung kailangan mo ng transparency, ang rgba() ang natural na anyo. Kung kailangan mong isaayos ang lightness o hue, mas madali ang HSL. Kung ipi-print ang kulay, ang CMYK ang susunod na hakbang, kasama ang mga babala na dala ng conversion na iyon. Tingnan ang RGB sa CMYK.

Panatilihin ang hex bilang master

Para sa mga kulay sa palette ng brand, itago ang hex code bilang sanggunian. Maikli ito, malinaw at naiintindihan saanman. Hanguin ang ibang anyo mula rito kapag kailangan mo.

Gumamit ng mga custom property

Sa CSS, itakda ang mga kulay nang isang beses, gaya ng --brand: #5A4632, at tukuyin ang mga ito sa pangalan. Kung kailangan mo ang mga numero para sa rgba(), itakda rin ang --brand-rgb: 90 70 50. Isang beses na lang gagawin ang conversion.

Modernong CSS at ang anyong RGB

Syntax na pinaghihiwalay ng espasyo

Tumatanggap ang kasalukuyang CSS ng rgb() na may mga espasyo at slash para sa transparency, gaya ng rgb(90 70 50 / 50%). Pareho ang mga numero sa anyong may kuwit, kaya gumagana sa pareho ang resulta ng conversion. Inaasahan ng mas lumang browser at ilang tool ang mga kuwit, kaya nananatiling ligtas na pagpili ang anyong may kuwit kapag hindi mo alam kung saan gagamitin ang kulay.

Mga porsyento at praksyon

Maaari ring isulat ang RGB sa mga porsyento, gaya ng rgb(35% 27% 20%), kung saan ang 100 porsyento ay 255. Buong numero ang ibinibigay ng pahina dahil iyon ang iniimbak ng hex at inaasahan ng karamihan ng tool. Kung kailangan mo ang mga porsyento, hatiin ang bawat numero sa 255 at i-multiply sa 100.

Mga custom property para sa tatlong numero

Karaniwang trick ang pag-imbak lang ng tatlong numero sa custom property, --brand-rgb: 90 70 50, at gamitin ito bilang rgb(var(--brand-rgb) / 0.5). Hinahayaan nitong magsilbi ang isang depinisyon sa parehong solid at translucent na gamit. Kapag nagko-convert ka ng HEX sa RGB para sa layuning ito, kopyahin lang ang mga numero mula sa sagot.

Paggawa gamit ang kulay sa praktika

Suriin laban sa brand guide

Kung nagbibigay ang brand guide ng parehong hex at rgb para sa iisang kulay, i-convert ang isa at ihambing sa kabila. Karaniwang ibig sabihin ng hindi pagkakatugma ay typo sa guide, at sulit ang isang minuto ng paghahanap nito bago gamitin sa bawat pahina.

Itago ang palette bilang maikling listahan

Gumagamit ang karamihan ng site ng lima hanggang walong kulay. Isulat ang mga ito sa tala sa parehong anyo. Sa bawat pagkakataong kailangan mong i-convert ang HEX sa RGB para sa bagong component, maaari mo itong hanapin sa halip na muling kalkulahin, at nananatiling pare-pareho ang palette.

Pangalanan ang mga kulay ayon sa tungkulin

Ang mga pangalang gaya ng primary, surface at warning ay mas nakaliligtas sa mga redesign kaysa sa mga pangalang gaya ng green o brown. Ibinibigay ng conversion ang mga numero; sinasabi ng pangalan kung para saan ang mga ito.

Mga kaugnay na converter

Sakop ng parehong pamilya ng mga tool ang mga katabing conversion. Para bumalik, gamitin ang RGB sa HEX. Para sa mga kulay na inilalarawan sa pamamagitan ng hue, nariyan ang HEX sa HSL at HSL sa HEX, at para sa print, ang HEX sa CMYK, CMYK sa HEX at CMYK sa RGB. Para sa mga laki sa parehong stylesheet, ang px sa rem at px sa em ay ginagawa para sa mga haba ang ginagawa ng pahinang ito para sa mga kulay.

Isang halimbawang nalutas

Sabihin nating #1E7A5C ang kulay ng brand mo at gusto mo ng translucent na bersyon para sa background ng card. Tina-type mo ang code at nababasa mo ang rgb(30, 122, 92). Sa stylesheet, isinusulat mo ang background: rgba(30, 122, 92, 0.12), napakagaan na tint ng parehong berde, at border na rgba(30, 122, 92, 0.4). Maayos na nakaupo ang card sa puting pahina at sa kulay-abo, dahil hinahayaan ng transparency na lumitaw ang pahina. Kapag binago ang kulay ng brand sa kalaunan, papalitan mo ang tatlong numero sa isang custom property at susunod ang bawat tint.

Maikling checklist

Bago mag-convert

Suriin ang haba ng code: tatlo, anim o walong digit. Magpasya kung kailangan mo ng transparency.

Habang nagko-convert

I-paste ang code, basahin ang rgb na halaga at kopyahin ito kasama ang panaklong, o ang tatlong numero lang.

Pagkatapos mag-convert

Subukin ang kulay sa konteksto, sa totoong background, at suriin ang contrast ng anumang teksto na nakapatong dito.

Mga karaniwang pagkakamali

Pagtanggal sa pares ng transparency

Ang walong digit ay nangangahulugang alpha. Panatilihin ito o i-convert sa rgba().

Paghahalo ng pagkakasunod-sunod ng channel

Pula ang una sa hex. Inaasahan ng ilang tool na asul ang una.

Pagturing sa screen bilang katotohanan

Eksakto ang mga numero. Nakadepende sa display ang hitsura.

Nananatili sa device mo ang mga kulay mo

Lokal na nangyayari ang kalkulasyon. Ginagamit ng sarili mong browser ang mga halaga mo at walang ipinapadala saanman. Walang buburahin pagkatapos at walang account na gagawin. Iyon ang payak na paraan para mag-convert ng HEX sa RGB.

Buod

Para mag-convert ng HEX sa RGB dito, i-type o i-paste ang hex code at basahin agad ang rgb na halaga. Pinananatili ng conversion ang kulay nang eksakto: ang hex at rgb() ay dalawang baybay ng parehong tatlong numero, 0 hanggang 255 para sa pula, berde at asul, kaya walang tinatantya at ibinabalik ng round trip ang pinagsimulan. Dinadala rin ang ikaapat na halaga para sa transparency, dahil ang #RRGGBBAA ay nagiging rgba(), at pabalik. Parehong inilalarawan ng dalawang baybay ang sRGB, kaya hindi nila mailalarawan ang mga kulay sa labas nito, at pinalalawak ang shorthand sa halip na panatilihin: ang #abc ay bumabalik bilang #AABBCC. Walang ina-upload.