Inspecteer en debug HD- en niet-HD-kleuren met de Kleurkiezer

Jecelyn Yeen

Sofia Emelianova

De Kleurkiezer biedt een GUI voor het wijzigen van color en *-color en laat u met één klik niet-HD- en HD-kleuren maken, converteren en debuggen.

Belangrijk punt: deze video toont de Chrome DevTools-versie ouder dan 112. In latere versies ondersteunt het deelvenster Stijlen 12 nieuwe kleurruimten en 7 nieuwe gamma's uit de CSS Color Level 4- specificatie, en de color-mix() functie uit CSS Color Level 5 .

Voor meer informatie over de nieuwe kleurruimten, zie High Definition CSS Color Guide .

Open de Kleurkiezer en verander de kleuren

Gebruik de Kleurkiezer om kleurwaarden met één klik te wijzigen:

1. Selecteer een element in het paneel Elementen .

2. Zoek in het deelvenster Stijlen de color of *-color die u wilt wijzigen.

   Links van elke color of *-color staat een klein vierkant pictogram met een voorbeeld van die kleur.

   

   Opmerking: dit voorbeeld toont twee elkaar snijdende cirkels naast de functie color-mix() : . Het snijpunt is een voorbeeld van de resulterende kleur.

Gebruik het venster Berekend om de berekende waarde te inspecteren.

1. Klik op het voorbeeldvierkant naast een kleur om de Kleurkiezer te openen.
2. Gebruik een van de UI-elementen van de Kleurkiezer om de kleur te wijzigen.

Kleurkiezer-elementen

Hier volgt een beschrijving van elk van de UI-elementen van de Kleurkiezer :

1. Schaduwen .
2. Pipet . Zie Waar dan ook een kleur uitproberen met de pipet .
3. Kopieer naar klembord . Kopieer de weergavewaarde naar uw klembord.
4. Weergavewaarde . Argumenten van de gekozen kleurruimte.
5. Contrast ratio . Alleen beschikbaar voor color . Het is het verschil tussen color en background-color .
6. Kleurenpalet . Klik op een vierkant om de kleur te wijzigen in die van het vierkant.
7. Gammagrens . Deze regel is alleen beschikbaar voor de nieuwe kleurruimten en de functie color() . Ze kunnen zowel HD- als niet-HD-kleuren produceren. Met de lijn kun je onderscheid maken tussen HD en niet-HD.
8. Kleurencirkel . Sleep deze cirkel over de tinten om de weergavewaarde te wijzigen.
9. Tint schuifregelaar .
10. Schuifregelaar voor dekking .
11. Wisselaar voor weergavewaarde . Kies een kleurruimte uit de vervolgkeuzelijst. Zie Kleuren converteren .
    Opmerking: Als u het vervolgkeuzemenu rechtstreeks wilt openen, houdt u Shift ingedrukt en klikt u op het kleurvoorbeeldpictogram naast de kleurwaarde.
12. Vergroot de contrastverhouding . Opent de overeenkomstige sectie waarmee u het contrast kunt corrigeren .

13. Wisselaar van kleurenpalet . Klik erop om te schakelen tussen:

    • Materiaalontwerppalet .
    • Aangepast palet. Om de huidige kleur handmatig aan dit palet toe te voegen, klikt u op .
    • Palet CSS-variabelen . Geeft een overzicht van alle aangepaste CSS-variabelen (toegevoegd met -- ) op uw pagina.
    • Paginakleurenpalet . Om dit palet te genereren, zoekt DevTools naar alle kleuren in uw stylesheets.

Kies een kleurruimte

Een kleurruimte kiezen:

1. Houd Shift ingedrukt en klik op het voorbeeldpictogram naast een kleurwaarde. Er wordt een vervolgkeuzelijst geopend.

   Opmerking: U kunt ook op de schakelaar Weergavewaarde in de Kleurkiezer klikken.

   

2. Kies een van de volgende kleurruimten:

   • #<hex-color>
   • rgb(XXX / .X) .
   • hsl(XXX / X) .
   • hwb(XXX / .X) .

   Of één van de nieuwe ruimtes:

   • lch(XXX / .X)
   • oklch(XXX / .X)
   • lab(XXX / .X)
   • oklab(XXX / .X)

   Of een ruimte gedefinieerd door de functie color(<color_space> XXX) .

Kleuren converteren

Wanneer u tussen kleurruimten schakelt met de Display value switcher , converteert DevTools de waarden automatisch.

Let op: Bij het converteren van HD naar niet-HD knipt DevTools de gamma's zodat ze in de ruimte passen en markeert de geknipte waarden met waarschuwingspictogrammen.

Beweeg over het pictogram om de oorspronkelijke waarde te zien.

In de volgende video ziet u conversies in actie.

Contrast corrigeren

Belangrijk punt: De Kleurkiezer berekent de contrastverhoudingen alleen voor de color en relatief ten opzichte van de respectieve background-color . Alleen de color hebben dus secties voor contrastverhoudingen .

Een contrastprobleem voor een color oplossen:

1. Open de Kleurkiezer naast de color .
2. Vouw de contrastverhouding uit sectie.

3. Gebruik de voorgestelde kleur die voldoet aan een richtlijn:

   • Klik naast de richtlijn.
   • Sleep in het Shades- voorbeeld bovenaan de kleurencirkel onder de overeenkomstige lijn.

Opmerking: Standaard stelt de Kleurkiezer voor dat u de WebAIM-richtlijnen volgt. Als alternatief kunt u instellen dat waarden worden voorgesteld die voldoen aan APCA : In Instellingen > Experimenten , vink aan Schakel het nieuwe Advanced Perceptual Contrast Algorithm (APCA) in...

Om in één keer een lijst te krijgen van alle contrastproblemen, volgt u de handleiding Maak uw website leesbaarder .

Proef waar dan ook een kleur met de pipet

De Met de pipet kunt u kleurenmonsters nemen, zowel vanaf de pagina als vanaf elke plek op het scherm.

Om ergens op het scherm een ​​kleur te kiezen:

1. Open de Kleurkiezer en voer een van de volgende handelingen uit:
   • Klik op de knop.
   • Druk op C om de pipet te activeren. Druk op Escape om te deactiveren.
2. Terwijl de pipet actief is, beweegt u de muis over de doelkleur en klikt u om een ​​monster te nemen.

Opmerking: De pipet test alleen kleuren in de sRGB-kleurruimte. Wanneer u buiten deze ruimte monstert, clipt de pipet de kleur naar de dichtstbijzijnde kleur. Zie Kleuren converteren .