·4 min leestijd

Kleurenkiezer met hex en RGB voor Mac

Handmatig converteren tussen hexcodes, RGB-waarden en HSL-notatie is foutgevoelig en onnodig als je het meerdere keren per dag doet.

Een designer stuurt je een kleur in hex: #1A73E8. Je CSS-framework wil HSL. Je iOS-codebase heeft RGB-waarden tussen 0 en 1 nodig. Je Android-project gebruikt ARGB-integers. Eén kleur, vier formaten, en je opent alweer een browsertabblad om ertussen te converteren.

Kleurconversie is triviale wiskunde (hex naar RGB is gewoon base-16 naar decimaal), maar het in je hoofd doen voor drie kanalen terwijl je probeert gefocust te blijven op layout of styling, is een afleiding die je niet nodig hebt.

Wat macOS biedt

macOS heeft een ingebouwde kleurenkiezer die vanuit sommige apps toegankelijk is via het systeem-kleurenpaneel. Het toont RGB-schuifregelaars en een hexveld, maar is ontworpen om kleuren visueel te kiezen, niet om programmatisch tussen formaten te converteren. Er is geen eenvoudige manier om een hexcode te plakken en de HSL-equivalent te krijgen, of om RGB-integers in te voeren en de hex-uitvoer te kopiëren. En het zit verstopt in specifieke apps in plaats van systeembreed beschikbaar te zijn.

Converteer kleuren direct tussen formaten

Bellows bevat een kleurconverter tussen zijn 41 developer tools. Voer een kleur in, in elk ondersteund formaat — hex, RGB, HSL — en zie de equivalente waarden in elk ander formaat. Kopieer met één klik welke weergave je maar nodig hebt.

Bellows kleurenkiezer met hex-, RGB- en HSL-conversie op macOS

Van design naar code

Figma exporteert kleuren als hex. Tailwind CSS gebruikt aangepaste kleurwaarden. SwiftUI wil Color(red:green:blue:) met decimale waarden. Android XML gebruikt #AARRGGBB. Als alle formaten tegelijk zichtbaar zijn, elimineer je het mentale rekenwerk en de omwegen naar conversiewebsites.

Contrast en leesbaarheid controleren

Wanneer je de gerenderde kleur naast de numerieke waarden kunt zien, kun je snel controleren of een tekstkleur leesbaar zal zijn tegen een achtergrond. Dat is sneller dan overschakelen naar een aparte contrastchecker voor elk kleurenpaar in je stylesheet.

Toegang via de menubalk

Snel een conversie nodig terwijl je CSS schrijft? Klik op het Bellows-icoon in je menubalk, selecteer de kleurtool, plak de hexcode, en kopieer de RGB-waarde. De hele interactie duurt minder dan vijf seconden en je verlaat nooit je editor.

Haal Bellows in de Mac App Store

Volgend artikel

Bellows

41 developer tools in one native Mac app — JSON, JWT, Base64, hashes, and more.

Get Bellows on the Mac App Store