Pārveidot krāsu starp RGB, HSL un heksadecimālo

Darbs ar krāsām tīmeklī ietver pastāvīgu žonglēšanu starp vairākiem apzīmējumiem. Krāsu pārveidotājs novērš manuālas kļūdas un ļauj uzreiz pārslēgties no viena formāta uz citu atkarībā no lietošanas konteksta. Katram formātam ir savas stiprās puses, un zināt, kuru no tiem izmantot, ir viens no priekšgala izstrādātāja refleksiem.

Tālāk ir norādīti tipiskie lietojumi, kas motivē krāsu pārveidošanu.

• RGB ir vietējā CSS un JavaScript, ko cilvēki var lasīt, lai saprastu dominējošo (sarkans, zaļš, zils kanāli 0–255).
• HSL padara nokrāsas maiņu nenozīmīgu: vienkārši pielāgojiet piesātinājumu vai spilgtumu, nepārrēķinot katru kanālu.
• HEX ir kopēšanas un ielīmēšanas kanoniskais formāts: sešas rakstzīmes, saderīgas visur, ideāli piemērots Figma, Sketch modeļiem vai stila ceļvežiem.
• Reklāmguvumi HEX uz RGB, RGB uz HEX, HEX uz HSL un to abpusējas vērtības ir visizplatītākās CSS un JavaScript darbības.

RGB un RGBA (sarkans, zaļš, zils, alfa)

Katrs kanāls ir kodēts kā vesels skaitlis no 0 līdz 255, kas atbilst vienam baitam katrā komponentā un nodrošina 16 777 216 iespējamās krāsas. RGBA alfa kanāls svārstās no 0 (caurspīdīgs) līdz 1 (necaurspīdīgs) un kontrolē caurspīdīgumu.

.button {
    fona krāsa: rgb(20, 0, 182);
    apmales krāsa: rgba(20, 0, 182, 0,5);
}

HEX un HEX8 (heksadecimālais apzīmējums)

Ļoti populārs kompaktais formāts: #RRGGBB ar sešām rakstzīmēm, kur katrs pāris apzīmē RGB kanālu 16. bāzē. Variants #RRGGBBAA ar astoņām rakstzīmēm pievieno alfa kanālu heksadecimālā formā (00 caurspīdīgs, FF necaurspīdīgs). Pastāv arī īss apzīmējums #RGB: #F53 ir ekvivalents #FF5533.

.title { krāsa: #1400B6; }
.shadow { krāsa: #1400B680; } /* alfa 50% */
.accent { krāsa: #F53; } /* īsā forma */

HSL un HSLA (nokrāsa, piesātinājums, gaišums, alfa)

HSL apraksta krāsu uztveri. Nokrāsa ir leņķis krāsu aplī (no 0 līdz 360°), Piesātinājums un Gailums ir procenti. Šis ir vēlamais formāts variāciju ģenerēšanai: pogas izgaismošana, kas novietota virs kursora, deaktivizēta stāvokļa piesātinājuma samazināšana, saskaņotas paletes izveidošana, mainot tikai nokrāsu.

$primārais: hsl(247, 100%, 36%);
$primary-hover: hsl(247, 100%, 46%);   /* skaidrāks */
$primary-muted: hsl(247, 30%, 36%);    /* mazāk piesātināts */

Citi esošie formāti

CMYK (ciāna, fuksīna, dzeltena, atslēga) tiek izmantota drukāšanā: tā apraksta krāsu, atņemot tintes, un ekrānā nav būtiska. OKLCH un LAB ir uztveres viendabīgas atstarpes, kas parādījās CSS 4. krāsu līmenī; tie ļauj labāk kontrolēt jūtamo spilgtumu. Šis rīks koncentrējas uz RGB, HEX un HSL konvertēšanu, kas aptver lielāko daļu tīmekļa vajadzību.

HEX uz RGB nozīmē virknes parsēšanu rakstzīmju pāros un katra pāra interpretāciju kā veselu 16 bāzes skaitli:

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 uz HEX ir apgrieztā darbība: katrs kanāls tiek pārveidots par 16. bāzi, papildināts līdz divām rakstzīmēm un pēc tam savienots.

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

RGB uz HSL ir algoritmiskāks. Mēs normalizējam kanālus no 0 līdz 1, mēs aprēķinām min un max, lai secinātu spilgtumu, pēc tam piesātinājumu un pēc tam nokrāsu atbilstoši dominējošajam kanālam. Pilna formula ir dokumentēta CSS krāsu moduļa 3. līmeņa specifikācijā.

Rīks darbojas abos virzienos starp RGB, HEX un HSL. Lai veiktu konvertēšanu:

1. Izvēlieties ievades formātu: RGB, HEX vai HSL.
2. Ievadiet vērtību (piemēram, #1400B6, rgb(20, 0, 182) vai hsl(247, 100%, 36%)).
3. Sāciet konvertēšanu: nekavējoties tiek parādīti ekvivalenti divos citos formātos.
4. Nokopējiet vajadzīgo rezultātu, izmantojot tam paredzēto pogu, un ielīmējiet to savā stila lapā vai izkārtojumā.

Aprēķins tiek veikts pārlūkprogrammas pusē, dati netiek nosūtīti uz serveri.

• Tīmekļa dizains un CSS: izgūstiet HEX no maketa un iegūstiet līdzvērtīgu HSL, lai ģenerētu kursoru vai aktīvo stāvokli, nenovirzoties no nokrāsas.
• Vizuālā identitāte un palete: samaziniet primāro krāsu vairākos variantos (gaišā, tumšā, izslēgtā), spēlējot ar spilgtumu vai HSL piesātinājumu.
• Ilustrācija un grafika: pārveidojiet ekrāna krāsu (RGB) heksadecimālā kodā, lai pārsūtītu uz programmatūru vai klientu.
• Pieejamība: konvertējiet uz RGB formātu, lai pēc tam aprēķinātu kontrasta attiecību (parastam tekstam WCAG AA nepieciešams 4,5:1) ar fona krāsu.
• CSS mainīgie un priekšapstrādātāji: ievadiet plūsmas dizaina pilnvaras SASS failā vai Tailwind motīvā no vienas atsauces krāsas.

Daži pilnīgi reklāmguvumi, lai ilustrētu atbilstību starp trim formātiem:

#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%)

Ar alfa kanālu:

#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)

Kāda ir atšķirība starp HEX un HEX8?

Klasiskā HEX kodē trīs RGB kanālus vairāk nekā sešās rakstzīmēs (#RRGGBB). HEX8 alfa kanālam pievieno divas rakstzīmes (#RRGGBBAA), kas palīdz pārvaldīt caurspīdīgumu vienā virknē. #1400B6FF un #1400B6 vizuāli piešķir tādu pašu krāsu, necaurspīdīgu.

Vai CSS formātā mums vajadzētu dot priekšroku HSL vai RGB?

Tie divi ir līdzvērtīgi atveidē. HSL ir izteiksmīgāks, lai ģenerētu saskaņotu paletes vai stāvokļa variantus (virs kursoru, fokuss), jo mēs modificējam vienu uztveres parametru. RGB joprojām ir praktisks, strādājot ar datiem no audekla vai sensora.

Kāpēc mans HEX piešķir atšķirīgu nokrāsu, nekā paredzēts?

Trīs izplatīti iemesli: sajaukšana starp īso #RGB un garo #RRGGBB (rakstzīmes tiek dublētas, nav savienotas), rakstzīmes kopēšanas kļūda vai rādīšana nekalibrētā ekrānā. Pārbaudiet arī, vai jūsu CSS nepārklāj vecāku necaurredzamību, kas maina galīgo renderēšanu.

Kam tiek izmantots RGBA un HSLA alfa kanāls?

Alfa kanāls kontrolē krāsas necaurredzamību no 0 (pilnībā caurspīdīga) līdz 1 (pilnīgi necaurspīdīga). Tas ir noderīgi pārklājumiem, ēnām, atspējotiem stāvokļiem vai attēlu pārklājumiem. Atšķirībā no CSS rekvizīta necaurredzamība, RGBA un HSLA ietekmē tikai atlasīto krāsu, nevis tās atvasinājumus.

Vai mēs varam pārveidot krāsu, nezaudējot precizitāti?

Starp RGB un HEX konvertēšana ir precīza, abi formāti kodē vienu un to pašu informāciju 24 bitos. Pārveidojot uz HSL, tiek noapaļota nokrāsa, piesātinājums un spilgtums; Tāpēc abos virzienos RGB > HSL > RGB noteiktos kanālos var atgriezt vērtību, kas nobīdīta par vienu vienību.

Kāpēc izmantot tiešsaistes pārveidotāju, nevis iekšēju funkciju?

Vienreizējai pārbaudei, paletes prototipam vai ātri pārbaudiet HEX ekvivalentu HSL krāsai, kas iegūta no modeļa, tiešsaistes pārveidotājs ir pieejams nekavējoties. Atkārtotām programmatiskām vajadzībām bibliotēka, piemēram, color, chroma-js vai tinycolor2, joprojām ir piemērotāka.