Softonic

HEX-kleurselectie

Stap 1 / 4 Hex color

Ontwerpers en ontwikkelaars gebruiken dezelfde kleur honderden malen per dag op vier verschillende weergaven. Klik waar ook maar op het veld voor 2D-saturatie en -waarde, slep de kleurregelaar of plak een waarde; deze kleurselectie toont dan HEX, RGB, HSL, HSV en CMYK naast elkaar – met WCAG-contrasttesten tegen zwart-wit, zodat u direct kunt controleren of de kleur goed leesbaar is.

Hoe kies je een kleur

  1. 1

    Kies een kleurton

    Slep de verticale kleurslider door het volledige spectrum van 0 tot 360°.

  2. 2

    Pikverzadiging en waarde

    Klik of slep binnen het 2D vierkant om te bepalen hoe levendig en helder de kleur moet zijn.

  3. 3

    Fijnstel met de invoer

    Voer exacte waarden in in HEX, RGB, HSL, HSV of CMYK — alle vijf velden blijven synchroon.

  4. 4

    Controleer de toegankelijkheid en kopieer

    De contrastverhoudingen tegen zwart-wit worden direct weergegeven; met één klik kopieert u de gewenste notatie.

Kleurindicaties in de praktijk

Elk kleurmodel beantwoordt een iets andere vraag.

Referentie voor notatie

Notatie Componenten Waar het wordt gebruikt
HEX #RRGGBB CSS, ontwerptools, merkhandleidingen
RGB rood 0–255, groen 0–255, blauw 0–255 CSS rgb(), beeldeditoren
HSL kleurintensiteit (0–360°), saturatie%, lichtgraad % CSS hsl(), designsystemen
HSV/HSB kleurintensiteit (0–360°), saturatie (%), waarde/brightness (%): Photoshop en Figma kleurselectoren
CMYK cyan %, magenta %, geel %, kleurkleur/zwart % Afdrukken, voorprepress
OKLCH lichtheid (%), chroma, tint Paletten uit het Modern CSS Color Module 4

Contrast voor toegankelijkheid

WCAG 2.2 stelt minimale contrastverhoudingen tussen tekst en achtergrond vast:

De selector berekent het verhouding tussen wit en zwart in real time. Als een aangepaste voorgrondkleur van cruciaal belang is, gebruik een speciale contrastcontrole voor elke kleurcombinatie.

Tippen

Veelgestelde vragen

Photoshop gebruikt een kleurprofiel (meestal sRGB voor het scherm, vaak anders voor print). Web browsers vertalen ongemarkeerde HEX-waarden naar sRGB. Als uw document is ingesteld op Adobe RGB of ProPhoto, zijn de pixelwaarden gelijk, maar verandert de waargenomen kleur.

Ja – beide beschrijven volledig rood, waarbij rood wordt weergegeven door 255 en groen en blauw door 0. HEX is een twee-cijferige hexadecimale notatie voor elke waarde tussen 0 en 255 voor de kanalen.

Kies je primaire kleur, schakel over naar HSL en verander de lichtgraad in stappen van 10%, terwijl je tint en saturatie vasthoudt. Hierdoor ontstaat een logische schaal van tonen en schaduwen die allemaal dezelfde tint hebben.

De recent gebruikte kleuren worden opgeslagen in de lokale opslag van uw browser, zodat ze behouden blijven bij een vernieuwing. Er wordt niets naar een server verzonden en u kunt het historisch register van de kleurpalet altijd wissen.

Gerelateerde tools

Kleurenpaletgenerator

Genereer een harmonieus palet van 4 tot 8 kleuren op basis van een basiskleur met behulp van complementaire, analoge, triadische en gesplitste complementaire schema's.

Willekeurige cijfgenerator

Genereer een willekeurige RGB-color, bekijk de hex-, HSL- en RGB-waarden en kopieer elk formaat met één klik.

Generator voor willekeurige kleurpaletten

Genereer vijfkleurpaletten gebaseerd op een willekeurige basiskleur, met complementaire, analoge en triadische varianten.

JSON-formatter

Formateer en print JSON met een aanpasbare indeling, gesorteerde sleutels en inlinevalidatie die fouten precies op de juiste positie weergeeft.

Willekeurige lettergenerator

Genereer willekeurige letters uit het Engelse alfabet. Kies voor hoofd- en kleine letteren, inclusief duplicaten of unieke tekens, en bepaal het aantal te genereren letters.

Leeftijdscalculator

Bereken exacte leeftijd in jaren, maanden en dagen vanaf een geboortedatum, plus totaal aantal dagen, uren en countdown naar de volgende verjaardag.