Teisenda värv RGB, HSL ja kuueteistkümnendi vahel

Veebis värvidega töötamine hõlmab pidevat žongleerimist mitme tähise vahel. Värvimuundur väldib käsitsi tehtavaid vigu ja võimaldab olenevalt kasutuskontekstist koheselt ühelt vormingult teisele lülituda. Igal vormingul on oma tugevad küljed ja teadmine, millist neist kasutada, on üks esiotsa arendaja reflekse.

Siin on tüüpilised kasutusviisid, mis motiveerivad värvide teisendamist:

• RGB on CSS-is ja JavaScriptis natiivne, mida inimesed loevad, et mõista domineerivat (punased, rohelised, sinised kanalid vahemikus 0–255).
• HSL muudab tooni muutmise triviaalseks: reguleerige lihtsalt küllastust või heledust ilma iga kanalit ümber arvutamata.
• HEX on kopeerimise ja kleepimise kanooniline vorming: kuus tähemärki, ühilduvad kõikjal, sobivad ideaalselt Figma, Sketchi mudelite või stiilijuhiste jaoks.
• CSS-is ja JavaScriptis on kõige levinumad toimingud HEX-st RGB-ks, RGB-st HEX-iks, HEX-st HSL-iks ja nende vastastikarvud.

RGB ja RGBA (punane, roheline, sinine, alfa)

Iga kanal on kodeeritud täisarvuna vahemikus 0 kuni 255, mis vastab ühele baidile komponendi kohta ja annab 16 777 216 võimalikku värvi. RGBA alfakanal on vahemikus 0 (läbipaistev) kuni 1 (läbipaistmatu) ja kontrollib läbipaistvust.

kood>
.button {
    taustavärv: rgb(20, 0, 182);
    äärise värv: rgba(20, 0, 182, 0,5);
}

HEX ja HEX8 (kuueteistkümnendsüsteem)

Väga populaarne kompaktvorming: kuuekohaline #RRGGBB, kus iga paar tähistab RGB-kanalit aluses 16. Kaheksa märgiga variant #RRGGBBAA lisab alfakanali kuueteistkümnendsüsteemis (00 läbipaistev, FF läbipaistmatu). Samuti on olemas lühike märge #RGB: #F53 on samaväärne koodiga #FF5533.

kood>
.title { värv: #1400B6; }
.shadow { värv: #1400B680; } /* alfa 50% */
.accent { värv: #F53; } /* lühivorm */

HSL ja HSLA (toon, küllastus, heledus, alfa)

HSL kirjeldab värve tajutavalt. Hue on nurk värvirattal (0 kuni 360°), Küllastus ja Heledus on protsendid. See on eelistatud vorming variatsioonide genereerimiseks: kursoriga hõljutatud nupu heledamaks muutmine, deaktiveeritud oleku desatureerimine, sidusa paleti loomine, muutes ainult tooni.

kood>
$esmane: hsl(247, 100%, 36%);
$primary-hover: hsl(247, 100%, 46%);   /* selgem */
$primary-muted: hsl(247, 30%, 36%);    /* vähem küllastunud */

Muud olemasolevad vormingud

Printimisel kasutatakse CMYK-i (tsüaan, magenta, kollane, võti): see kirjeldab värvi tintide lahutamise teel ega ole ekraanil asjakohane. OKLCH ja LAB on tajuliselt ühtlased ruumid, mis ilmusid CSS-i värvitasemel 4; need võimaldavad paremini kontrollida heledust. See tööriist keskendub RGB-, HEX- ja HSL-konversioonidele, mis katavad valdava enamuse veebivajadustest.

HEX kuni RGB tähendab stringi sõelumist märgipaaridena ja iga paari tõlgendamist 16 põhitäisarvuna:

kood>
const hex = '#1400B6';
const r = parseInt(hex.slice(1, 3), 16); // 20
const g = parseInt(hex.slice(3, 5), 16); // 0
const b = parseInt(hex.slice(5, 7), 16); // 182

RGB-st HEX-iks on vastupidine toiming: iga kanal teisendatakse 16. baasiks, polsterdatakse kahe märgini ja seejärel ühendatakse.

kood>
const toHex = (n) => n.toString(16).padStart(2, '0');
const hex = '#' + toHex(20) + toHex(0) + toHex(182); // '#1400b6'

RGB-st HSL-i on algoritmilisem. Normaliseerime kanalid vahemikus 0 kuni 1, arvutame heleduse tuletamiseks min ja max, seejärel küllastuse, seejärel tooni vastavalt domineerivale kanalile. Täielik valem on dokumenteeritud CSS-i värvimooduli 3. taseme spetsifikatsioonis.

Tööriist töötab mõlemas suunas RGB, HEX ja HSL vahel. Konversiooni tegemiseks toimige järgmiselt.

1. Valige sisendvorming: RGB, HEX või HSL.
2. Sisestage väärtus (näiteks #1400B6, rgb(20, 0, 182) või hsl(247, 100%, 36%)).
3. Alustage teisendamist: kohe kuvatakse kahe teise vormingu ekvivalendid.
4. Kopeerige soovitud tulemus spetsiaalse nupu abil ja kleepige see oma stiililehele või küljendusse.

Arvutamine toimub brauseri poolel, andmeid serverisse ei saadeta.

• Veebikujundus ja CSS: hankige maketist HEX ja hankige samaväärne HSL, et luua hõljutus- või aktiivne olek ilma toonist kõrvale kaldumata.
• Visuaalne identiteet ja palett: vähendage põhivärvi mitmes variandis (hele, tume, summutatud), mängides heleduse või HSL-i küllastusega.
• Illustratsioon ja graafika: teisendage ekraanivärv (RGB) kuueteistkümnendkoodiks, et edastada tarkvara või klient.
• Juurdepääsetavus: teisendage RGB-vormingusse, et seejärel arvutada taustavärviga kontrastsuhe (WCAG AA nõuab tavateksti jaoks 4,5:1).
• CSS-i muutujad ja eeltöötlejad: suunake kujundusmärgid ühest võrdlusvärvist SASS-faili või Tailwindi teemasse.

Mõned täielikud teisendused, et illustreerida vastavust kolme vormingu vahel:

kood>
#1400B6 -> rgb(20, 0, 182) -> hsl(247, 100%, 36%)
#FF5733 -> rgb(255, 87, 51) -> hsl(11, 100%, 60%)
#2ECC71 -> rgb(46, 204, 113) -> hsl(145, 63%, 49%)
#F1C40F -> rgb(241, 196, 15) -> hsl(48, 89%, 50%)
#FFFFFF -> rgb(255, 255, 255) -> hsl(0, 0%, 100%)
#000000 -> rgb(0, 0, 0) -> hsl(0, 0%, 0%)

Alfa-kanaliga:

kood>
#1400B680 -> rgba(20, 0, 182, 0,50) -> hsla(247, 100%, 36%, 0,50)
#FF5733CC -> rgba(255, 87, 51, 0,80) -> hsla(11, 100%, 60%, 0,80)

Mis vahe on HEX ja HEX8 vahel?

Klassikaline HEX kodeerib kolme RGB-kanalit üle kuue tähemärgi (). HEX8 lisab alfakanali jaoks kaks märki (#RRGGBBAA), mis aitab hallata läbipaistvust ühes stringis. #1400B6FF ja #1400B6 annavad visuaalselt sama värvi, läbipaistmatud.